TheLazy.Dev
Portfolio GitHub

Blog

laravel |vite |vue |javascript

Pokedex: Migración de Mix a Vite

krsrk

Chris López

Posted on September 8, 2022

Pokedex: Migración de Mix a Vite

En la anterior publicación nos dimos a la tarea de actualizar la versión de "Vue"(de Vue 2 a Vue 3).

Puedes ver la publicación aquí: https://dev.to/krsrk/pokedex-actualizar-vue-de-la-version-2-a-la-3-58gj

Ahora, requerimos actualizar la herramienta de compilación de los recursos de "Javascript".

Desde la versión 9.19 de Laravel cambio la herramienta para compilar los recursos de Javascript, dejando "Laravel Mix" a un lado, e integrando "Vite" como la herramienta oficial para esta tarea en Laravel.

Las diferencias entre estas es que "Vite" te da un entorno de desarrollo y compilación mas rápido que "Laravel Mix" y "Webpack".

Aquí puedes obtener información sobre Vite:
https://vitejs.dev/guide/why.html
https://laravel.com/docs/9.x/vite

Configuración

Para integrar Vite a un proyecto ya existente, solamente necesitamos instalar dos paquetes; para lograr esto debemos ejecutar lo siguiente:

npm install --save-dev vite laravel-vite-plugin
Enter fullscreen mode Exit fullscreen mode

También necesitaremos instalar el plugin de Vite para Vue:

npm install --save-dev @vitejs/plugin-vue
Enter fullscreen mode Exit fullscreen mode

Creamos el archivo "vite.config.js":

touch vite.config.js && nano vite.config.js
Enter fullscreen mode Exit fullscreen mode

Lo editamos con el siguiente contenido:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        vue()
    ],
});
Enter fullscreen mode Exit fullscreen mode

Actualizamos el archivo "package.json" en su sección de "scripts" con lo siguiente:

"scripts": {
        "dev": "vite",
        "build": "vite build"
    },
Enter fullscreen mode Exit fullscreen mode

Configuración en código

Otro requerimiento para que funcione correctamente "Vite", es quitar en el proyecto los "require y sustituirlos por "import". Además los archivos de los componentes en los "import" deben terminar con ".vue", Ejemplos:

//bootstrap.js
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Enter fullscreen mode Exit fullscreen mode 
//app.js
import './bootstrap';

import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";
Enter fullscreen mode Exit fullscreen mode

Ahora, reemplazaremos "mix()" o "asset()" por "@vite" en el "layout.blade":

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pokedex</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
Enter fullscreen mode Exit fullscreen mode

Eliminamos Laravel Mix y su configuración:

npm remove laravel-mix && rm webpack.mix.js
Enter fullscreen mode Exit fullscreen mode

Configuramos Tailwind:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Configurar Sail

Para que Vite se ejecute en el contenedor de Sail, necesitamos realizar unas configuraciones para que funcione la integración.

Nos aseguramos que en el archivo "docker-compose.yml" tenga esta línea en el servicio "laravel.test":

- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
Enter fullscreen mode Exit fullscreen mode

Abrimos el "vite.config.js" y agregamos lo siguiente en la sección de "defineConfig":

server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
    },
Enter fullscreen mode Exit fullscreen mode

Vite por default tiene configurado un host, y asignándole dicha configuración va a convivir con el contenedor de Sail.

Nota: La configuración "hmr" sirve para cuando se usa WSL2 en Windows.

Borramos caché y ejecutamos Vite:

sailartisan optimize:clear && sail npm run dev
Enter fullscreen mode Exit fullscreen mode

Y Voila!, ya tenemos corriendo el Pokedex con Vite y nuestros recursos de Javascript se compilan casi al instante.

Otra de las ventaja de tener Vite en nuestro proyecto, es que el "hot reload" lo hace casi instantáneo en cuanto guardas los cambios de algún archivo.

Si quieres ver la diferencia de archivos para esta configuración lo puedes consultar aquí:

https://github.com/krsrk/pokedex-laravel/pull/8

💖 💪 🙅 🚩
krsrk
Chris López

Posted on September 8, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to pass values from PHP to JavaScript using Laravel Vite
laravel How to pass values from PHP to JavaScript using Laravel Vite

August 9, 2024

Pokedex: Migración de Mix a Vite
laravel Pokedex: Migración de Mix a Vite

September 8, 2022