How to Install Nuxtlabs UI in NuxtJS

In this tutorial, I will show you how to install Nuxtlabs UI in Nuxt 3.

Create Nuxtjs Project

Run below command in terminal to install nuxt 3 project.

# using npx
npx nuxi@latest init <project-name>
# using pnpm
pnpm dlx nuxi@latest init <project-name>

Move to project.

cd <project-name>

Install the dependencies:

# using npm
npm install
# using pnpm
pnpm install
# using yarn
yarn install

Install Nuxtlabs UI in Nuxt 3

Run below command to install Nuxtlabs UI in Nuxt 3.

# using npm 
npm install -D @nuxthq/ui
# using yarn
yarn add -D @nuxthq/ui
# using pnpm
pnpm i -D @nuxthq/ui

Add @nuxthq/ui modules in your nuxt.config section.

export default defineNuxtConfig({
 modules: ['@nuxthq/ui']
})

app.vue

Vue

<template>
  <div class="space-x-4">
    <UBadge>Badge</UBadge>
    <UButton>Button</UButton>
    <UButton color="violet" variant="solid">Button</UButton>
    <UButton color="cyan" variant="outline">Button</UButton>
  </div>
</template>

Originally published at webvees.com