Nuxt Config

Customizing Una UI with Nuxt configuration.

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
Radix Vue	A Port of Radix UI primitives for Vue

Options

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

Option	Default	Type	Description
`prefix`	`N`	`string`	Una UI component prefix
`themeable`	`true`	`boolean`	Enable theming
`global`	`true`	`boolean`	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	Default	Type	Description
`primary`	`yellow`	`string`	Primary color
`gray`	`stone`	`string`	Gray color
`radius`	`0.5`	`number`	Border radius
`fontSize`	`16`	`number`	Font size

app.config.ts

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

Edit this page on GitHub

Una Config

Customizing Una UI with `uno.config.ts`.

Themes

Customize the theme of your application.

On This Page

Options

Star on GitHub Create Issues Release Notes Become a Sponsor Edit this page on GitHub