open-index/open-npm huggingface dataset:
npm package: @sanvalenjs/cruce-cotizadores
Description: Libreria de web components creados en vue
Latest version: 2.3.2

# 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:

```ts
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:

```ts
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`