Guide on migrating from Mix to Vite

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

Aslam97/mix_to_vite.md