Upgrade de Vue 2 a Vue 3
Última actualización
Última actualización
Hacer tests de sistema para los flujos más importantes que tengan componentes de Vue.
Instalar la versión de compatibilidad de vue 3, siguiendo las instrucciones en hasta el punto 3 (usar las instrucciones de webpack). Ignorar warnings de peer dependencies.
Ejecutar ./bin/webpack-dev-server
en la carpeta del proyecto e ir resolviendo uno a uno los warnings y errores hasta que compile y los tests pasen.
Buscar alternativas a librerías usadas o actualizarlas.
vee-validate 3 -> vee-validate 4 (no tiene guía de migración, el autor recomienda tratar vee-validate 4 como una librería nueva)
npm ls vue
en la raiz del proyecto debería retornar solo vue 3.
Una vez que la app funcione, no necesariamente al 100% pero por lo menos que el trabajo de migración esté semicompleto, romper todo de nuevo instalando la receta de frontend de potassium. Acá hay tres alternativas:
Instalar la receta de frontend encima del proyecto, forzando la sobreescritura y revisar qué archivos sobran. Tiene la desventaja que hay que estar revisando el diff de git para ver qué cosas del proyecto cambiaron.
No es necesario reescribir los componentes ya existentes a typescript, se pueden ir migrando de a poco.
No es necesario reescribir los componentes ya existentes a la Composition API + ****script setup
, se pueden ir migrando de a poco.
Al final de esto el proyecto debería quedar con Vue 3 (sin el build de compatibilidad a menos que no hayan encontrado alternativa a las librerías usadas), Tailwind 3 y Shakapacker.
Los filtros ya no existen en vue3 (con la compatibility build tampoco funcionaban, al menos que haya hecho algo mal XD). lo que hice fue:
definir los filtros como funciones globales:
luego se pueden usar asi: :startup="$filters.camelizeKeys(<%= @startup.to_json %>)"
en caso de que el proyecto use filtros nesteados, por ej. filtro1 | filtro2 | filtro3
, se puede definir una función que los aplique en orden:
y luego se puede usar asi:
En vue3 v-bind="$attrs"
reemplaza a v-on="$listeners
. Si se quiere agregar algun input custom o modificar alguno, se puede hacer asi:
notar que los eventos vienen prefixeados con on
beforeDestroy
esta deprecated, no se si con la compatibility build sigue funcionando, en vue3 hay que remplazarlo por beforeUnmount
vue-js-modal -> modal de
v-tooltip ->
(en un proyecto de cero recomendaría Pinia pero en un upgrade no vale la pena cambiar)
Crear un proyecto nuevo con potassium en otra carpeta y comparar los cambios con lo que tienen, usando algo como o , para ir actualizando a mano.
Instalar shakapacker a mano, siguiendo la y después revisar los cambios que hace la receta de frontend para que quede igual que el resto de los proyectos.
Si se usaba un EventBus con Vue
, se puede reemplazar por algo como https://github.com/developit/mitt, o