Mengintegrasikan Vue JS 3 ke dalam Laravel 10

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Apa itu VUE JS?

Baru baru ini, telah muncul Vue JS versi 3 dengan kode nama ONE PIECE. Vue JS merupakan frontend javascript framework untuk membangun website dan user interfaces (UI). Vue berjalan di sisi client (Client-Side) dan umum digunakan untuk membuat Single-Page-Application (SPA). Vue mudah diintegrasikan dengan project yang sudah ada dengan menggunakan CDN. Selain itu, Anda juga dapat dengan mudah membuat full-stack aplikasi dengan membuat API di sisi server (Server-Side).

Kenapa Menggunakan Vue Js?

1. Mudah membuat frontend aplikasi dan website dinamis
2. Mudah di pelajari
3. Sangat cepat dan ringan</p>
4. Menggunakan Virtual DOM (Document Object Model)
5. Sangat Populer
6. Mudah diintegrasikan dengan project yang sudah ada menggunakan CDN

Vue 3 dan Laravel ?

Laravel dan Vue.js adalah dua kerangka kerja kuat yang biasa digunakan dalam pengembangan web. Laravel menyediakan solusi backend yang komprehensif, sementara Vue.js menawarkan cara yang fleksibel dan efisien untuk membangun komponen frontend interaktif. Meskipun Laravel menawarkan opsi alternatif seperti Inertia.js dan Livewire untuk antarmuka dinamis, ada situasi di mana pengembang lebih memilih untuk mengintegrasikan Vue.js langsung ke dalam aplikasi Laravel mereka, khususnya untuk proyek yang sudah ada atau proyek pemula.

Tutorial ini dirancang khusus untuk pemula yang memulai proyek semacam itu dan ingin mempelajari cara mengintegrasikan komponen Vue.js ke dalam aplikasi Laravel dengan lancar. Dengan mengikuti langkah-langkah yang diuraikan dalam tutorial ini, Anda akan memperoleh keterampilan berharga dalam menggabungkan komponen Vue.js ke dalam proyek Laravel Anda, meskipun komponen tersebut awalnya dibuat tanpa Vue.js. Mari selami dan temukan bagaimana Anda dapat meningkatkan keterampilan pengembangan Laravel Anda dengan memanfaatkan kekuatan Vue.js!

Berikut langkah - langkah mengintegrasikan / menginstall Vue.js versi 3 ke dalam Laravel 10 :

1. Pastikan Anda sudah menginstall Laravel 10 dengan benar dan berjalan lancar.
2. Buka projek Laravel dengan editor VSCode kemudian buka terminal di dalam VSCode.
3. Ketikkan perintah di bawah ini untuk melakukan instalasi Vue.js dan Vue Loader.

 npm instal vue@latest vue-loader@next  

4. Buka file package.json untuk melakukan perubahanVite dan Laravel-Vite-Plugin seperti di bawah ini :

 "devDependencies": {  
     "@popperjs/core": "^2.11.6",  
     "axios": "^1.6.1",  
     "bootstrap": "^5.2.3",  
     "laravel-vite-plugin": "^1.0.1",  
     "sass": "^1.56.1",  
     "vite": "^5.0.11"  
   },  

Keterangan:


Vite adalah tool builder front-end generasi terbaru, dan Laravel menyediakan plugin Vue untuk mengintegrasikannya dengan aplikasi Laravel Anda yang telah menggunakan Vite.

5. Lanjutkan dengan menjalankan perintah berikut ini untuk melakukan instalasi @vitejs/plugin-vue:

 npm i @vitejs/plugin-vue  

6. Selanjutnya, jalankan perintah berikut ini agar proses update berjalan :

 npm update  

 npm install  

7. Buka file vite.config.js kemudian lakukan modifikasi script seperti di bawah ini :

 import { defineConfig } from 'vite';  
 import laravel from 'laravel-vite-plugin';  
 import vue from '@vitejs/plugin-vue';  
 export default defineConfig({  
   plugins: [  
     vue({  
       template: {  
         transformAssetUrls: {  
           base: null,  
           includeAbsolute: false,  
         },  
       },  
     }),  
     laravel({  
       input: [  
         'resources/css/app.css',  
         'resources/js/app.js',  
       ],  
       refresh: true,  
     }),  
   ],  
   resolve: {  
     alias: {  
       '@': '/resources/js',  
       'vue': 'vue/dist/vue.esm-bundler.js'  
     },  
   },  
 });  

8. Buka file app.js yang berada di dalam subfolder resources/js/app.js, kemudian silakan lakukan editing script seperti di bawah ini:

 import './bootstrap';  
 import { createApp } from 'vue';  
 const app = createApp({});  
 app.mount("#app");  

9. Buka file Layout Utama projek Laravel Anda (jika Anda mengikuti semua tutorial Laravel di blog ini dari awal maka file Layout Utama terletak di dalam file master.blade.php yang berada di dalam subfolder resources/vendor/adminlte/master.blade.php), kemudian lakukan editing script seperti di bawah ini:

   <!-- script tambahan -->  
   @vite(['resources/css/app.css', 'resources/js/app.js'])  
 </head>  
 <body id="app" class="@yield('classes_body')" @yield('body_data')>  

10. Silakan projek Laravel kalian jalankan, jika tidak ada trouble yang muncul artinya proses integrasi Vue.js ke dalam projek Laravel sukses.

Semoga artikel ini bermanfaat.