@beeq/vue

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 @beeq/vue

• update the package

npm install @beeq/vue@latest

if @beeq/core package is installed you should update both

npm install @beeq/{core,vue}

Add BEEQ styles and assets

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

@import "@beeq/core/dist/beeq/beeq";

❗️The icons SVG are shipped in a separate folder. Depending on your stack, your project will need to include node_modules/@beeq/core/dist/beeq/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)