La guia de platanus
  • README
  • Acuerdos
    • Guía de Estilo
      • Ejemplo: Módulo para variables de entorno
  • Stack
    • Getting Started
    • Nuestro MVC extendido
    • Ruby/Rails
      • Power Types
        • General
        • Patrones
          • Commands
          • Utils
          • Services
          • Values
          • Observers
      • Potassium
      • Power API
      • Active Admin
        • General
        • Active Admin Addons
      • Pundit
      • Shrine
        • General
        • Manejo y procesamiento de imágenes
      • Pry
      • Strong Migrations
      • Data Migrate
      • Active Job
      • Gems
      • Engines - Modularización en Rails
    • JavaScript
      • Vue
        • General
        • Testing
      • AlpineJS
    • CSS
    • Mobile
      • Expo
      • React Navigation
      • Redux
        • Crear y conectar una slice en Redux
      • Styling
        • Usando Tailwind en React Native
      • Recursos
    • Resolviendo problemas (debugging)
    • Machine Learning
  • Setup
    • Configuración de tu entorno local
      • Instalación Base
        • OSX
        • Windows
        • Linux
      • Tecnologías
        • Ruby
        • Docker
        • Node
      • Herramientas
        • Linters
        • Editores
          • IDE/Editores de Código
            • Visual Studio Code
            • Sublime Text
        • Git
    • Configuración de proyectos
      • Getting Started
      • Heroku
      • Rails
      • Circle CI
      • Vue
      • Apple App Store
      • Google Play
      • Expo
      • S3
      • Git
      • Cloudflare
      • Sendgrid
      • Dominio + Mailing
      • Google Tag Manager, Analytics, Search Console, etc.
        • Google Tag Manager
          • Configurar Google Tag Manager
        • Google Analytics
        • Indexación en Google
        • Google Ads
      • Crear un bucket de S3
      • SlackBot
      • Google BigQuery
  • Deployment
    • Rails
    • Ruby Gems
    • Browser and Node (Open Source)
    • Mobile
      • Mobile Resources
      • Apple App Storage
      • Google Play
  • Upgrades
    • Upgrade de Vue 2 a Vue 3
    • Migración Hound → reviewdog
    • Upgrade de Postgresql
Con tecnología de GitBook
En esta página
  1. Upgrades

Upgrade de Vue 2 a Vue 3

AnteriorGoogle PlaySiguienteMigración Hound → reviewdog

Última actualización hace 2 años

  1. Hacer tests de sistema para los flujos más importantes que tengan componentes de Vue.

  2. 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.

// config/webpack/environment.js
// ...
environment.config.merge({
  resolve: {
    alias: {
      'vue': '@vue/compat/dist/vue.esm-browser.js',
    },
  },
});
// config/webpack/loaders/vue.js

module.exports = {
  test: /\\.vue$/,
  loader: 'vue-loader',
  options: {
    compilerOptions: {
      compatConfig: {
        MODE: 2,
      },
    },
  },
};
  1. 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.

  2. 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)

  3. npm ls vue en la raiz del proyecto debería retornar solo vue 3.

❌
❯ npm ls vue
app@0.1.0 /project
├── vue@3.2.37
└─┬ vue-linkify@1.0.1
  └── vue@2.7.8

✅
❯ npm ls vue
app@0.1.0 /project
└── vue@3.2.37
  1. 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.

  2. No es necesario reescribir los componentes ya existentes a typescript, se pueden ir migrando de a poco.

  3. No es necesario reescribir los componentes ya existentes a la Composition API + ****script setup, se pueden ir migrando de a poco.

  4. 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.

Comentarios Kalio

  1. 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:

      app.config.globalProperties.$filters = {
          camelizeKeys,
          camelize,
          deaccentisize,
          capitalize,
        };
    • 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:

      export function filterChain(value, filters) {
        if (!value) return null;
      
        let result = value;
        filters.forEach((filter) => {
          result = filter(result);
        });
      
        return result;
      }

      y luego se puede usar asi:

      $filters.filterChain(state, [$filters.capitalize, $filters.split])
  2. En vue3 v-bind="$attrs" reemplaza a v-on="$listeners. Si se quiere agregar algun input custom o modificar alguno, se puede hacer asi:

    attrs() {
        return {
          ...this.$attrs,
          onInput: (event) => this.$emit('update:modelValue', event.target.value),
        };
      },

    notar que los eventos vienen prefixeados con on

  3. 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

https://v3-migration.vuejs.org/migration-build.html
HeadlessUI
floating-vue
vuex 3 -> vuex 4
vue-router 3 -> vue-router 4
Beyond Compare
Meld
guía de migración
https://vueuse.org/core/useEventBus/