Configuration

In this section, we will learn how to configure Una UI in your Nuxt project.

Note: This section is currently incomplete. Please revisit later for additional updates.

Overview

Una UI for Nuxt includes essential packages, you can also use them directly in your project without additional configuration.

Package	Description
Unocss	Instant On-demand Atomic CSS Engine
Color Mode	Dark and Light mode with auto detection made easy with Nuxt
Vueuse	Collection of essential Vue Composition API utils
HeadlessUI	Completely unstyled, fully accessible UI components for Vue

Options

In your nuxt.config.js file, You can also add any configuration options to the una section.

Option	Type	Default	Description
`prefix`	`String`	`N`	Una UI component prefix
`themeable`	`Boolean`	`true`	Enable theming
`global`	`Boolean`	`true`	Register components globally

By default, Una UI will register all components globally. If you want to register components manually, set global to false. And you can do something like this import { NButton } from '@una-ui/nuxt' to import components.

nuxt.config.js

export default {
  modules: [
    '@una-ui/nuxt',
  ],

  una: {
    prefix: 'N',
    themeable: true,
    global: true,
  },
}

In your app.config.ts file, you can customize your default theme colors of Una UI.

Components and presets are based on a primary and gray colors, You can change the default value in your app.config.ts file.

You can use any color palette you want. Una UI uses Tailwind CSS Colors under the hood, But you can also define your own custom theme colors, see Extending Section.

Option	Type	Default	Description
`primary`	`String`	`yellow`	Primary color
`gray`	`String`	`stone`	Gray color
`radius`	`Number`	`0.5`	Border radius
`fontSize`	`Number`	`16`	Font size

app.config.ts

export default defineAppConfig({
  una: {
    primary: 'yellow',
    gray: 'stone',
    radius: 0.5,
    fontSize: 16
  }
})

Overriding and Extending

Extend or override presets in unocss.config.ts:

If you want to override the default Una UI presets, You can copy and change the default presets available here; just make sure you have the same name as the default presets.

unocss.config.ts

import { defineConfig } from 'unocss'

import una from '@una-ui/nuxt/una.config'

export default defineConfig({
  shortcuts: [
    {
      // Overrides the default `btn` preset with added `transition`, `delay`, and other styling properties.
       'btn': 'transition delay-1000 ease-in-out bg-transparent text-0.875em leading-5 gap-0.5em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-semibold cursor-pointer',

      //  add more static presets here...
    },

    // Overrides the `btn-solid` variant, removes `shadow-sm` .
    [/^btn-solid(-(\S+))?$/, ([, , c = 'primary']) => `btn-focus-${c} text-inverted bg-${c}-600 hover:bg-${c}-500 dark:bg-${c}-500 dark:hover:bg-${c}-400`] 

    // add more dynamic presets here...
  ],

  ...una()
})

Edit this page on GitHub

Getting StartedInstallation

Components🟢 Accordion