• ¿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.
Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Vue 3, Conoce todas las novedades?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬