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.jsimport 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!