@beeq/vue v1.7.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 @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)
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago