InstallationPRO

Playground
Learn how to install and configure Nuxt UI Pro in your Vue 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 Vue 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, vue-router and @unhead/vue in your project's root directory.

Add the Nuxt UI Pro Vite plugin in your vite.config.ts

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro()
  ]
})
Nuxt UI registers unplugin-auto-import and unplugin-vue-components, which will generate auto-imports.d.ts and components.d.ts type declaration files. You will likely want to gitignore these, and add them to your tsconfig.
tsconfig.app.json
{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}
.gitignore
# Auto-generated type declarations
auto-imports.d.ts
components.d.ts

Register the Nuxt UI Vue plugin in your main.ts

main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

Import Tailwind CSS and Nuxt UI Pro in your CSS

assets/main.css
@import "tailwindcss";
@import "@nuxt/ui-pro";
Import the CSS file in your main.ts.
main.ts
import './assets/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')
It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:
.vscode/settings.json
"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
}

Wrap your app with App component

App.vue
<template>
  <UApp>
    <RouterView />
  </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 vite plugin with @nuxt/ui-pro

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
- import ui from '@nuxt/ui/vite'
+ import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
-   ui(),
+   uiPro()
  ]
})

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

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 official Vue templates:

Starter

A minimal starter with Nuxt UI Pro setup for Vue.

Dashboard

A Vue dashboard template with multi-column layout.

You can use the Use this template button on GitHub to create a new repository.

Options

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

prefix

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

  • Default: U
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      prefix: 'Nuxt'
    })
  ]
})

ui

Use the ui option to provide configuration for Nuxt UI.

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        colors: {
          primary: 'green',
          neutral: 'slate'
        }
      }
    })
  ]
})

uiPro

Use the uiPro option to provide configuration for Nuxt UI Pro.

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        pageHero: {
          slots: {
            title: 'font-light'
          }
        }
      }
    })
  ]
})

colorMode

Use the colorMode option to enable or disable the color mode integration from @vueuse/core.

  • Default: true
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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']
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      theme: {
        transitions: false
      }
    })
  ]
})
This option adds the transition-colors class on components with hover or active states.

license

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

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      license: process.env.MY_ENVIRONMENT_VARIABLE
    })
  ]
})
Don't commit your license key to a public repository to avoid exposing it.

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 5385f84 with any commit hash or pull request number.

pnpm add https://pkg.pr.new/@nuxt/ui-pro@5385f84
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.