Vite with Laravel: Using Vue.js

March 22, 2021 ∙ 1 min. read ∙ #laravel #vite #frontend #buildtools #vue

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!

More Laravel, Vite, Frontend, Build tools & Vue