Vite with Laravel: Using Vue.js

To transpile Vue single-file components, install @vitejs/plugin-vue. If you are using Vue 2, install vite-plugin-vue2 instead.

{
"private": true,
"scripts": {
"dev": "vite",
"production": "vite build"
},
"devDependencies": {
+ "@vue/compiler-sfc": "^3.0.6"
+ "@vitejs/plugin-vue": "^1.1.5",
"axios": "^0.21",
"lodash": "^4.17.19",
"vite": "^2.1.0",
"vue": "^3.0.7"
}
}

Next, we'll register the plugin in our Vite config.

// vite.config.js
import vue from '@vitejs/plugin-vue';
 
export default ({ command }) => ({
base: command === 'serve' ? '' : '/build/',
publicDir: 'fake_dir_so_nothing_gets_copied',
build: {
manifest: true,
outDir: 'public/build',
rollupOptions: {
input: 'resources/js/app.js',
},
},
plugins: [vue()],
});

Ready for takeoff!


Vite with Laravel