[Guide] - Migrate to Vite

[pedro-santiago]

Motivation

• Since default new Laravel apps are now migrating to use Vite, I found useful to migrate as well. It gives us a bunch of features and hotwiring looks great.

1. npm install vite @vitejs/plugin-vue vue@next tailwindcss -D
2. Copy the following to ./vite.config.js:

import path from 'path'
import { defineConfig } from 'vite'
import postcssImport from 'postcss-import'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('trix-')
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js/')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  css: {
    postcss: {
      plugins: [
        postcssImport(),
        tailwindcss('./tailwind.config.js')
      ]
    }
  },
  build: {
    outDir: 'public',
    assetsDir: 'public',
    manifest: true,
    rollupOptions: {
      input: 'resources/js/app.js',
      output: {
        name: 'laravel/nova'
      }
    }
  }
})

3. Substitute npm webpack commands for vite's
4. Profit 👍🏼