Libreria web components cruces

Libreria de web components creados en vue

Que utiliza el proyecto

1. Version de node: lts/hydrogen (v18.20.4)
2. Gestor de paquetes pnpm
3. Vite + Vue 3 + TS

Como usar

1. Installar el paquete pnpm add @sanvalenjs/cruce-cotizadores
2. En el archivo main agregar:

import { createApp } from 'vue';

// Esto
import { registerAll } from '@sanvalenjs/cruce-cotizadores';
////
import './style.css';
import App from './App.vue';

// Esto
registerAll();
////

createApp(App).mount('#app');

Si no funciona, puede ser necesario agregar configuracion de en vite.config o vue.config

3. Ya se pueden usar los componentes desde cualquier lugar con los nombres registrados en la libreria

Ejecutar en local

1. Installar dependencias pnpm i

2. Ejecutar entorno local pnpm dev

Para desarrollar los componentes y probarlos sin necesidad de hacer build:

1. Crear el componente con la extension .ce.vue, esto para que vue reconozca que es un web component

2. En el archivo lib/main.ts segun el componente creado, importar el componente y agregar:

import { defineCustomElement } from 'vue'
...
import Component from '@/components/Component.ce.vue'
...

...
const CustomComponent = defineCustomElement(Component)
...

...
export { CustomComponent }
...


export function registerAll() {
  ...
  customElements.define('<name>-component', CustomComponent)
  ...
}

3. Con lo anterior, ya se puede llamar al componente con el nombre registrado en customElements.define('<name>-component', CustomComponent) en cualquier template de vue o html

Ej: Si customElements.define('card-component', CustomComponent) entonces se puede llamar como <card-component></card-component>

4. Ejecutar pnpm dev para ver el componente en desarrollo

Generar build

pnpm build