Integrations

Vue Integration

The Vue adapter provides fully typed Vue 3 components powered by your design system tokens. Works with Nuxt, Vite, and any Vue 3 setup.

Installation

Terminalbash

npm install @org/design-system

Register the plugin

main.tsts

import { createApp } from 'vue';
import '@org/design-system/css';
import { DesignSystemPlugin } from '@org/design-system/vue';
import App from './App.vue';

createApp(App).use(DesignSystemPlugin).mount('#app');

Use components in templates

Once the plugin is registered, components are available globally as Ds* Vue components (e.g. DsButton), or you can import them individually for local registration:

MyComponent.vuevue

<template>
  <ds-badge variant="success">Live</ds-badge>
  <ds-button variant="primary" @click="deploy">Deploy now</ds-button>
</template>

<script setup lang="ts">
import { DsBadge, DsButton } from '@org/design-system/vue';

function deploy() {
  // handle deployment
}
</script>

Nuxt setup

For Nuxt, create a plugin file to register the design system:

plugins/design-system.tsts

import { DesignSystemPlugin } from '@org/design-system/vue';
import '@org/design-system/css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(DesignSystemPlugin);
});

Switching modes

Mode switching works the same way as in React: set the data-theme attribute on any ancestor element to activate that mode for everything inside it. In Vue, use a reactive ref and a watcher to keep the attribute in sync:

ThemeToggle.vuevue

<template>
  <button @click="toggleTheme">{{ dark ? 'Light mode' : 'Dark mode' }}</button>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const dark = ref(false);

watch(dark, (isDark) => {
  document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
}, { immediate: true });

function toggleTheme() {
  dark.value = !dark.value;
}
</script>

Staying up to date

Every merge to main in Studio publishes a new versioned npm package automatically. To pull in the latest version:

Terminalbash

npm update @org/design-system

Use a caret range in your package.json so patch and minor updates apply automatically on the next install:

package.json (excerpt)json

{
  "dependencies": {
    "@org/design-system": "^1.0.0"
  }
}

Next steps

Need Angular? The Angular adapter uses the same component API.

Angular Integration →