Integración de Componentes de Terceros en Proyectos Vue.js

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:01

Integración de Componentes de Terceros en Proyectos Vue.js

Curso Básico de Vue.js 2

Clase 34 de 38

Clase 34 / 38

Recursos

¿Cómo integrar componentes de terceros en tu proyecto Vue?

Integrar componentes de terceros en tus proyectos puede ahorrarte tiempo y esfuerzo. Muchas de las funcionalidades necesarias ya tienen soluciones previas creadas por otros desarrolladores. Aprender a hacerlo correctamente no solo potenciará tus proyectos, sino que también te abrirá las puertas a un vasto mundo de herramientas y recursos reutilizables.

¿Qué componentes necesitamos integrar?

En un proyecto Vue, es esencial elegir las herramientas correctas. Los dos componentes a integrar en este ejemplo son:

Vuel Espinners: Un componente que proporciona una indicación visual de carga cuando una página está en proceso.
Vue Chartkick: Un componente para gráficos, te permite ver visualizaciones de datos como la fluctuación del precio de Bitcoin, utilizando librerías como Chart.js.

¿Cómo instalar y registrar los componentes?

Para instalar estos componentes, utilizamos npm. El comando necesario es:

npm install --save @saeris/vue-spinners vue-chartkick

Una vez que los componentes se han instalado, se deben registrar en tu aplicación Vue. Esto se realiza modificando el archivo main.js:

import Vue from 'vue'
import VueSpinners from '@saeris/vue-spinners'
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(VueSpinners)
Vue.use(VueChartkick, { adapter: Chart })

¿Cómo implementar Vuel Spinners en el proyecto?

El componente Vuel Espinners se utiliza para indicar que el sitio está cargando. Para mostrar un spinner solo cuando el sitio está cargando, podemos hacer uso de la propiedad isLoading definida en el data:

data() {
  return {
    isLoading: false,
  }
},

El componente spinner se activa variando la propiedad isLoading durante la carga:

<BounceLoader :loading="isLoading" :color="greenColor" :size="50" />

Se actualiza el valor de isLoading en el lifecycle de Vue:

created() {
  this.isLoading = true
  fetchData().finally(() => {
    this.isLoading = false
  })
}

¿Cómo solucionar problemas con Chartkick y promesas?

Si te encuentras con errores al utilizar estas librerías, verifica que todas las dependencias están instaladas correctamente. En especial, Chart.js debe estar instalado para que Vue Chartkick funcione:

npm install --save chart.js

Si tienes problemas con las promesas, asegúrate el uso correcto de .finally() para gestionar estados de carga eficientemente:

fetchData().finally(() => {
  this.isLoading = false
})

¿Qué componentes gráficos utilizar en Vue Chartkick?

Para utilizar gráficos como LineChart, usa plantillas dentro de Vue. Define las propiedades como colors, min, max, y data para personalizados gráficos:

<LineChart :data="chartData" :min="min" :max="max" :colors="['#FF0000']" />

El data se prepara mapeando los valores que obtienes a través de la API:

computed: {
  chartData() {
    return this.history.map(item => [item.date, item.price.toFixed(2)])
  }
}

¿Por qué aprender a integrar componentes de terceros?

Aprender a integrar componentes de terceros es crucial ya que te permite:

Ahorrar tiempo al evitar recrear herramientas ya existentes.
Beneficiarte de soluciones optimizadas y probadas por otros desarrolladores.
Ampliar la funcionalidad de tu proyecto con recursos avanzados y documentados.

Recuerda siempre consultar la documentación de los componentes o librerías que utilices y estar preparado para adaptarlos a tus necesidades específicas. ¡Sigue experimentando e integrando estas poderosas herramientas en tus proyectos!