Vue3: Conoce todas las novedades

Vue 3 Fragments

  • ¿Cuántas veces has tenido que añadir un elemento raíz vació en tus componentes Vue?. ¿Cientos, miles quizá?. Es una de esas sensaciones extrañas al usar un framework tan elegante como Vue: el tener que añadir un elemento sin ninguna carga semántica, sólo para contener al resto porque sólo puede existir un elemento principal.
  • Con Vue 3 esto se acabó. Desde ahora se permite tener varios elementos de nivel principal.
  • De hecho, cuando creamos un proyecto con Vite y Vue 3, ese es el escenario que nos encontramos. Vamos a probarlo.
  • Como ya sabes, crear un proyecto con Vite es tan sencillo como npm init vite-app fragments.
  • Si lo inspeccionamos con nuestro editor de código y abrimos App.vue ahí están esos dos elementos de nivel principal.
  • Te puede parecer una tontería, pero en algunos escenarios al utilizar FlexBox o GRID, esta libertad simplifica mucho las cosas.
  • Otra cosa que seguro te has dado cuenta es que no tenemos el acostumbrado linting de Vue CLI. Esto es porque no hemos instaldo ESLint como dependencia. Si tu primer reflejo ha sido copiar la configuración de un proyecto de Vue 2x habrás comprobado que no funciona.
  • Esto es porque se requiere la versión next del plugin eslint-vue-plugin. Vamos a instalar todas ellas de una vez y a configurar ESLint.
  • Asumiendo que usas Visual Studio Code, primero, asegúrate de que en tu settings.json tienes:
{
  "vetur.validation.template": false,
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "editor.formatOnSave": true,
}
  • Luego, instala estas dependencias de desarrollo npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-vue@next.
  • Por último debemos crear nuestro archivo de configuración para ESLint, llamado .eslintrc.js:
module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    "plugin:vue/vue3-recommended",
    "prettier",
    "prettier/vue",
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  },
};
  • Quizás tengas que reiniciar Visual Studio Code pero, independientemente, ahora tienes linting en tus proyectos Vue 3.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue