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 (optional step)

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'
  },
  css: ['./src/assets/index.css'],
})

Also make sure you have the tsconfig.json properly configured, so the components are added to the path you want:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Initialize SIGMA-UI

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

npx sigma-ui init

And follow the steps in your terminal.

Add components

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

npx sigma-ui add button

Then, you can use the added component without importing it:

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

If you define a prefix in the config, you will need to use the prefix:

<template>
  <UiButton>Click me</UiButton>
</template>