Create project (optional step)

If you don't have a Nuxt project yet, create it first. Here's an example using create-nuxt-app:

npx nuxi@latest init my-app

Install TypeScript

If you encounter the error ERROR: Cannot read properties of undefined (reading 'sys') (x4), please proceed to install TypeScript as a dependency, as advised in this issue

npm install -D typescript

Install TailwindCSS module

If you want to use Tailwind version of the SIGMA-UI components, and you don't already have Tailwind setup in your project, install the TailwindCSS module as well:

npx nuxi@latest module add @nuxtjs/tailwindcss

Add Nuxt module

Install the SIGMA-UI Nuxt module either manually or using the sigma-ui-nuxt module:

npx nuxi@latest module add sigma-ui-nuxt

Configure nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', 'sigma-ui-nuxt'],
  sigmaUi: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  }
})

Initialize SIGMA-UI

In your existing Nuxt project, run the following command to config SIGMA-UI (learn more here: CLI docs > init):

npx sigma-ui init

And follow the steps in your terminal.

That's it

You can now start adding components to your project (learn more here: CLI docs > add):

npx sigma-ui add button

The command above will add the Button component to your project. You can then import and use it like this:

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button>Click me</Button>
</template>