@bee-q/vue v1.0.0
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:
@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
<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)