Installation

Learn how to install Nuxt UI Pro in your application.

Setup

1. Add @nuxt/ui-pro dependency to your project:

pnpm i @nuxt/ui-pro

No need to install @nuxt/ui yourself as it’s already a dependency of @nuxt/ui-pro.

2. Extend @nuxt/ui-pro layer and register @nuxt/ui module in your nuxt.config:

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

Start your development server, you should now be able to use all the components, composables and utils from Nuxt UI Pro 🚀

License

Nuxt UI Pro is free in development, but you need a license to use it in production.

You can choose between Solo, Startup and Organization plans, they all provide the same features and give you a license key required to build your apps. The only difference is the number of developers that can be invited to the private GitHub repository.

Purchase a license for Nuxt UI Pro.

Once purchased, you will receive an email with a license key to activate. Visit https://ui.nuxt.com/pro/activate to activate your license with your GitHub username and license key, you will be invited to the private GitHub repository.

Local

To build your app locally, you can use your license key in your .env file:

NUXT_UI_PRO_LICENSE=<your-license-key>

If you have multiple projects on your machine, you can also add it to your ~/.nuxtrc:

uiPro.license=<your-token>

Hosting providers

When deploying your app on Netlify, Vercel, NuxtHub or any other hosting provider, you need to set the NUXT_UI_PRO_LICENSE environment variable to your license key. This process is different depending on the provider but here is a quick guide for the most common ones:

• Netlify
• Vercel

The NUXT_UI_PRO_LICENSE variable is suggested when deploying one of our templates on NuxtHub.

TypeScript

This Nuxt layer is written in TypeScript and provides typings for all its components and composables.

You can first read the TypeScript section of Nuxt UI.

Like Nuxt UI, you can import the Nuxt UI Pro types from #ui-pro/types, it can be useful when defining wrapper components:

<template>
  <UHeader :links="links" />
</template>

<script setup lang="ts">
import type { HeaderLink } from '#ui-pro/types'

defineProps<{
  links: HeaderLink[]
}>()
</script>

Options

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

uiPro.license

You can set your license key directly in your nuxt.config if you don’t want to use environment variables or ~/.nuxtrc:

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    license: 'your-license'
  }
})

uiPro.content

Nuxt UI Pro will load some components, composables and utils related to @nuxt/content only when the module is detected in your project. If you somehow want to import those anyway, you can set the content option to true:

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    content: true
  }
})

Read more about Nuxt Contentd integration in Nuxt UI Pro.

uiPro.routerOptions

Nuxt UI Pro overrides the default Nuxt scroll behavior by injecting a custom app/router.options.ts. If you want to add your own, you will need to set the routerOptions option to false:

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    routerOptions: false
  }
})

A warning will appear in your console when multiple router.options.ts files are detected. You can remove the warning by setting routerOptions to true.

uiPro.customScrollbars New

Nuxt UI Pro overrides the default scrollbars style on Windows by injecting a scrollbars.css CSS file. If you want to disable this behavior, you will need to set the customScrollbars option to false:

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    customScrollbars: false
  }
})

Edge

To use the latest updates pushed on the dev branch, you can use @nuxt/ui-pro-edge.

Update your package.json to the following:

{
  "devDependencies": {
-   "@nuxt/ui-pro": "^0.3.1"
+   "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
  }
}

Then run pnpm install, yarn install or npm install.