Vite with Laravel: Using Vue.js

March 22, 2021

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!

If you enjoyed this post, you might be interested in my newsletter. I occasionally send a dispatch with personal stories, things I’ve been working on in the past month, and other interesting tidbits I come across online.