Vuejs-3 Installation on Laravel 10 with Vite

3 min readJul 5, 2023

Single Page Application (SPA) ရေးသားဖန်တီးဖို့ Laravel Project မှာ Vite သုံးပြီး Vuejs 3 ကိုဘယ်လို Install လုပ်ရမှာလဲဆိုတာ ပြောပြပေးသွားပါမယ်။

Step 1: Create New Laravel Project

composer create-project laravel/laravel laraVue

အပေါ်က command လေးနဲ့ laraVue ဆိုတဲ့ နာမည်နဲ့ Laravel Project ကို Download လုပ်လိုက်ရင် Laravel project တစ်ခုရသွားပါမယ်။

Step 2: Install Vue 3 on Laravel 10

npm install
npm install vue@next

laraVue ဆိုတဲ့ Laravel Project ကနေ “npm install” ဆိုတဲ့ Command ကို Enter လုပ်လိုက်ရင် package.json file နဲ့ Node Package တွေရှိနေမယ့် node_modules folder ကို ရရှိသွားပါမယ်။ နောက်ပြီး ဒီ ရှိနေတဲ့ Laravel project မှာပဲ Vuejs ကို Install လုပ်ချင်တာမလို့ “npm install vue@next” လို့ရိုက်လိုက်ရင် Vuejs latest version ကိုရရှိသွားပါမယ်။

Step 3: Install Plugin Vue From Vite

npm i @vitejs/plugin-vue

Frontend Language ကို Configure လုပ်ဖို့ Laravel က Vite ကိုပဲ Official သုံးလိုက်ပြီမလို့ Vuejs ကို Laravel project မှာခေါ်သုံးလို့ရအောင် (သို့မဟုတ်) Vite မှာ Vuejs Support ဖြစ်အောင် plugin-vue ဆိုတဲ့ Plugin လေးတစ်ခုကို vitejs ကနေ install လုပ်ပေးလိုက်ရတာပါ။

Step 4: Edit vite.config.js File

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ]
});

Vite ကိုသုံးပြီး Frontend Language ကို Configuration လုပ်နေတာမလို့ defineConfig ကို “vite” ကနေ Import လုပ်လိုက်တယ်။ Laravel ကို ‘laravel-vite-plugin’ ကနေ Import လုပ်လိုက်တယ်။ Vue ကို ‘@vitejs/plugin-vue’ ကနေ Import လုပ်လိုက်တယ်။

defineConfig object မှာဆိုရင် vite အတွက် Configuration option တွေပါဝင်ပါတယ်။ vite plugin တွေကို register လုပ်လို့ရမယ့် plugins ဆိုတဲ့ Property ပါဝင်တာကိုတွေ့ရမှာဖြစ်ပါတယ်။

vue() — vite မှာ vuejs Support ဖြစ်အောင် register လုပ်ပေးရတဲ့ plugin ပါ။

laravel() — ဒီ plugin ကလည်း Laravel နဲ့ Vite အကြားမှာပဲ integration လုပ်ပေးတဲ့ plugin လေးတစ်ခုဖြစ်ပါတယ်။ အဲ့ဒီမှာဆိုရင် input ရယ် refresh ရယ်ဆိုပြီး option နှစ်ခု Object အနေနဲ့ လက်ခံထားပါတယ်။ input ကဆိုရင် ယခု Project ရဲ့ CSS နဲ့ JavaScript ဖိုင်တွေရဲ့ entry point ဖြစ်ပြီး refresh ကတော့ Development လုပ်နေစဉ်မှာ Browser ကို Hot reload လုပ်ပေးဖို့ဖြစ်ပါတယ်။

Step 5: Edit app.js File Inside resources/js Folder

import { createApp } from 'vue';
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

ဒီ Step က Vuejs 3 setup ရပြီးသားသူတွေအတွက်က ပြောနေစရာတောင် မလိုတော့ပါဘူး။ နောက်မှဖန်တီးမယ့် App.vue ဆိုတဲ့ Vue Component File ကို နောက် Step မှာ Edit လုပ်မယ့် welcome.blade.php file မှာရှိတဲ့ id=”app” ရှိတဲ့ div ကို mount လုပ်လိုက်တာပါ။

Step 6: Edit welcome.blade.php File Inside resources/views Folder

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel & Vue3 with Vite</title>
        @vite('resources/css/app.css')
    </head>
    <body>
        <div id="app"></div>
        @vite('resources/js/app.js')
    </body>
</html>

app.js ကနေ App.vue ကို mount လုပ်ဖို့အတွက် id=”app” ပါရှိတဲ့ div ကိုဆောက်လိုက်တာပါ။ vite.config.js မှာ သတ်မှတ်ထားခဲ့တဲ့ အတိုင်း css နဲ့ js file တွေကို @vite ကိုသုံးပြီး link ချိတ်လိုက်တာပါ။ ဒီ welcome.blade.php file က LaraVue project ရဲ့ Entery File ဖြစ်သွားပါပြီ။

Step 7: Create App.vue File Inside resources/js Folder

<template>
    <h1>Laravel + Vue3 with Vite</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</template>

ဒီ File က Vue ဘက်မှာ အဓိက Entery point Component ဖြစ်သွားပါပြီ။ ဘာလို့လဲဆိုတော့ Step 5 မှာ welcome.blade.php (whole project entry file) မှာ mount လုပ်ပေးလိုက်ပြီမလို့ဖြစ်ပါတယ်။

Step 8: Edit web.php File Inside routes Folder

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

->where(‘any’, ‘.*’) — url မှာ slash အပါအဝင် ဘယ် parameter၊ ဘယ် character ပဲ pass လုပ်လုပ် လက်ခံတယ်ဆိုတဲ့ သဘောကိုပြောချင်တာပါ။ မြင်အောင်ပြောရမယ်ဆိုရင် Project URL မှာ User တွေ ဘယ် parameter ကိုပဲ Enter လုပ်လုပ် welcome blade ကိုသွားမယ်၊ အဲ့ဒီ blade file ကနေ App.vue file ကိုသွားပြီး client-side ဘက်ကနေပြီး Vue Router နဲ့ သင့်တော်တဲ့ Vue Component တွေကို လွှဲပေးတော့မယ်ဆိုတာကို ပြောချင်တာပါ။

Step 9: Run the project

npm run dev
php artisan serve

Hot reload ဖြစ်အောင် ရော၊ Frontend asset တွေကို real time compile ဖြစ်အောင်ပါ “npm run dev” run ပေးရတာပါ။ Project ကြီး Browser ကနေကြည့်လို့ရအောင် “php artisan serve” လို့ရိုက်ပြီး ရလာတဲ့ ip address — 127.0.0.1:8000 ကို Browser ကနေ run ရင်အဆင်ပြေသွားပါပြီ။

Love You All
05.07.2023

Vuejs-3 Installation on Laravel 10 with Vite

Written by Ye Myint Soe

No responses yet