@nuxt/devtools-ui-kit

@nuxt/devtools-ui-kit

Warning: This library is heavily working in progress. Breaking changes may not follow semver. Pin the version if used.

UI kit for module authors to build embedded views for Nuxt Devtools.

• Demo

Install

npm i @nuxt/devtools-ui-kit

export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools-ui-kit'
  ]
})

Usage

@nuxt/devtools-ui-kit is an unbundled component library powered by UnoCSS and VueUse.

In this library, we introduced the n attribute for every component to customize the styles and variations. For example, to make a red button:

<NButton n="red" />

to make it larger, add the size specifier (sm, md, lg or xl) the n attribute:

<NButton n="red xl" />

You can apply the same specifiers to any other component, for example:

<NCheckbox n="red xl" />

Apply it to parent components could make a local theme scope

<NCard n="green-500">
  <!-- both of them are themed green -->
  <NCheckbox>i accept the terms & conditions</NCheckbox>
  <NButton>Submit</NButton>
</NCard>

Theming

Powered by UnoCSS, you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.

It's also possible to override the default theme globally, for example:

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools-ui-kit'
  ],
  unocss: {
    shortcuts: {
      'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',
      'n-button-hover': 'op100 !border-context text-context',
      'n-button-active': 'n-active-base bg-context/5',
    }
  }
})

You can find all the default values and available entries in src/unocss/index.ts.

Changelog

0.2.2 (2023-02-24)

Bug Fixes

• external vite (fc78ef6)