2. Instalasi

tech

Table of Content

• Instalasi
• app.js

Instalasi

Btw, Saya menggunakan Laragon dia paket lengkap sudah include nodejs, composer, php juga. Ikuti langkah berikut:

1. composer create-project laravel/laravel nama_folder
2. cd nama_folder
3. composer require laravel/ui
4. php artisan ui vue
5. npm install
6. npm run dev (harus dijalankan, bila tidak maka akan error Mix manifest not found at...)
7. jalankan juga php artisan serve

Logicnya seperti ini. Karena VueJS konsep SPA(Single Page Application), jadi kita cukup punya 1 route di laravel yg akan dijadikan entripoint, Misal:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Vite Example</title>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        <example-component></example-component>
    </div>
    @vite('resources/js/app.js')
</body>
</html>

app.js

Ini entry point milik Vuejs, setting router akan disini! resources/js/app.js

import './bootstrap';
import { createApp } from 'vue';
 
const app = createApp({});
 
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
 
app.mount('#app');

Kode diatas belum menggunakan Vue Router. Berikut contoh bentuk komponen dari VueJS.

resources/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Update: Untuk memanggil route awal ke index.html kan seperti ini: web.php

Route::get('/', function () {
    return view('index');
});

Nah kita kan sudah buat route di router.js -> 3. Vue Router. Ada route tapi kok error? mau gamau balik ke home nya atau localhost:8000/.

Nah untuk mengatasinya kita buatkan route seperti ini:

Route::get('/{any}', function(){
    return view('index');
})->where('any', '.*');

Penjelasan:

• '/{any}': Ini adalah pola rute yang menyatakan bahwa URL yang cocok akan diproses oleh fungsi tersebut. {any} adalah parameter dinamis yang akan menangkap bagian dari URL apapun setelah garis miring (slash /).
• >where('any', '.*'): Ini adalah batasan yang diterapkan pada parameter {any}. Dalam hal ini, batasan '.*' adalah ekspresi reguler yang cocok dengan string apa pun, termasuk string kosong. Ini berarti rute ini akan cocok dengan URL apa pun yang mengikuti garis miring /, dan parameter {any} akan menangkap seluruh bagian URL tersebut.

Maka ketika kita mengetik alamat yg tertera di router.js maka tidak ada error lagi:

Date: 23-07-2024