Cara Menjalankan Vue 3 di Laravel – Vue.js merupakan salah satu framework JavaScript yang populer untuk membangun antarmuka pengguna yang dinamis. Saat ini, Vue.js versi 3 adalah yang paling terbaru, dengan banyak perubahan dan peningkatan dibandingkan dengan versi sebelumnya. Jika Anda ingin mengintegrasikan Vue 3 ke dalam proyek Laravel, langkah-langkah berikut akan memandu Anda melalui prosesnya.
Persiapan Sebelum Install
Sebelum mengintegrasikan Vue 3 ke dalam proyek Laravel, anda harus sudah melakukan konfigurasi dan instalasi Laravel. Klik link berikut untuk instalk laravel Cara Install Laravel 10 dan Vue 3.
Cara Menjalankan Vue 3 di Laravel
1. Setup Vite Config
Buka file vite.config.js kemudian tambahkan code seperti berikut:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; // kode tambahan
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue() // kode tambahan
],
});2. Edit Welcome View
Secara default laravel akan menjalan view bernama welcome.blade.php, edit file tersebut menjadi seperti berikut:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
3. Buat Folder Baru
Buat folder baru dengan nama components dan router di dalam folder resources/js, sehingga struktur file seperti berikut:
4. Edit app.js
Edit file app.js seperti berikut:
import './bootstrap';
import { createApp } from 'vue';
import app from './components/app.vue';
import router from './router/index.js';
createApp(app).use(router).mount("#app");5. Menambahkan Router Index
Buat file baru di dalam folder router dengan nama index.js kemudian isikan dengan code berikut:
import { createRouter, createWebHistory } from "vue-router";
import homePage from '../components/index.vue';
const routes = [
{
path:'/',
component: homePage
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
6. Membuat Component Vue
Buat file baru dengan nama app.vue di dalam folder components kemudian isikan dengan code berikut:
<template>
<router-view />
</template>Selanjutnya buat lagi file dengan nama index.vue kemudian isikan dengan code berikut:
<template>
<h1>Hello, Welcome To Laravel 10 and Vue 3!</h1>
</template>
7. Jalankan Program
Sampai di tahap ini Anda sudah berhasil mengintegrasikan Vue3 di dalam proyek Laravel. Masuk ke command prompt kemudian tuliskan perintah berikut:
npm run devSelanjutnya buka command prompt baru dan tuliskan perintah berikut:
php artisan serveSetelah itu, Anda bisa mengakses proyek Laravel dengan integrasi Vue di http://localhost:8000.
Kesimpulan
Dengan ini, Vue 3 sudah siap digunakan dalam proyek Laravel Anda. Anda dapat mulai membuat komponen-komponen Vue yang interaktif dan mengintegrasikannya dengan logika aplikasi Anda.
Integrasi Vue.js dengan Laravel memungkinkan Anda untuk membangun antarmuka pengguna yang lebih dinamis dan interaktif dengan cara yang efisien. Dengan mengikuti langkah-langkah di atas, Anda akan dapat menjalankan Vue 3 di dalam proyek Laravel dengan mudah.
