Como usar Vue 3 antes del lanzamiento oficial

Aunque no es recomendable para aplicaciones en producción, puedes comenzar a usar Vue 3 hoy mismo y de esa forma explorar las nuevas características del framework, así como adelantarte en el proceso de aprendizaje. A continuación, veremos cómo comenzar a utilizar la versión 3 del framework Vue.js.

La Composition API es, hasta el momento, la mayor característica de Vue 3. Esta proporciona una sintaxis alternativa para escribir grandes componentes y reusar código en nuestras aplicaciones. Podemos comenzar a utilizar esta nueva característica en nuestros proyectos escritos en Vue 2 usando el plugin vuejs/composition-api.

Comenzando

Dentro de nuestro proyecto escrito en Vue 2 debemos instalar el plugin. Podemos hacer esto mediante NPM:

# Instalar el plugin composition-api
npm install @vue/composition-api --save

Luego dentro de src/main.js lo importamos:

# Importar el plugin composition-api dentro de src/main.js
import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);

Esto es todo lo necesario para comenzar a usar el plugin.

Usando la Composition API

Primero que nada copia el siguiente componente en tu aplicación:

<template>
  <div>
    <h1>Mi Evento</h1>
    <p>Capacidad: {{ capacity }}</p>
    <button @click="increaseCapacity()">Incrementar capacidad</button>
  </div>
</template>

<script>
import { ref } from "@vue/composition-api";
export default {
  setup() {
    const capacity = ref(3);

    function increaseCapacity() { 
      capacity.value++;
    }
    
    return { capacity, increaseCapacity };
  }
};
</script>

Lo primero que observamos es el import en la parte superior de la etiqueta script, aquí importamos el plugin composition-api. Luego tenemos el método setup que es donde escribimos el código de nuestro componente como tal. Al utilizar la Composition API nuestro código ya no se organiza mediante opciones (como métodos y propiedades computadas).

ref significa Referencia Reactiva y al llamar a ref(3) simplemente estamos obteniendo un entorno y envolviéndolo en un objeto haciéndolo reactivo.

El valor de una referencia siempre es guardado en la propiedad value, por ese motivo llamamos a capacity.value.

Al usar la Composition API necesitamos retornar los valores que vamos a usar en nuestra plantilla.

Para usar este código en Vue 3 sólo hay un cambio que debemos hacer:

# Cambio en Vue 3
import { ref } from "vue";

Observa como en lugar de llamar al plugin composition-api simplemente llamamos a vue.

Como mencionamos, aún no es recomendable usar la Composition API en producción; pero podemos usar el plugin sin inconvenientes a manera de práctica.

Usando Vue 3

Nada nos detiene de comenzar a usar Vue 3 hoy mismo. A continuación te explico cómo hacer esto:

• Clona el repositorio desde GitHub.
• Instala las dependencias.
• Compila el proyecto.
• Llama a packages/vue/dist/vue.global.js para comenzar a usar Vue 3.

Un ejemplo sencillo usando Vue 3 sería crear un archivo HTML en el mismo directorio con el siguiente código:

<div id="app"></div>

<script src="vue.global.js"></script>
<script>
  const MyComponent = {
    setup() {
      const name = Vue.ref('Styde')
      return { name }
    },
    template: `<h1>{{ name }}</h1>`
  }

  Vue.createApp().mount(MyComponent, '#app')
</script>

Observa como llamamos a vue.global.js en la etiqueta script.

En el ejemplo superior, a pesar de que usamos la Composition API, no llamamos al plugin en ningún sitio ya que esta característica viene incluida de forma nativa con Vue 3.

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Publicado por: David Palacios

Neuroscience nerd. No me gusta el small talk ni el ruido. Me gusta JavaScript y Vue. Tratando de aprender más cada día.

Composition API Vue 3 Vue.js