Installation^PRO

Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.

Setup

Add to a Nuxt project

pnpm add @nuxt/ui-pro

yarn add @nuxt/ui-pro

npm install @nuxt/ui-pro

bun add @nuxt/ui-pro

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

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})

"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
},
"tailwindCSS.classAttributes": ["class", "ui"],
"tailwindCSS.experimental.classRegex": [
  ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Upgrade from Nuxt UI

{
  "dependencies": {
-   "@nuxt/ui": "^3.0.0",
+   "@nuxt/ui-pro": "^3.0.0",
  }
}

export default defineNuxtConfig({
- modules: ['@nuxt/ui'],
+ modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})

@import "tailwindcss" theme(static);
- @import "@nuxt/ui";
+ @import "@nuxt/ui-pro";

Use an official template

You can get started with our minimal starter or one of our official templates:

You can use the Use this template button on GitHub to create a new repository or use the CLI:

npx nuxi init -t github:nuxt-ui-pro/starter my-starter

npx nuxi init -t github:nuxt-ui-pro/landing my-landing

npx nuxi init -t github:nuxt-ui-pro/docs my-docs

npx nuxi init -t github:nuxt-ui-pro/saas my-saas

npx nuxi init -t github:nuxt-ui-pro/dashboard my-dashboard

Options

You can customize Nuxt UI Pro by providing options in your nuxt.config.ts.

license

Use the license option to override the default behavior of reading the license key from the NUXT_UI_PRO_LICENSE environment variable.

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  uiPro: {
    license: process.env.MY_ENVIRONMENT_VARIABLE
  }
})

mdc

Use the mdc option to force the import of MDC components even if @nuxtjs/mdc or @nuxt/content is not installed.

• Default: false

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  uiPro: {
    mdc: true
  }
})

content

Use the content option to force the import of content components even if @nuxt/content is not installed.

• Default: false

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  uiPro: {
    content: true
  }
})

prefix

Use the prefix option to change the prefix of the components.

• Default: U

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    prefix: 'Nuxt'
  }
})

fonts

Use the fonts option to enable or disable the @nuxt/fonts module.

• Default: true

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    fonts: false
  }
})

colorMode

Use the colorMode option to enable or disable the @nuxt/color-mode module.

• Default: true

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

theme.colors

Use the theme.colors option to define the dynamic color aliases used to generate components theme.

• Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})

theme.transitions

Use the theme.transitions option to enable or disable transitions on components.

• Default: true

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})

Continuous Releases

Nuxt UI Pro uses pkg.pr.new for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Automatic preview releases are created for all commits and PRs to the v3 branch. Use them by replacing your package version with the specific commit hash or PR number.

{
  "dependencies": {
-   "@nuxt/ui-pro": "^3.0.0",
+   "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@fb69f59",
  }
}