> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Vue.js > Use BEEQ in Vue through the Vue wrapper for cleaner component imports, event bindings, and `v-model` support. BEEQ works best in Vue through `@beeq/vue`, the official Vue wrapper around BEEQ web components. Vue already handles custom elements well, and the BEEQ wrapper makes the developer experience even smoother by adding typed component imports and `v-model` support for compatible form controls. Import BEEQ components as PascalCase Vue components instead of relying only on raw custom elements. Tell Vue to treat all `bq-` tags as custom elements so your templates stay clean and warning-free. Use compatible BEEQ form controls with `v-model` for a more natural Vue authoring experience. Vue has strong built-in support for custom elements — you can use raw `bq-*` elements in templates without any wrapper. `@beeq/vue` adds PascalCase component imports, TypeScript types, and native `v-model` support for compatible form controls. ## Get started You can add BEEQ to an existing Vue project in a few steps: Make sure your project already has: * Vue `3` * Node.js `18+` * a Vue application created with Vite or another modern build setup If you are starting a new Vue project, Vite is usually the simplest setup path. Install both the core package and the Vue wrapper: ```bash theme={"theme":{"light":"one-light","dark":"night-owl"}} npm install @beeq/core @beeq/vue ``` What each package gives you: * `@beeq/core` includes the web components, styles, icons, and shared types * `@beeq/vue` provides Vue-friendly component wrappers Vue should compile `bq-` tags as custom elements instead of trying to resolve them as local Vue components. Configure `@vitejs/plugin-vue`: ```ts vite.config.ts theme={"theme":{"light":"one-light","dark":"night-owl"}} import vue from "@vitejs/plugin-vue"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.includes("bq-"), }, }, }), ], }); ``` If you are using Vue without a build step, configure the compiler directly: ```ts theme={"theme":{"light":"one-light","dark":"night-owl"}} app.config.compilerOptions.isCustomElement = (tag) => tag.includes("bq-"); ``` Import the BEEQ stylesheet once in your application's main stylesheet: ```css src/style.css theme={"theme":{"light":"one-light","dark":"night-owl"}} @import "@beeq/core/dist/beeq/beeq.css"; ``` Many BEEQ components rely on SVG icons. Your application needs to serve the SVG files and tell BEEQ where to find them. Be aware that **there are over 9k SVG files**, which can slow down your development or bundling time if you copy all of them. The fastest way to tell BEEQ where to find the icons is to add a ` Vite + BEEQ
``` The URL must point to the directory that contains BEEQ SVG files (file names such as `user.svg`, `envelope.svg`). You can use a CDN URL, a path your app serves locally, or even a different icon library — just make sure the icon `name` values you use in templates match the file names at that path. If you are using Vite, install the static copy plugin: ```bash theme={"theme":{"light":"one-light","dark":"night-owl"}} npm install -D vite-plugin-static-copy ``` Then copy the SVG files and set the base path during app startup: ```ts vite.config.ts highlight={2,14-21} expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import vue from "@vitejs/plugin-vue"; import { viteStaticCopy } from "vite-plugin-static-copy"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.includes("bq-"), }, }, }), viteStaticCopy({ targets: [ { src: "./node_modules/@beeq/core/dist/beeq/svg/*", dest: "icons/svg", }, ], }), ], }); ``` ```ts src/main.ts highlight={2,6} expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { createApp } from "vue"; import { setBasePath } from "@beeq/core"; import App from "./App.vue"; import "./style.css"; setBasePath("/icons/svg"); createApp(App).mount("#app"); ``` You can create a Vite plugin that copies only the icons you need to speed up development and reduce your bundle size. See the React setup [here](/guides/frameworks/react#copy-only-the-icons-you-need) for inspiration. Once styles and icons are configured, import and use BEEQ components in your Vue app: ```vue theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Vue usage patterns with BEEQ ### Import components from `@beeq/vue` Use the Vue wrapper when you want a more natural Vue authoring experience: ```vue theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Use Vue event bindings with `@bq...` BEEQ custom events work with standard Vue event binding syntax: ```vue theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Use `v-model` on supported form controls The Vue wrapper supports `v-model` on compatible BEEQ controls. For input components, also handle the `@bqClear` event to keep your reactive ref in sync when the user clicks the clear button: ```vue theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Without `@bqClear`, clicking the clear button resets the component's internal value but does not update your reactive ref. Always pair `v-model` with `@bqClear` on clearable inputs. The following BEEQ components support `v-model`: | Component | Bound prop | | ------------------------------------------------------------------------------- | ---------- | | `BqCheckbox`, `BqSwitch` | `checked` | | `BqDatePicker`, `BqInput`, `BqRadioGroup`, `BqSelect`, `BqSlider`, `BqTextarea` | `value` | All of them fire `bqChange` as the trigger event. ### Slots still use the `slot` attribute Slotted content works the same way as in the web component API: ```vue theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Complete example This example combines component imports, `v-model`, icons, and event bindings in a Vue app. ```vue theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Server-side rendering (Nuxt and SSR frameworks) If you are using Nuxt or another Vue SSR framework, wrap `setBasePath()` in a client-only plugin to ensure it only runs in the browser: ```ts plugins/beeq.client.ts theme={"theme":{"light":"one-light","dark":"night-owl"}} import { setBasePath } from "@beeq/core"; export default defineNuxtPlugin(() => { setBasePath("/icons/svg"); }); ``` The `.client.ts` suffix tells Nuxt to load this plugin only on the client side. If you are using a different SSR framework, wrap the call inside `onMounted()` instead. ## VS Code autocomplete BEEQ ships HTML custom data for Visual Studio Code, which improves completion and inline hints for the underlying custom elements. Create `.vscode/settings.json` in your project root and add: ```json theme={"theme":{"light":"one-light","dark":"night-owl"}} { "html.customData": ["./node_modules/@beeq/core/dist/beeq.html-custom-data.json"] } ``` ## Troubleshooting Make sure your Vue compiler config includes `isCustomElement: (tag) => tag.includes("bq-")`. Check both of these: * the SVG files are being served by your app * `setBasePath()` points to the same public URL where those files are available Confirm that you are using the Vue wrapper from `@beeq/vue` and that the component supports `v-model` (see the table in the `v-model` usage pattern section above). Also make sure you have added `@bqClear` to handle the clear button. Make sure `@beeq/core/dist/beeq/beeq.css` is imported once in the stylesheet your Vue app actually loads. Yes. Once you have `isCustomElement: (tag) => tag.includes("bq-")` set in your Vite or compiler config, you can use `` directly in templates. The Vue wrapper gives you cleaner PascalCase imports and native `v-model` support, but raw custom elements work too. ## Next steps Start with a component page to see props, events, slots, and framework examples. Review theming options if your product needs brand customization. Explore component states and interactions in the live component library.