Guide on migrating from Mix to Vite

mix_to_vite.md

Mix -> Vite

• install dependencies
  • vite
  • laravel-vite-plugin
  • vite-plugin-vue2 (for vue2.6) @vitejs/plugin-vue2 (for vue2.7) or @vitejs/plugin-vue (for vue3)

for vue 2.7 https://github.com/vuejs/vue/blob/main/CHANGELOG.md#270-2022-07-01

• create vite.config.js

import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2'; // for vue version 2.6
import vue from '@vitejs/plugin-vue2' // for vue version 2.7 "Naruto"

export default defineConfig({
   server: {
    host: 'example.com' // add this config if you are using host -> php artisan serve --host=example.com
   },

   plugins: [
    laravel(['resources/css/app.css', 'resources/js/app.js']),
    createVuePlugin(),
   ],
   resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js',
      '~': '/resources/js'
    }
   }
});

• if you are using tailwind create postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

• update package.json

"scripts": {
	"dev": "vite",
	"build": "vite build",
}

• update .env

MIX_PUSHER_APP_KEY -> VITE_PUSHER_APP_KEY
MIX_PUSHER_APP_CLUSTER -> VITE_PUSHER_APP_CLUSTER

• update mix(css/js) -> @vite('resources/js/app.js') / @vite('resources/css/app.css')

• if you are getting

vue.runtime.esm.js:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

you need to add alias.

resolve: {
	alias: {
		vue: 'vue/dist/vue.esm.js',
	}
}

• vite doesn't allow require('xx') so you need to update all your code to use import
• vite requires file extension like (.vue). if you are importing vue component without .vue you will get an error:

GET http://localhost:3000/resources/js/components/XXX net::ERR_ABORTED 404 (Not Found)

• vite importing dynamic image/assets

Helper:

export default function getImageUrl(name) {
	return new URL(`../../assets/${name}`, import.meta.url).href;
}
Vue.prototype.$getImageUrl = getImageUrll

Refactor:

// webpack
:src="`require(`@assets/images/${imageName}.svg`)`"
// vite
:src="$getImageUrl(`images/${imageName}.svg`)"

• if you are using laravel-vapor make sure to update to version 0.6.0

• if you are using @fullcalendar/vue make sure to import @fullcalendar/core/vdom at the top

import '@fullcalendar/core/vdom'
import FullCalendar from '@fullcalendar/vue'

• replacement for require.context. example is how to load vuex modues dynamiclly.

// webpack
const requireContext = require.context('./modules', false, /.*\.js$/);
const modules = requireContext
  .keys()
  .map((file) => [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)])
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true;
    }

   return { ...modules, [name]: module };
 }, {});

// vite
const files = import.meta.globEager('./modules/*.js');
const modules = Object.keys(files)
  .map((path) => [
    path
      .match(/[^\\/]+\.[^\\/]+$/)
      .pop()
      .replace(/(\.js$)/g, ''),
    files[path]
  ])
  .reduce((modules, [name, module]) => {
    return {
      ...modules,
      [name]: Object.assign({}, module, { namespaced: true })
    };
 }, {});

• Hot Module Replacement for blade https://freek.dev/2277-using-laravel-vite-to-automatically-refresh-your-browser-when-changing-a-blade-file https://twitter.com/nicoverbruggen/status/1542500232805507073