InstallationPRO

Playground
Learn how to install and configure Nuxt UI Pro in your Nuxt application.

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.

While Nuxt UI is free and open source, Nuxt UI Pro is a premium product that helps sustain Nuxt OSS development, check out the License section to learn more.

Setup

Add to a Nuxt project

Install the Nuxt UI Pro v3 alpha package

pnpm add @nuxt/ui-pro@next
If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss in your project's root directory.

Add the Nuxt UI Pro module in your nuxt.config.ts

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
The @nuxt/ui-pro module automatically includes the @nuxt/ui module, so you don't need to install it separately.

Import Tailwind CSS and Nuxt UI Pro in your CSS

assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui-pro";
The @nuxt/ui-pro CSS file includes the @nuxt/ui CSS file, so you don't need to import it separately.
Use the css property in your nuxt.config.ts to import your CSS file.
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})
It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:
settings.json
"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
}

Wrap your app with App component

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
The App component provides global configurations and is required for Toast and Tooltip components to work.

Upgrade from Nuxt UI

Replace @nuxt/ui package with @nuxt/ui-pro

package.json
{
  "dependencies": {
-   "@nuxt/ui": "3.0.0-alpha.13",
+   "@nuxt/ui-pro": "3.0.0-alpha.13",
  }
}

Replace @nuxt/ui module with @nuxt/ui-pro

nuxt.config.ts
export default defineNuxtConfig({
-  modules: ['@nuxt/ui'],
+  modules: ['@nuxt/ui-pro']
})

Replace @nuxt/ui CSS import with @nuxt/ui-pro

assets/css/main.css
@import "tailwindcss";
- @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:

Landing

A landing page you can use as starting point.

Docs

A documentation with Nuxt Content.

SaaS

A template with landing, pricing, docs and blog.

Dashboard

A dashboard with multi-column layout.

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

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.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  uiPro: {
    license: process.env.MY_ENVIRONMENT_VARIABLE
  }
})
Don't commit your license key to a public repository to avoid exposing it.

mdc

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

  • Default: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  uiPro: {
    mdc: true
  }
})

content

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

  • Default: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  uiPro: {
    content: true
  }
})

prefix

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

  • Default: U
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  ui: {
    prefix: 'Nuxt'
  }
})

fonts

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

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  ui: {
    fonts: false
  }
})

colorMode

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

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  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']
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})
Learn more about color customization and theming in the Theme section.

theme.transitions

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

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
This option adds the transition-colors class on components with hover or active states.

devtools.enabled

Use the devtools.enabled option to enable or disable the Nuxt UI devtools.

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  ui: {
    devtools: {
      enabled: false
    }
  }
})

Continuous Releases

Nuxt UI Pro v3 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.

Preview releases are automatically generated for every commit to the v3 branch and pull requests targeting the v3 branch. To use it into your project, use the installation command below by replacing 9a36879 with any commit hash or pull request number.

pnpm add https://pkg.pr.new/@nuxt/ui-pro@9a36879
pkg.pr.new will automatically comment on PRs with the installation URL, making it easy to test changes.

Introduction

A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

License

Nuxt UI Pro is free in development, but you need a license to build your app in production.