Web components

Vuestic UI provides web-components build, so you can pick some component and use them without Vue application


Web components build shiped within vuestic-ui package and can be imported with suffix `vuestic-ui

Before you can use web-components they must be registered with window.customElement. We provide a nice helper, so you can register specific components:

import { registerVuesticWebComponents } from 'vuestic-ui/web-components'
import 'vuestic-ui/css'



Since Custom Elements have their own scoped CSS in Shadow DOM, there might be a case when you want to provide some CSS to components. You can do this with css property in registerVuesticWebComponents. For example, if you want to use Font Awesome in Vuestic components you need provide this CSS:

const fas = `
.fas {
  font-family: 'Font Awesome';

  css: fas

Usage example

We use Vuestic web component with vanilla Vite project here

First, we need to register Custom Elements

import { registerVuesticWebComponents } from 'vuestic-ui/web-components'
import 'vuestic-ui/css'


Then we can use them in our HTML

  <div id="app">
    <va-select id="select" stateful model-value="Option 1"></va-select>
    <va-button id="button">Send!</va-button>

    const select = document.getElementById("select");

    select.options = ["Option 1", "Option 2", "Option 3"];

    select.addEventListener("update:modelValue", (e) => {
      e.target.modelValue = e.detail;
      console.log('Option selected!', e.target.modelValue)

    const button = document.getElementById("button");

    button.addEventListener("click", () => {
      console.log("Make something! User clicked the button");

You can also use Global Config with VaConfig element

<va-config id="config">
  <!-- App code here -->

const config = document.getElementById("config");

config.components = {
 VaButton: {
   color: "danger",
 VaInput: {
   outline: true,

Tree shaking

You can import and register only specific components that you need and your bundler will tree-shake other components. It also removes our default CSS in case you don't want ot use Material Icons.

import { registerVuesticWebComponentsEssential, VaConfig, VaCarousel, VaInput } from 'vuestic-ui/web-components'
import 'vuestic-ui/css'

const defaultCSS = `
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;

  css: defaultCSS,

  components: {
    VaConfig, VaCarousel, VaInput,