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!