Installation

Setup

1. Install the @nuxt/ui-pro dependency in your project:

pnpm i @nuxt/ui-pro@1

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

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 🚀

TypeScript

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

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
  }
})

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
  }
})

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
  }
})

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.

Preview releases are automatically generated for every commit to the dev branch and pull requests targeting the dev branch. To use it into your project, replace the version in your package.json with the commit hash or pull request number.

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