Design tokens for Vue

Composition API, Nuxt, and scoped styles

Vue projects use scoped styles, CSS custom properties, and composables for theming. A designtoken.md gives your coding agent the full design system — color scales, typography, spacing — so it generates consistent Vue components whether you're using Options API, Composition API, or Nuxt.

Integration

How Vue consumes tokens

Three proven patterns for token consumption in Vue projects.

Pattern 1

Scoped Styles + CSS Variables

Vue's scoped styles work perfectly with CSS custom properties sourced from designtoken.md. Your agent generates var(--color-primary-500) in your <style scoped> blocks. Full color scales mean consistent theming.

Pattern 2

Composables

For dynamic theming, your agent generates useTheme() composables that reference your token hierarchy. The Composition API makes token access reactive and type-safe.

Pattern 3

Nuxt

Same approach, works with Nuxt 3's auto-imports and modules. designtoken.md sits in your project root, agent reads it for any page or component. Works with Nuxt UI and UnoCSS too.

Example

What your agent generates

Here's a Vue SFC that uses tokens correctly for a button component.

          Button.vue (Single File Component)
          Vue 3 + Composition API
        
<template>
  <button :class="classes">
    <slot />
  </button>
</template>

<script setup>
const classes = [
  'btn-primary',
  'text-body-sm font-medium',
  'px-md py-sm rounded-lg',
  'hover:bg-primary-600'
]
</script>

<style scoped>
.btn-primary {
  background: var(--color-primary-500);
  color: var(--color-white);
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: var(--color-primary-600);
}
</style>

Compatibility

Works with your Vue stack

designtoken.md plays well with the tools and frameworks you're already using.

Nuxt 3

Auto-imports, file-based routing, same token file. Your agent reads designtoken.md and generates Nuxt 3 composables, auto-import compatible components, and uses Nuxt layers for theme configuration.

Vuetify

Token values map to Vuetify's theme configuration. Your agent can generate theme objects that pull colors, typography, and spacing from designtoken.md, ensuring Vuetify components stay in sync with your design system.

PrimeVue

CSS variable theming compatible with designtoken.md output. Your agent generates PrimeVue theme customization that references your token scales, so all component variants inherit your design system.

UnoCSS

Utility-first like Tailwind. designtoken.md outputs compatible config. Your agent generates UnoCSS utilities that map directly to your tokens, enabling utility-driven component development.

FAQ

Common questions

Do I need a Vue plugin for designtoken.md?

No. designtoken.md is a project context file your coding agent reads. No plugin, no package, no build config. Drop it in your project root and your agent will find it and use it to generate consistent Vue components.

Does it work with Vue 2?

Yes. The token file is framework-agnostic. Whether you use Vue 2 Options API or Vue 3 Composition API, the agent reads the same designtoken.md and generates appropriate code for your Vue version.

Can I use designtoken.md with Pinia for theme state?

Yes. Your agent can generate a Pinia store that references token values for dynamic theming, with the full scale and hierarchy from your designtoken.md. This makes theme switching and dynamic color modes straightforward.