# @bee-q/vue

> Vue specific wrapper for BEEQ Design System components

Latest version **1.0.0** (published 2024-02-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @bee-q/vue
pnpm add @bee-q/vue
yarn add @bee-q/vue
bun add @bee-q/vue
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-02-20 |
| First published | 2023-11-01 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 163 |
| Maintainers | dgonzalezr |

## Links

- npm: https://www.npmjs.com/package/@bee-q/vue
- Repository: https://github.com/Endava/BEEQ
- Homepage: https://github.com/Endava/BEEQ#readme
- Issues: https://github.com/Endava/BEEQ/issues
- npm.io page: https://npm.io/package/@bee-q/vue

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 1.0.0 (latest) — 2024-02-20
- 0.13.0 — 2024-02-14
- 0.12.0 — 2024-02-02
- 0.11.0 — 2024-01-02
- 0.10.0 — 2023-11-01

## README

# Vue.js Wrapper for BEEQ

A lightweight utility that wraps BEEQ custom elements ("web components") so they can be seamlessly integrated into Vue applications.

## Package installation

- install the package

```
npm install @bee-q/vue
```

- update the package

```
npm install @bee-q/vue@latest
```

if `@bee-q/core` package is installed you should update both

```
npm install @bee-q/{core,vue}
```

### Add BEEQ styles and assets

Make sure that BEEQ main style is imported into your application's main style file:

```css
@import "@bee-q/core/dist/bee-q/bee-q";
```

> ❗️The icons SVG are shipped in a separate folder. Depending on your stack, your project will need to include `node_modules/@bee-q/core/dist/bee-q/svg` in the build in such a way that it respond to: `http://<domain>/svg`

## Usage

```jsx
<script setup lang="ts">
const name = ref('John Doe');
</script>

<template>
  <h1>Hello {{ name }}</h1>
  <bq-input
    name="name"
    placeholder="Please type your name..."
    v-model="name"
    @bqClear="name = ''"
  >
    <label slot="label">Your name</label>
    <bq-icon name="user" slot="prefix"></bq-icon>
  </bq-input>
</template>
```

## Why is this necessary?

BEEQ can generate Vue component wrappers for your web components. This allows BEEQ components to be used within a Vue 3 application. The benefits of using BEEQ's component wrappers over the standard web components include:

- Type checking with your components.
- Integration with the router link and Vue router.
- Optionally, form control web components can be used with `v-model`.

(*Adapted from the [Stencil official documentation](https://stenciljs.com/docs/vue)*)

---
_Source: https://npm.io/package/@bee-q/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._