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