These instructions will guide you on how to add and install VueJs with Vite to a laravel project.

The following Requirements are assumed for this short guide:

  1. Laravel  10 New Fresh Project
  2. NodeJs
  3. Visual Code Editor

1. Open a terminal in the root Laravel Directory.

2. install VueJs

npm install
npm install vue@next
npm install @vitejs/plugin-vue
code vit.config.js

3.Change the vite configs to the following code. Note that we create an alias called 'vue' to be used in main.js

vite.config.js

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

 

4. Create a man.js file and add the following code: $ code resources/js/main.js

main.js

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

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

 

5. Create App.vue

App.vue

mkdir resources/js/components
echo '<script></script><template><h1>App component</h1></template>' > resources/js/components/App.vue
code resources/js/components/App.vue

6. Open welcome.blade.php and change all the code to the following. $ code resources/views/welcome.blade.php

welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel with VueJs</title>
    @vite('resources/js/main.js')
</head>
<body>
    <div id="app">
        <App>
    </div>
</body>
</html>

 

7. Start the nodejs and php artisan server:

$ npm run dev
$ php artisan serve

8. Open in browser: http://127.0.0.1:8000

9. Done

10. Hope that helps.

Resource:/g/xampp8/htdocs/laravel/ForTesting_Purposes/laravel-for-testing

Su8dWVrHdkc