Llegó la hora de ir dejando poco a poco a Vue 2 y empezar a mirar de forma diferente: hay que cambiar a Vue 3, y nada mejor que empezar a poner en marcha todo lo que ya te conté (el camino a Vue 3) y practicar con los conceptos básicos de Vue 3. Te doy dos buenas razones:
- porque es el futuro
- porque en esta misma entrada tienes una plantilla para empezar
Cambiar a Vue3 desde Vue2 no es directo
Cambiar la Vue 2 a Vue 3 no es directo, es decir, cambio el enlace Javascript a la nueva versión y mi código sigue funcionando …. error!. Obtendrás multitud de errores porque el concepto ha cambiado, y como tal, tendrás que cambiar toda tu aplicación. Además, en mi caso concreto, tengo el handicap de que sigo sin poder utilizar NodeJS ni TypeScript para hacer SPA, con lo que ciertas ayudas cómo Vue-CLI no las tengo disponibles, o el hecho de poder escribir ficheros .vue (en mi caso serán .js).
Algunos frameworks tradicionalmente complementarios a Vue aún no están soportados en Vue 3, por lo que puedes ir avanzando sin prisas. En mi caso, Vuetify aún no está soportado.
Primer ejemplo de Vue 3
Para el primer ejemplo con Vue 3, lo primero que hay que entender es que es necesario utilizar los módulos ES6 de Javascript, que desde hace ya un tiempo están disponible en distintos navegadores de forma nativa. Para ello, es necesario incluir type=”module” en scripts.
El código HTML de inicio es:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>Vue3 with @manejandodatos</title>
</head>
<body>
<div id="app"> </div>
<script src="https://unpkg.com/vue@next"></script>
<script type="module" src="scripts/index.js"></script>
</body>
</html>Básicamente, el código HTML no tiene ninguna complejidad, ya que sólo se ha incluido un DIV con referencia #app dónde se desarrollará la acción. Se hace referencia a cargar Vue 3, tal y cómo especifica en la documentación oficial.
La segunda carga es referida al módulo index.js incluido en el directorio scripts, que es el que desarrolla el ejemplo completo.
El código de scripts/index.js
El código es también bastante simple:
import app from '../components/app.js'
const {createApp} = Vue;
createApp(app).mount('#app');Se importa el componente app creado en components/app.js y que vemos a continuación. Después, siguiendo con Vue 3, se extrae la función createApp de Vue 3, y se monta usando el div #app, creado en el HTML.
El código de components/app.js
El código del componente
export default {
name: 'Test',
setup() {
const title = "Vue 3 with @manejandodatos";
return {
title
};
},
template: `
<div>
<h1>{{title}}</h1>
</div>
`,
};Cómo es un módulo, es necesario realizar la exportación, y se ha utilizado composition API para el ejemplo, dado que se utiliza setup para inicializar. Además, tenemos template con el código HTML.
Y el resultado del primer ejemplo de Vue 3
Si intentas ejecutar el archivo html sin servidor, aparecerá el problema de CORS:
Así que, una opción es usar el plugin Live Server de Visual Studio Code:
Y lo ejecutamos desde Firefox, ahora, ya sin problema:
Y con esto, hemos preparado una plantilla de Vue 3 para empezar a aprender las novedades, disponible en GitHub.
data() es ahora una función
En el caso de que necesites incluir data, debes recordar que es una función, y cómo tal, debe devolver un valor. Es exactamente igual que la propiedad data de los componentes, ya que en caso de que no sea así, tendrás un código con errores.
Vue DevTools
El segundo punto importante son las Dev Tools, que son distintas a las de Vue 2, y por tanto, deberás instalar la nueva versión.
De momento, no he conseguido la extensión para Vue 3 en Firefox, que parece aun está en beta.
Happy coding!