@nuxthq/ui

Components library as a Nuxt3 module using UnoCSS.

Usage no npm install needed!

<script type="module">
  import nuxthqUi from 'https://cdn.skypack.dev/@nuxthq/ui';
</script>

README

@nuxthq/ui

Components library as a Nuxt3 module using UnoCSS.

Installation

yarn add --dev @nuxthq/ui

Then, register the module in your nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: [
    '@nuxthq/ui'
  ]
})

If you want latest updates, please use @nuxthq/ui-edge in your package.json:

{
  "devDependencies": {
    "@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
  }
}

Options

  • primary

Define the primary variant. Defaults to indigo. You can specify your own object of colors like here:

Example:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: [
    '@nuxthq/ui'
  ],
  ui: {
    primary: 'blue'
  }
})
  • prefix

Define the prefix of the imported components. Defaults to u.

Example:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: [
    '@nuxthq/ui'
  ],
  ui: {
    prefix: 'tw'
  }
})