Vue & Nuxt

Install and configure NNUI-KIT with Vue 3 (Composition API) or Nuxt 3.

Create project

Create a new Vue 3 project using create-vue:

Terminalbash

npm create vue@latest my-app
cd my-app

Install NNUI-KIT

Install the package from npm:

Terminalbash

npm install nnuikit

Configure Vite Compiler Options

Instruct Vue to recognize <ui-*> custom elements so it doesn't emit component resolution warnings:

vite.config.tsts

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Treat all tags starting with 'ui-' as platform custom elements
          isCustomElement: (tag) => tag.startsWith('ui-'),
        },
      },
    }),
  ],
})

Configure Main Entrypoint

Import the design tokens and the lightweight client engine in src/main.ts:

src/main.tsts

import { createApp } from 'vue'
import App from './App.vue'

// 1. Import NNUI design tokens (CSS variables & cascade layers)
import 'nnuikit/tokens/theme.css'

// 2. Import Light-DOM client runtime for Tier 2 custom elements
import 'nnuikit/client'

// 3. Global CSS reset
import './style.css'

createApp(App).mount('#app')

Add components in Vue templates

Use semantic Light-DOM elements with Vue Composition API:

src/App.vuevue

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

const email = ref('')
const count = ref(0)
</script>

<template>
  <main style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;">
    <div data-ui="card" style="width: 100%; max-width: 440px; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem;">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <h1 style="margin: 0; font-size: 1.35rem; font-weight: 700;">Vue + NNUI-KIT</h1>
        <span data-ui="badge" data-variant="primary">Vue 3</span>
      </div>

      <p style="margin: 0; color: var(--ui-text-secondary, #a1a1aa); font-size: 0.875rem;">
        100% Light-DOM custom elements with native Vue v-model reactivity.
      </p>

      <input data-ui="input" v-model="email" placeholder="Enter your email..." type="email" />

      <button data-ui="button" data-variant="primary" @click="count++">
        Clicked {{ count }} times
      </button>
    </div>
  </main>
</template>

Run development server

Start the Vue development server:

Terminalbash

npm run dev

← All Frameworks Explore All Components →