Pokedex: Actualizar Vue de la versión 2 a la 3

Anteriormente actualizamos la versión de Laravel de la 8.x a la 9.27, ahora toca el turno para actualizar la versión de Vue.

La publicación anterior la puedes consultar aquí:

https://dev.to/krsrk/pokedex-update-laravel-from-8x-to-9x-4018

Actualmente la versión 3 de Vue, viene con "composition API", la cual en términos generales, es una funcionalidad que hace que tu app de Vue2 no se rompa con lo nuevo del Vue3.

Uno de los primeros cambios que podremos notar, será como se define la instancia de Vue.

A continuación, actualizaremos a la versión 3, configurando lo básico.

Configuración

Inicialmente, debemos modificar el archivo "package.json" con lo siguiente:

"devDependencies": {
     "@vue/compiler-sfc": "^3.2.38",
     "axios": "^0.21.4",
     "css-loader": "^6.7.1",
     "laravel-mix": "^6.0.0-beta.17",
     "postcss": "^8.1.14",
     "resolve-url-loader": "^3.1.2",
     "sass": "^1.32.11",
     "sass-loader": "^11.0.1",
     "vue": "^3.2.36",
     "vue-loader": "^17.0.0"
},
"dependencies": {
     "tailwindcss": "^2.2.4",
     "vuex": "^4.0.0"
}

Como podemos observar, actualizamos varias versiones de paquetes existentes, y agregamos otros paquetes que nos sirven para usar Vue 3.
En el caso de Vue, actualizamos los paquetes de "vue" y "vue-loader", quitamos "vue-template-compiler", agregamos "@vue/compiler-sfc" y actualizamos "vuex".

Una vez que hemos realizado lo anteriormente descrito, borraremos los siguientes archivos:

• node_modules
• public/css/app.css
• public/js/app.js(todo lo que contenga esta carpeta)

Una vez borrados los archivos tendremos que ejecutar lo siguiente:

npm install

Si todo se realizó de forma correcta, ejecutamos el siguiente comando:

npm run dev

Configuración de punto de entrada de Javascript

Como se mencionó anteriromente, la creación de la instancia de Vue3 es un poco diferente a la versión anterior, por tal motivo tendremos que modificar el punto de entrada de la app.

Para lograrlo, modificaremos el archivo resources/js/app.js con lo siguiente:

require('./bootstrap');
import { createApp } from 'vue';
import store from './store/store';

import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";

createApp({
    components: {
        'pokedex-nav': PokedexNav,
        'pokedex-content': PokedexContent,
        'pokedex-footer': PokedexFooter,
    }
}).use(store).mount('#app')

La diferencia consiste que antes usábamos "new Vue" para crear nuestra app, en esta versión tenemos que usar el método "createApp" de la versión 3.

Modificación de los componentes

Otro de los cambios en la versión 3 de Vue, es la definición de componentes, aunque en teoría no debe afectar si los dejamos así, vamos a modificar uno de ellos, para ver la diferencia.

Modificamos el componente "PokedexNav" con lo siguiente:

<script>
import { defineComponent } from 'vue';

export default defineComponent({
    name: "PokedexNav"
});
</script>

Usamos la función "defineComponent" para configurar y programar nuestro componente, anteriormente simplemente lo exportábamos como un objeto.

Modificación del Store

La llamada al "store" definida por "Vuex" también cambio, aquí antes inyectábamos la store definida global en el objeto del componente, ahora tendremos que usarla en el "setup" del componente.

Definimos nuestra store modificando el archivo "store.js"

import { createStore } from 'vuex';
import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"

const store = createStore({
    state,
    getters,
    mutations,
    actions,
})

export default store

Usamos la función "createStore" para definir y configurar nuestra "store". Previamente en "app.js" la habíamos configurado en la función de "createApp" de nuestro punto de entrada.

Ahora modificamos el componente "PokedexContent" con lo siguiente:

<script>
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

import TheItemData from "./TheItemData";
import TheSearchBox from "./TheSearchBox";

export default defineComponent({
    name: "PokedexContent",
    components: {
        'the-item-data': TheItemData,
        'the-search-box': TheSearchBox,
    },
    created() {
        this.$store.dispatch('getPokemonsData')
    },
    setup() {
        const store = useStore();
        let items = computed(function () {
            return store.state.pokemonsWithSearchFilter;
        });

        return {
            store,
            items,
        }
    }
})
</script>

La "store" la definimos con la función "useStore" en "setup()", toda la configuración de la misma, fue definida en el archivo "app.js". Después definimos nuestra propiedad "computed"(otra función de "vue") y le pasamos el "state" del store a esta propiedad.

Cabe destacar que aunque tenemos definido el store en el setup, todavía funciona la llamada al store de la versión 2 con "this.$store".

Al terminar de realizar todo lo anteriormente descrito, ya podremos ejecutar nuestro Pokedex con Vue actualizado a la versión 3.

Si deseas visualizar la diferencia de los archivos cuando se actualizó la versión de Vue, la puedes consultar en el siguiente PR:

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