Skip to main content
Light SST Light Dark SST Dark System


Vue plays nice with custom elements, so you can use Shoelace in your Vue apps with ease.


To add Shoelace to your Vue app, install the package from npm.

npm install @shoelace-style/shoelace

Next, include a theme and set the base path for icons and other assets. In this example, we’ll import the light theme and use the CDN as a base path.

import '@shoelace-style/shoelace/dist/themes/light.css';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';



You’ll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with sl-.

import { fileURLToPath, URL } from 'url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('sl-')
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))

Now you can start using Shoelace components in your app!


QR code generator example

  <div class="container">
    <h1>QR code generator</h1>

    <sl-input maxlength="255" clearable label="Value" v-model="qrCode"></sl-input>

    <sl-qr-code :value="qrCode"></sl-qr-code>

<script setup>
  import { ref } from 'vue';
  import '@shoelace-style/shoelace/dist/components/qr-code/qr-code.js';
  import '@shoelace-style/shoelace/dist/components/input/input.js';

  const qrCode = ref();

  .container {
    max-width: 400px;
    margin: 0 auto;

  sl-input {
    margin: var(--sl-spacing-large) 0;

Binding Complex Data

When binding complex data such as objects and arrays, use the .prop modifier to make Vue bind them as a property instead of an attribute.

<sl-color-picker :swatches.prop="mySwatches" />


To use Shoelace components with slots, follow the Vue documentation on using slots with custom elements.

Here is an example:

<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" :open="drawerIsOpen">
  This drawer slides in from the start.
  <div slot="footer">
    <sl-button variant="primary" @click=" drawerIsOpen = false">Close</sl-button>