1. First install laravel as usual 2. the cd/enter to your project 3. now run the command [npm i vue@next vue-loader@next] to install vue into your project 4. now install vue plugin run the command [npm i @vitejs/plugin-vue] 5. if it came npm errors the youcan install specified version of vitreplugin by typing e.g[npm i @vitejs/plugin-vue@3.0.x] 6. now open vite.config.js file and add some code as follows add this line at headings import vue from "@vitejs/plugin-vue"; 7. then put a coma after laravel code and add the following code vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, } } }) 8. open the blade main or welcome file and make a div in the body with id 'app' 9. now go to the resources/js folder and make a file named welcome.vue and type the follwing code in it and save <template> <h1>welcome page frm vue js</h1> </template> 10. now open app.js file in resources/js folder and remove the existing code. Then type the following code import {createApp} from "vue"; import welcome from './welcome.vue'; createApp(welcome).mount('#app'); 11. No open welcome.blade file and add the following code in head section @vite(['resources/js/app.js','resources/css/app.css']) 12. Hurrah!! now enjoy laravel with vue..
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter