Instalación de UIKit

Descripción

Es un conjunto de componentes reutilizables para la interfaz de usuario, diseñados para los productos de RedCollege. Está construido con Composition API de Vue 3 y estilizado con TailwindCSS. Además, integra Pinia para la gestión del estado, permitiendo almacenar información como los datos del usuario autenticado. Este paquete contiene componentes compartidos reutilizables como el Login o el Navbar que se utiliza en cada proyecto.

Instalación y Preparación

Para instalar el paquete, ejecuta el siguiente comando:

npm install @redcollege/ui

Posteriormente instalar Pinia con el siguiente comando:

npm install pinia @pinia/nuxt

En caso el comando anterior te de algún error debes agregar lo siguiente al package.json y volver a ejecutar el comando anterior.

"overrides": {
  "vue": "latest"
}

Y finalmente agregar en nuestro nuxt.config.ts

modules: ['@pinia/nuxt']

Implementación en proyecto nuevo

1. Crear un Plugin: Crea un plugin con la siguiente configuración, se debe importar cada componente que vayas a utilizar y pasarle una instancia de pinia.

   // plugins/redcollege-ui.ts
   
   import RedCollegeUI from '@redcollege/ui'
   import { Navbar, Login } from '@redcollege/ui'
   
   export default defineNuxtPlugin((nuxtApp) => {
       const pinia = useNuxtApp().$pinia;
       const router = useRouter();
   
       const { install, userStore } = RedCollegeUI(pinia);
       install(nuxtApp.vueApp)
   
       userStore.loadInstance(router)
   
       nuxtApp.vueApp.component('Navbar', Navbar)
       nuxtApp.vueApp.component('Login', Login)
   
       return {
           provide: {
               userStore
           }
       }
   });
   

2. Uso de Componentes: Después de configurar el plugin, los componentes se pueden utilizar en las páginas o componentes:

   <template lang="pug">
     Navbar
     Login
   </template>
   
   <script setup lang="ts">
   const { $userStore } = useNuxtApp();
   </script>