# @vonage/vivid-bindings-vue
> Typescript bindings for [Vivid 3](http://vivid.deno.dev) web components to be used with [VueJS 3](https://vuejs.org)
Latest version **3.49.0** (published 2024-02-08) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @vonage/vivid-bindings-vue
pnpm add @vonage/vivid-bindings-vue
yarn add @vonage/vivid-bindings-vue
bun add @vonage/vivid-bindings-vue
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.49.0 |
| Published | 2024-02-08 |
| First published | 2023-03-09 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | keichenblat, daniel-sapir, ekatz, llihovodov, tabdullah, jmoramunoz2, sailusha, hilakl, leppelin, molszewski_v, twilliams253, abolles, lallen2, yonatan.kra, jtiet, kpaxian, vonage-frontier, jurgo, vonage_client_media_processing, rmalis, or.cpc, jeffswartz, rhainer, deliajolt, behaze, raulkg, liranbin, javiermolsanz, agus-vonage, v-kpheng, vgai-dev, nitzanhardon, eportolanvonage, web-il, iceberg-team, yinon, unified_portal, vreporter-npm, vbcbe, voxip_team, gunifydevops, yuri.guller, idanvon, nexmo-devrel, vvd, vonagemeetings, vonage-jenkins, maikthomas, germangol, ashwinvprabhu, arivonage |
## Links
- npm: https://www.npmjs.com/package/@vonage/vivid-bindings-vue
- Repository: https://github.com/Vonage/vivid-bindings-vue
- Homepage: https://github.com/Vonage/vivid-bindings-vue#readme
- Issues: https://github.com/Vonage/vivid-bindings-vue/issues
- npm.io page: https://npm.io/package/@vonage/vivid-bindings-vue
## Dependencies (1)
- [@vonage/vivid](https://npm.io/package/@vonage/vivid.md) 3.49.0
## Recent versions
- 3.49.0 (latest) — 2024-02-08
- 3.48.0 — 2024-02-01
- 3.47.0 — 2024-01-25
- 3.46.0 — 2024-01-16
- 3.45.0 — 2024-01-11
- 3.44.0 — 2023-12-22
- 3.43.0 — 2023-12-12
- 3.42.1 — 2023-12-06
- 3.42.0 — 2023-12-01
- 3.41.1 — 2023-11-23
- 3.41.0 — 2023-11-22
- 3.40.7 — 2023-11-22
- 3.40.6 — 2023-11-22
- 3.40.5 — 2023-11-22
- 3.40.4 — 2023-11-22
- … 55 more at https://npm.io/package/@vonage/vivid-bindings-vue/versions
## README
# vivid-bindings-vue
Typescript bindings for [Vivid 3](http://vivid.deno.dev) web components to be used with [VueJS 3](https://vuejs.org)
What's in the box(i.e. batteries included):
* Few lines of code convergent initialization routine for [Vivid](https://github.com/Vonage/vivid-3) design system
* **100%** Vivid components covered with bindings
* **~100%** automated process for NPM package generation & release. `@vonage/vivid` package is the release driver/trigger
* Enhanced DevEx (VS Code intellisense) + Fully sound Typescript type checking for Vivid web components props/events/slots/cssProps/cssParts/etc. contracts
* Abstraction layer for easier migration to future **major** versions of Vivid
## How to integrate with VueJs App
Vivid can be initialized as easy as few lines of code
`main.ts`
```ts
import { createApp } from 'vue'
import App from './App.vue'
import { vivid3 } from '@vonage/vivid-bindings-vue'
const app = createApp(App)
app.use(vivid3, {
font: 'oss',
theme: 'dark'
})
app.mount('#app')
```
`vite.config.ts`
```ts
import { isCustomElement } from '@vonage/vivid-bindings-vue'
...
plugins: [
vue(
{
template: {
compilerOptions: {
isCustomElement
},
},
}
)
]
...
```
## How to import components
Each Vivid component should be imported using single import statement.
The Vivid major version is a part of the import `v3`. This enables seamless side by side usage of different major versions in a single project for `pay as you go` future migration path
```vue
```
## Releases
This package has a `pipeline` workflow which is checking for a new Vivid version on a **dayly** basis and if it detects that new version is out The new bindings are generated and published automatically, **reflecting** the same package version `@vonage/vivid` has. So the release driver is `@vonage/vivid` package itself.
## Repository structure
The entire repository is a pure Typescript code, divided onto two main parts
- `./src` - is the [Deno](https://deno.land) territory, contains the generator code, which is effectively generates the NPM package contents on top of the existing template
- `./package` - is the [NPM](https://www.npmjs.com/package/@vonage/vivid-bindings-vue) package template
## Rationale
* Vivid web components since version 3.0 are shipped with the custom elements meta data alongside the code itself.
Which allows to employ code generation practice to build near **100% automated** typescript type safe bindings for VueJs components
* Maintenance cost should be linear, it's always **one** component to be rendered, no matter how **many** elements there are actually in Vivid design system
* Adds an abstraction layer to mitigate the custom web components namespacing conflicts issue, to enable usage of several major versions of Vivid components in the single application more info [here](https://vivid.deno.dev/#advanced-usage), and how Salesforce Lightning web components are solving that issue [here](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_namespace)
## Official bindings for Vue 2.x/3.x
https://github.com/Vonage/vivid-vue
---
_Source: https://npm.io/package/@vonage/vivid-bindings-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._