Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Web components
#

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

Installation
#

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:

See "Install Vuestic UI"

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

registerVuesticWebComponents()

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';
}
`

registerVuesticWebComponents({
  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'

registerVuesticWebComponents()

Then we can use them in our HTML

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

  <script>
    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)
    });
  </script>

  <script>
    const button = document.getElementById("button");

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

You can also use Global Config with VaConfig element

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

<script>
const config = document.getElementById("config");

config.components = {
 VaButton: {
   color: "danger",
 },
 VaInput: {
   outline: true,
 }
};
</script>

See more detailed example in our Sandbox

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;
}`

registerVuesticWebComponentsEssential({
  css: defaultCSS,

  components: {
    VaConfig, VaCarousel, VaInput,
  }
})