¿Alguien más siente como si ocurriese un déjà vu? Parece que no hace mucho tiempo estábamos lanzando la versión beta de Ionic Vue construida con Vue 2. Dado que el lanzamiento de Vue 3 se acerca rápidamente, pensamos que este sería el momento perfecto para comenzar a preparar una mejor versión de Ionic Vue para su nuevo lanzamiento.

¿Qué es Ionic Framework?

Ionic Framework es una colección de componentes de interfaz de usuario que se utilizan para crear aplicaciones multiplataforma de alta calidad. Estas aplicaciones se pueden implementar de forma nativa en dispositivos iOS y Android o en la web como una aplicación web progresiva (PWA).

Estos componentes están escritos en HTML, CSS y JavaScript, lo que facilita la creación de interfaces de usuario modernas y de alta calidad que funcionan muy bien en todas partes.

¿Hicisteis una versión beta el año pasado?

¡Sí! En el momento en que lanzamos la antigua versión beta de Ionic Vue, estábamos desarrollando simultáneamente Ionic Vue e Ionic React en paralelo. Rápidamente nos dimos cuenta de que las integraciones de framework para Ionic Vue e Ionic React tenían mucho en común. Nos encontramos implementando funciones similares y solucionando loa mismos errores varias veces.

Además, el equipo de Vue estaba empezando a acelerar el desarrollo de Vue 3 y queríamos que Ionic Framework fuera compatible con esa versión.

Después de un tiempo, decidimos pausar la versión de Ionic Vue para enfocarnos en Ionic React. Desde entonces, hemos tomado todo lo que aprendimos con Ionic React y lo hemos incorporado a Ionic Vue, y estamos muy contentos con el resultado.

¿Cómo comenzar con Vue junto a Ionic?

Se ha actualizado Ionic Vue para que sea compatible no solo con Vue 3, sino con el nuevo enrutador Vue. Comenzar con Vue e Ionic es muy sencillo al instalar una versión de desarrollo de la CLI de Ionic:

npm install -g @ionic/[email protected]g
ionic start my-app tabs --type vue --tag vue-beta

El uso de --tag permite descargar la última versión beta de un iniciador Ionic Vue. Una vez instalada la aplicación, puede iniciar un servidor de desarrollo ejecutando: ionic serve.

Solo la versión 0.3.1 y posteriores de la beta de Ionic Vue son compatibles con Vue 3. Para continuar usando la beta de Ionic Vue con Vue 2, se debe usar la versión 0.0.9.

Desde aquí, ahora tenemos acceso a todos los componentes de Ionic Framework:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Hello Vue</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello Vue</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, } from '@ionic/vue';
export default {
  name: 'HomePage',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  },
};
</script>

Para usar los componentes, debe importarlos desde el paquete @ionic/vue y proporcionarlos a su componente Vue.

Construyendo sobre Vue Router

Una de las grandes piezas que faltaban en la versión beta de Ionic Vue era la navegación basada en pilas. Esta nueva versión de Ionic Vue ofrece la misma gestión de pila robusta que se encuentra en otras versiones de Ionic Framework.

Al igual que con las versiones del framework para Angular y React del framework Ionic, se optó por utilizar el router oficial que proporciona el propio proyecto de Vue, vue-router.

Para manejar las animaciones de Ionic Framework, hemos extendido la API del enrutador a través del componente ion-router-outlet. Este componente se utiliza en lugar de los compoentes típicos keep-alive, router-view y transition que se utilizan en las aplicaciones de Vue.

El uso de este enrutador modificado es casi el mismo que el vue-router normal. Excepto con algunas importaciones diferentes, ¡La carga diferida también funciona desde el primer momento!

import { createRouter, createWebHistory } from '@ionic/vue-router';
import Home from '@/views/Home.vue'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: /lazy,
      component: () => import(@/views/Lazy.vue)
    }
  ]
})

En lugar de importar createRouter y createWebHistory desde vue-router debes importarlos desde @ionic/vue-router. Estas importaciones envuelven las funciones vue-router del mismo nombre y proporcionan algunos detalles adicionales que permiten que el Framework Ionic funcione bien dentro del entorno de Vue.

Si bien recomendamos confiar en las herramientas que proporciona Vue Router, hemos agregado soporte para la propiedad router-link en los componentes que lo permiten:

<ion-item router-link="/child-page">
  <ion-label>Click Me to Navigate</ion-label>
</ion-item>

También se puede especificar la dirección usando router-directiony una animación personalizada usando router-animation.

Para que las transiciones y los eventos del ciclo de vida funcionen correctamente, cada página de Ionic debe estar envuelta en un componente ion-page:

<template>
  <ion-page> ... </ion-page>
</template>

<script>
import { IonPage } from '@ionic/vue';
export default { 
  name: 'HomePage', 
  components: { IonPage } 
};
</script>

Se puede acceder a los eventos del ciclo de vida proporcionando el evento apropiado como método:

export default {
  name: 'HomePage',
  components: {
    IonPage
  },
  methods: {
    ionViewDidEnter: () => {
      ...
    },
    ionViewDidLeave: () => {
      ...
    },
    ionViewWillEnter: () => {
      ...
    },
    ionViewWillLeave: () => {
      ...
    }
  }
 }

Haciendo las cosas a la manera de Vue

El @ionic/vue incluye soporte para casi todos los componentes del Framework Ionic. El uso de los componentes te seguirá resultando familiar, pero se utilizará la sintaxis de las plantillas de Vue:

<template>
  <ion-input v-model="inputValueRef" @ionInput="onChange($event)"></ion-input>
  Value: { inputValueRef }
</template>

<script>
setup() {
  const inputValueRef = ref(‘’);
  return { inputValueRef };
}
</script>

Los componentes de superposición, como los que ion-modal se crean dinámicamente al importar el controlador apropiado desde @ionic/vue:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openModal()">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>
<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import ModalExample from '@/components/Modal.vue';
export default {
  name: 'HomePage',
  components: { IonButton, IonContent, IonPage },
  setup() {
    const openModal = async () => {
      const modal = await modalController.create({
        component: ModalExample
      });
      await modal.present();
    }

    return { openModal }
  }
}
</script>

¿Qué vendrá en el futuro de Ionic Vie?

  • La integración de enrutadores.
  • El uso de pestañas.

Conclusión

Si bien @ionic/vue es bastante estable, todavía está en versión beta. Y por eso mismo, aún no es recomendable su uso en entornos de producción.

Si encuentra algún error, desea solicitar una función que falta o desea sugerir una mejora en Ionic Vue, no dudes en crear un nuevo problema en GitHub. ¡Asegurate de indicar en el título del problema que está utilizando la nueva versión beta de Ionic Vue!

Relacionados

▷ Ionic y Angular alimentan las tiendas de aplicaciones y la web

🚀 ¿Qué es Ionic? Un espectacular framework multiplataforma

🚀 Ionic: Conceptos Básicos del Framework

📰 Ionic 4.0: Introducción Ionic para todos

🛒 Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!

Fuente: Anunciado en el blog oficial de Ionic

Anuncian la beta de Ionic que incluye el framework Vue