Get Started

Create and use Design Tokens from your Nuxt app in a few simple steps.

🚀. Add @nuxtjs/design-tokens to your project.

NPM

npm install @nuxtjs/design-tokens --save-dev

nuxt.config.ts

export default defineNuxtConfig({  modules: [    '@nuxtjs/design-tokens'  ]})

As @nuxtjs/design-tokens provides integrations with other Nuxt modules, you might want to add it as the first module of the list.

👩‍🎨. Define your design tokens.

tokens.config.ts

import { defineTokens } from '@nuxtjs/design-tokens'export default defineTokens({  colors: {    primary: {      value: 'green'    },    secondary: {      value: 'yellow'    },  }})

🎨. Use your tokens!

layout/default.vue

<template><!-- Template usage --><main> <header :style="{ backgroundColor: $tokens('colors.primary') }">   <h1 class="headerTitle">My Theme Header</h1> </header></main></template><style lang="postcss" scoped>/* <style> template usage */.headerTitle {  background-color: v-bind($tokens('colors.secondary'))}</style>

Guide

Introduction

Guide

API