Tairo

https://tairo.cssninja.io/documentation
Admin
Tairo is a product designed to help developers build custom applications, leveraging Nuxt and...
Tokens:20,732
Snippets:139
Trust Score:9.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run the Nuxt development server

Source: https://tairo.cssninja.io/documentation/setup/new-project

Start the Nuxt development server to run your application locally. The server will typically open the frontend in your default web browser.

```bash
pnpm dev
```

--------------------------------

### Navigate into the new project directory

Source: https://tairo.cssninja.io/documentation/setup/new-project

Change the current directory to the newly created Nuxt project folder to proceed with dependency installation and configuration.

```bash
cd <app>
```

--------------------------------

### Install initial development dependencies

Source: https://tairo.cssninja.io/documentation/setup/new-project

Add essential development dependencies like @shuriken-ui/nuxt and tailwindcss to your Nuxt project using pnpm.

```bash
pnpm add --save-dev @shuriken-ui/nuxt tailwindcss
```

--------------------------------

### Install additional Tairo-related dependencies

Source: https://tairo.cssninja.io/documentation/setup/new-project

Install necessary development dependencies, including @shuriken-ui/nuxt and tailwindcss, which are required for using Tairo with Nuxt.

```bash
pnpm add --save-dev @shuriken-ui/nuxt tailwindcss
```

--------------------------------

### Run Tairo Demo Development Server

Source: https://tairo.cssninja.io/documentation/demo-installation

This command initiates the development server specifically for the Tairo demo application. It uses pnpm's filter option to target the 'demo' workspace, allowing developers to access the application in their browser.

```bash
pnpm --filter=demo dev
```

--------------------------------

### Install Tairo Project Dependencies with pnpm

Source: https://tairo.cssninja.io/documentation/demo-installation

This command demonstrates how to install all necessary project dependencies for Tairo using pnpm. It emphasizes that pnpm is required due to the project's reliance on 'pnpm-workspace.yaml' for managing layer dependencies.

```bash
pnpm install
```

--------------------------------

### Tairo Demo Application Directory Structure

Source: https://tairo.cssninja.io/documentation/demo-installation

This snippet details the internal directory structure of the '.demo' application within the Tairo project. It shows the organization of Nuxt-specific directories like 'app', 'content', 'server', and configuration files, essential for understanding the demo's architecture.

```bash
.demo/
├── app/
│   ├── assets/
│   ├── components/
│   ├── composables/
│   ├── layouts/
│   ├── pages/
│   ├── types/
│   ├── utils/
│   ├── app.config.ts
│   ├── app.vue
│   └── error.vue
├── content/
├── examples/
├── i18n/
├── modules/
├── public/
├── server/
│   ├── api/
│   └── tsconfig.json
├── patches/ # Contains patches for dependencies (pnpm patches)
├── # Predefined dotfiles
├── .editorconfig
├── .gitignore
├── content.config.ts
├── nuxt.config.ts
├── package.json
├── eslint.config.mjs
└── tsconfig.json
```

--------------------------------

### Tairo Project Root Directory Structure

Source: https://tairo.cssninja.io/documentation/demo-installation

This snippet illustrates the top-level directory structure of the Tairo project when downloaded from source. It highlights key directories like '.app', '.demo', 'layers', and monorepo configuration files, providing an overview of the project's organization.

```bash
├── .app/ # This is the entry point of the quickstarter
├── .demo/ # This is the entry point of the demo
├── .vscode/ # Predefined vscode settings
├── layers/
│   └── tairo/ # The Tairo layer
├── patches/ # Contains patches for dependencies (pnpm patches)
├── # Predefined dotfiles
├── .editorconfig
├── .gitignore
├── # Monorepo configuration files
├── package.json
├── eslint.config.mjs
├── tsconfig.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
```

--------------------------------

### Create a new Nuxt project

Source: https://tairo.cssninja.io/documentation/setup/new-project

Use pnpm to initialize a new Nuxt project with minimal configuration. This command creates a new directory for your application.

```bash
pnpm create nuxt <app>
```

--------------------------------

### Create a Basic Nuxt.js Page with Meta Information

Source: https://tairo.cssninja.io/documentation/setup/first-page

Demonstrates how to create a simple Nuxt.js page using `<script setup>` for page logic and `useHead` for defining custom meta information such as title and description. This example shows a basic page with an input component.

```vue
<script setup lang="ts">
// meta information can be added to the head
useHead({
  title: 'My first page',
  meta: [
    { name: 'description', content: 'My amazing dashboard.' }
  ],
})

// here you can define your page logic
const message = ref('Hello Tairo')
</script>

<template>
  <div>
    <BaseInput v-model="message" />
  </div>
</template>
```

--------------------------------

### Troubleshooting: GitHub layer download error

Source: https://tairo.cssninja.io/documentation/setup/new-project

Example of an error message indicating a failure to download the Tairo layer from GitHub, often due to incorrect GIGET_AUTH token or an invalid repository version.

```bash
 ERROR  Failed to download https://api.github.com/repos/cssninjaStudio/tairo/tarball/2.0.0: 404 Not Found
```

--------------------------------

### Define main.css for Tailwind and Shuriken UI

Source: https://tairo.cssninja.io/documentation/setup/new-project

Create app/assets/main.css to import core styles from Tailwind CSS, Shuriken UI, and the Tairo theme. This file also supports custom theme definitions.

```css
@import 'tailwindcss';
@import '@shuriken-ui/nuxt';
@import '#layers/@cssninja/tairo/theme.css';

@theme {
  /* Your custom theme */
}
```

--------------------------------

### Install Development Dependency by Navigating to Workspace Layer

Source: https://tairo.cssninja.io/documentation/guides/pnpm-workspace

Alternatively, dependencies can be installed directly into a workspace layer by navigating into its directory and running `pnpm install`. This command installs `my-dependency` as a development dependency within the `.app` directory.

```bash
cd .app
pnpm install --dev my-dependency
```

--------------------------------

### Enable Nuxt 4 compatibility

Source: https://tairo.cssninja.io/documentation/setup/new-project

Configure nuxt.config.ts to enable compatibility with Nuxt 4, allowing the use of the latest Nuxt features with Tairo.

```ts
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
})
```

--------------------------------

### Set GIGET_AUTH environment variable for GitHub access

Source: https://tairo.cssninja.io/documentation/setup/new-project

Configure the GIGET_AUTH environment variable with your GitHub Personal Access Token. This is required for installing private Tairo layers from GitHub.

```bash
GIGET_AUTH=ghp_your_github_token
```

--------------------------------

### Configure CSS in nuxt.config.ts

Source: https://tairo.cssninja.io/documentation/setup/new-project

Update nuxt.config.ts to include the main CSS file, which will import Tailwind CSS and Shuriken UI styles for your application.

```ts
export default defineNuxtConfig({
  css: [
    '~/assets/main.css',
  ],
})
```

--------------------------------

### Define Docker Entrypoint for Node.js App

Source: https://tairo.cssninja.io/documentation/guides/deployment

This Dockerfile command sets the default command to be executed when the container starts. It runs the Node.js application located at `.output/server/index.mjs`.

```Dockerfile
CMD ["node", ".output/server/index.mjs"]
```

--------------------------------

### Nuxt.js Pages Directory Structure Example

Source: https://tairo.cssninja.io/documentation/setup/first-page

Illustrates the typical directory structure for Nuxt.js pages, including nested and dynamic routes, and their corresponding URL paths. This structure directly maps to the application's routing.

```bash
pages/
├── app/
│   ├── posts/
│   │   ├── [id]/ # contains dynamic parameter named "id"
│   │   │   ├── edit.vue # /app/posts/1/edit
│   │   │   └── index.vue # /app/posts/1
│   │   ├── create.vue # /app/posts/create
│   │   └── index.vue # /app/posts
│   └── index.vue # /app
├── app.vue # custom layout wrapper for the app/ directory
├── login.vue # /login
└── index.vue # /
```

--------------------------------

### Enable CLI Debugging for Nuxt and Vite

Source: https://tairo.cssninja.io/documentation/guides/troubleshooting

Instructions to activate verbose debug logging for Nuxt.js and Vite development servers using environment variables. This is useful for gaining more insight into processes and troubleshooting issues.

```bash
DEBUG=1 pnpm dev # or pnpm build
```

```bash
DEBUG=vite:* pnpm dev # or pnpm build
```

--------------------------------

### Verify Node.js Installation

Source: https://tairo.cssninja.io/documentation/prerequisites

This command checks the currently installed version of Node.js. It is recommended to use Node.js LTS, with a minimum version of 22.x.x, to avoid compatibility issues with underlying dependencies.

```bash
node -v
```

--------------------------------

### Configure Global Application Setup in Nuxt.js app.vue

Source: https://tairo.cssninja.io/documentation/setup/main-files

This snippet demonstrates how to configure the `app.vue` file, the main entry point for a Nuxt.js application. It shows how to set global HTML attributes, define a favicon, and integrate `BaseProvider` for global context, along with Nuxt's `NuxtRouteAnnouncer`, `NuxtLoadingIndicator`, `NuxtLayout`, and `NuxtPage` components.

```Vue
<script setup lang="ts">
useHead({
  htmlAttrs: {
    lang: 'en',
    dir: 'ltr'
  },
  link: [
    {
      rel: 'icon',
      type: 'image/png',
      href: '/img/favicon.png'
    }
  ]
})
</script>

<template>
  <BaseProvider>
    <NuxtRouteAnnouncer />
    <NuxtLoadingIndicator color="var(--color-primary-500)" />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </BaseProvider>
</template>
```

--------------------------------

### Install and Enable Nuxt Devtools

Source: https://tairo.cssninja.io/documentation/guides/troubleshooting

Steps to install the Nuxt Devtools package and configure it in your nuxt.config.ts file. Enabling devtools provides powerful debugging and inspection capabilities for your Nuxt.js application, including component and state inspection.

```bash
pnpm --filter=app install --dev @nuxt/devtools
```

```typescript
export default defineNuxtConfig({
  devtools: { enabled: true }
})
```

--------------------------------

### Extend Nuxt config with Tairo GitHub layer

Source: https://tairo.cssninja.io/documentation/setup/new-project

Modify nuxt.config.ts to extend your Nuxt project with the Tairo layer directly from its GitHub repository, specifying the desired version.

```ts
export default defineNuxtConfig({
  extends: [
    'gh:cssninjaStudio/tairo/layers/tairo#2.0.0',
  ],
})
```

--------------------------------

### Create a Basic Nuxt API Route with TypeScript

Source: https://tairo.cssninja.io/documentation/setup/first-api-route

This TypeScript code defines a simple /api/hello endpoint using Nuxt's `defineEventHandler`. It demonstrates how to extract query parameters (`from`) and return a dynamic string response, serving as a foundational example for API route creation.

```ts
export default defineEventHandler((event) => {
  // extract the "from" query parameter
  const from = getQuery(event)?.from || 'tairo'

  return `Hello ${from}!`
})
```

--------------------------------

### Run Docker Container and Map Port

Source: https://tairo.cssninja.io/documentation/guides/deployment

This `docker run` command starts a container from the `my-frontend-app:1.0.0` image. It maps port 3000 from the container to port 3000 on the host and automatically removes the container upon exit (`--rm`).

```bash
docker run --rm --publish 3000:3000 my-frontend-app:1.0.0
```

--------------------------------

### Create Package.json for New Workspace Folder

Source: https://tairo.cssninja.io/documentation/guides/pnpm-workspace

A `package.json` file is required within each folder intended to be part of the pnpm workspace. This example shows a basic `package.json` for a new `.backend` directory, defining its name, private status, and version.

```json
{
  "name": "my-backend",
  "private": true,
  "version": "1.0.0"
}
```

--------------------------------

### Add New Folder to Pnpm Workspace Configuration

Source: https://tairo.cssninja.io/documentation/guides/pnpm-workspace

This example demonstrates how to modify `pnpm-workspace.yaml` to include a new `.backend` folder in the pnpm workspace, replacing an existing `.demo` entry. This allows pnpm to manage packages within the new directory.

```yaml
packages:
  - .app
  - .backend # replace unused .demo with .backend
  - layers/*
```

--------------------------------

### Install Nuxt Fonts Module

Source: https://tairo.cssninja.io/documentation/setup/customization

This command installs the `@nuxt/fonts` module as a development dependency using pnpm, which is required for loading custom fonts in a Nuxt.js project.

```bash
pnpm add -D @nuxt/fonts

```

--------------------------------

### Defining Public and Private Runtime Configuration

Source: https://tairo.cssninja.io/documentation/setup/configuration

This example demonstrates how to use the `runtimeConfig` property in `nuxt.config.ts` to define variables. It distinguishes between server-only variables (`secretKey`) and public variables (`mapboxToken`) accessible on both server and client.

```ts
export default defineNuxtConfig({
  runtimeConfig: {
    // expose variables only to server
    secretKey: 'my-private-key',

    public: {
      // expose variables to both server and client
      mapboxToken: 'my-public-token'
    }
  }
})
```

--------------------------------

### Enable Corepack for Package Manager Management

Source: https://tairo.cssninja.io/documentation/prerequisites

Corepack is a Node.js feature that allows managing different package managers like Yarn or pnpm. This command enables Corepack, which is installed by default with Node.js, to streamline package management workflows.

```bash
corepack enable
```

--------------------------------

### Test Nuxt API Route via cURL Command

Source: https://tairo.cssninja.io/documentation/setup/first-api-route

This bash snippet illustrates how to test a Nuxt API endpoint from the terminal using `curl`. It shows the command to send a GET request with a query parameter and includes the expected HTTP response, demonstrating successful API interaction.

```bash
curl -i http://localhost:3000/api/hello?from=world

# HTTP/1.1 200 OK
# content-type: text/html
# date: Wed, 12 Mar 2025 16:31:06 GMT
# connection: close
# content-length: 12
#
# Hello world!
```

--------------------------------

### Open a Vue Panel Component using usePanels

Source: https://tairo.cssninja.io/documentation/guides/panels

This example illustrates how to open a previously defined Vue panel component using the `open` function from the `usePanels` composable. It shows how to pass props to the panel and handle the asynchronous return value from the panel's close event.

```vue
<script setup lang="ts">
import { PanelComponent } from '#components'

const { open, close } = usePanels()

function onSomeEvent() {
  // open a panel and wait for close event
  const [selected] = await open(
    // component to open
    PanelComponent,
    // panel component props
    {
      color: 'secondary',
      projects: [
        { name: 'Project 1' },
        { name: 'Project 2' },
        { name: 'Project 3' },
        { name: 'Project 4' },
      ],
    },
    // panel options
    {
      position: 'left',
      size: 'md',
      overlay: true,
    }
  )

  console.log(selected)
}
</script>

```

--------------------------------

### Install Development Dependency in Specific Pnpm Workspace Layer

Source: https://tairo.cssninja.io/documentation/guides/pnpm-workspace

To install a dependency into a specific package within a pnpm workspace, use the `--filter` flag. This command installs `my-dependency` as a development dependency into the workspace package named 'app'.

```bash
pnpm --filter=app install --dev my-dependency
```

--------------------------------

### Increase Node.js Memory Limit for Builds

Source: https://tairo.cssninja.io/documentation/guides/troubleshooting

Command to increase the Node.js heap memory size, which is essential for large builds or when using memory-intensive features like documentation generation with nuxt-component-meta. This helps prevent 'JavaScript heap out of memory' errors.

```bash
NODE_OPTIONS=--max-old-space-size=8192 pnpm demo:build
```

--------------------------------

### Configure Application Theme with CSS @theme Directive

Source: https://tairo.cssninja.io/documentation/setup/customization

This snippet demonstrates how to use the `@theme` directive in `main.css` to override default Tailwind, Tairo, and Shuriken UI theme values. It shows examples of custom font definitions, spacing, sidebar width, and primary color palette adjustments, as well as defining custom CSS variables.

```css
@import 'tailwindcss';
@import '@shuriken-ui/nuxt';
@import '#layers/@cssninja/tairo/theme.css';

@theme {
  /* Override Tailwind values */
  --font-sans: Inter, sans-serif;
  --spacing: 0.275rem;

  /* Override Tairo values */
  --tairo-sidenav-sidebar-width: 16.25rem;

  /* Override Shuriken UI values */
  --color-primary-50: var(--color-sky-50);
  --color-primary-100: var(--color-sky-100);
  --color-primary-200: var(--color-sky-200);
  --color-primary-300: var(--color-sky-300);
  --color-primary-400: var(--color-sky-400);
  --color-primary-500: var(--color-sky-500);
  --color-primary-600: var(--color-sky-600);
  --color-primary-700: var(--color-sky-700);
  --color-primary-800: var(--color-sky-800);
  --color-primary-900: var(--color-sky-900);
  --color-primary-950: var(--color-sky-950);

  --color-card-default-bg: var(--color-white);
  --color-card-default-border: var(--color-muted-300);

  /* Create your own theme variables */
  --color-custom: oklch(0.74 0.17 40.24);
}

```

--------------------------------

### Tairo Preinstalled Modules Reference

Source: https://tairo.cssninja.io/documentation/reference/modules

A reference list of modules that are preinstalled with the Tairo layer, detailing their purpose and providing links to their official documentation.

```APIDOC
Module | Description
--- | ---
@shuriken-ui/nuxt | Base UI components
nuxt-icon | 100,000+ ready to use icons from Iconify.
@nuxtjs/color-mode | Dark and Light mode for Nuxt with auto detection
```

--------------------------------

### Serve Nuxt Static Site Locally

Source: https://tairo.cssninja.io/documentation/guides/deployment

After generating your static site, use this command to serve the files locally. This allows you to verify the generated content in the '.app/.output/public' directory before deploying it.

```bash
npx serve .app/.output/public
```

--------------------------------

### Nuxt Server Directory Structure Overview

Source: https://tairo.cssninja.io/documentation/setup/first-api-route

This snippet outlines the standard directory structure for server-side components in a Nuxt application. It details the organization of API routes, server routes, plugins, tasks, middleware, and utilities, providing a clear roadmap for server-side development.

```bash
server/
├── api/
│   └── hello.ts # /api/hello
├── routes/
│   └── sitemap.xml.ts # /sitemap.xml
├── plugins/ # nitro plugins
├── tasks/ # nitro tasks
├── middleware/ # nitro middlewares
├── utils/ # server only utils
└── tsconfig.json # server only tsconfig
```

--------------------------------

### Run Nuxt Server-Rendered Application Locally

Source: https://tairo.cssninja.io/documentation/guides/deployment

After building your server-rendered application, use this command to run it locally. This verifies that the application functions correctly from the generated server entry point in '.app/.output/server/index.mjs'.

```bash
node .app/.output/server/index.mjs
```

--------------------------------

### Remove Node_Modules Directories in Pnpm Workspace

Source: https://tairo.cssninja.io/documentation/guides/pnpm-workspace

This `find` command can be used to locate and remove all `node_modules` directories within a pnpm workspace, up to a specified depth. This is useful for cleaning up after dependency updates or for fresh installations.

```bash
find . -maxdepth 4 -name node_modules -type d -prune -exec rm -rf {} \;
```

--------------------------------

### Nuxt Multi-step Form Directory Structure Overview

Source: https://tairo.cssninja.io/documentation/guides/mutli-step-forms

Illustrates the recommended directory structure for implementing a multi-step form in a Nuxt application, utilizing nested routes for form steps and a parent page to manage the form state.

```bash
├── .app/
│   ├── pages/
│   │   ├── my-form/
│   │   │   ├── index.vue # First step
│   │   │   ├── my-step-2.vue # Second step
│   │   │   ├── my-step-3.vue # Thrid step
│   │   │   └── review.vue # Final step
│   │   └── my-form.vue # Parent page
```

--------------------------------

### Generate Nuxt Static Site

Source: https://tairo.cssninja.io/documentation/guides/deployment

Use this command to generate a static site from your Nuxt application. It creates a '.output/public' directory containing all files necessary for static serving. Remember to specify the application layer using '.app'.

```bash
npx nuxt generate .app
```

--------------------------------

### Connect Nuxt Frontend Page to API Route using useFetch

Source: https://tairo.cssninja.io/documentation/setup/first-api-route

This Vue.js component demonstrates how to integrate a Nuxt frontend page with a backend API route. It utilizes `useFetch` to reactively retrieve data from /api/hello based on user input, showcasing dynamic data fetching and display within a Nuxt application.

```vue
<script setup lang="ts">
// definePageMeta ...

// create a reactive input value
const input = ref('')

// create a computed object that will be updated
// every time the input value changes
const query = computed(() => ({ from: input.value }))

// call our API route, it will be re-fetched
// every time the query object changes
// note that data type is detected automatically!
const { data } = useFetch('/api/hello', {
  query,
})
</script>

<template>
  <div class="max-w-lg">
    <BaseCard class="p-6">
      <!-- reactive input -->
      <BaseField label="Your name">
        <BaseInput v-model="input" />
      </BaseField>

      <!-- display the result -->
      <BaseParagraph class="mt-4 line-clamp-1 max-w-sm">
        {{ data }}
      </BaseParagraph>
    </BaseCard>
  </div>
</template>
```

--------------------------------

### Build Nuxt Server-Rendered Application for Production

Source: https://tairo.cssninja.io/documentation/guides/deployment

This command builds your Nuxt application for server-side rendering, creating a '.output' directory. It leverages Nitro for various platform presets, such as 'node-cluster', and requires specifying the application layer.

```bash
NITRO_PRESET=node-cluster npx nuxt build .app
```

--------------------------------

### Multi-Step Form Validation with `provideMultiStepForm`

Source: https://tairo.cssninja.io/documentation/guides/mutli-step-forms

Illustrates how to implement custom validation logic for a multi-step form using `provideMultiStepForm`. This example shows synchronous and asynchronous validation, error resetting with `resetFieldError`, setting specific field errors with `setFieldError`, and a global `onError` handler.

```vue
<script setup lang="ts">
provideMultiStepForm({
  // global error handler,
  // this will be called when an error is thrown
  // in a validate function or in the onSubmit function
  async onError(_error, _context) {
    //
  },

  // ...

  steps: [
    {
      // ...

      async validate({ data, setFieldError, resetFieldError }) {
        // reset current step errors
        resetFieldError(['email', 'password', 'passwordCheck'])

        // you can use a validation library like zod or yup
        if (!data.value.email) {
          setFieldError('email', 'Email is required')
        }
        else if (!/^[^s@]+@[^s@][^s.@]*\.[^\s@]+$/.test(data.value.email)) {
          setFieldError('email', 'Invalid email')
        }
        else {
          // example of async validation
          const available = await checkEmailAvailability(data.value.email)
          if (!available) {
            setFieldError('email', 'Email already used')
          }
        }

        if (!data.value.password) {
          setFieldError('password', 'Password is required')
        }
        else if (data.value.password.length < 6) {
          setFieldError('password', 'Password must be at least 6 characters')
        }
        else if (data.value.password !== data.value.passwordCheck) {
          setFieldError('passwordCheck', 'Passwords do not match')
        }

        // return nothing to let form move only if no errors
      },
    },
  ],
})
</script>
```

--------------------------------

### Multi-Stage Dockerfile for Nuxt Production Application

Source: https://tairo.cssninja.io/documentation/guides/deployment

This Dockerfile provides a multi-stage build process for a Nuxt application, suitable for containerized deployments. It includes stages for building the application with pnpm and setting up a production environment with a non-root user for enhanced security.

```dockerfile
# Build stage
FROM bitnami/node:20 AS build
WORKDIR /app

# Install pnpm with corepack
RUN corepack enable && corepack prepare pnpm@latest --activate

# Prepare pnpm dependencies using lockfile, patches and docker cache
COPY pnpm-lock.yaml .
COPY patches/ patches/
RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store pnpm fetch

# Install and build the app
COPY . .
RUN pnpm install
RUN pnpm build

# Production stage
FROM bitnami/node:20 AS prod
WORKDIR /app

# Create a non-root user
RUN groupadd -g 10001 nuxt && \
  useradd -u 10001 -g nuxt nuxt \
  && chown -R nuxt:nuxt /app

# Switch to the non-root user
USER nuxt:nuxt

# Set the environment to production
ENV NODE_ENV=production

# Copy the built app from the build stage
COPY --chown=nuxt:nuxt --from=build /app/.app/.output .output

# Expose the port
EXPOSE 3000
```

--------------------------------

### TairoSelect Component API Reference

Source: https://tairo.cssninja.io/documentation/reference/tairo/select

Detailed API documentation for the TairoSelect component, outlining its `v-model` usage, available props for customization (e.g., `autocomplete`, `bindings`, `items`, `multiple`, `placeholder`), emitted events like `update:open`, and supported slots.

```APIDOC
TairoSelect Component:
  Base Component: BaseSelect (https://shurikenui.com/docs/components/select)

  v-model:
    v-model: AcceptableValue | AcceptableValue[] (The controlled value of the Select. Can be bind as v-model.)

  Props:
    autocomplete: string (Native html input autocomplete attribute.)
    bindings: { trigger?: SelectTriggerProps; portal?: SelectPortalProps; content?: SelectContentProps; viewport?: SelectViewportProps; } (Optional bindings to pass to the inner components.)
    by: string | ((a: AcceptableValue, b: AcceptableValue) => boolean) (Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.)
    classes: { text?: string | string[]; icon?: string | string[]; content?: string | string[]; buttonUp?: string | string[]; buttonDown?: string | string[]; viewport?: string | ... 1 more ...; } (Optional classes to pass to the inner components.)
    default-open: boolean (The open state of the select when it is initially rendered. Use when you do not need to control its open state.)
    default-value: AcceptableValue | AcceptableValue[] (The value of the select when initially rendered. Use when you do not need to control the state of the Select)
    dir: Direction (The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.)
    disabled: boolean (When true, prevents the user from interacting with Select)
    icon: string
    id: string (The form input identifier.)
    items: BaseSelectItemProps<AcceptableValue>[] (The defaults items to display for the select input.)
    multiple: boolean (Whether multiple options can be selected or not.)
    name: string (The name of the field. Submitted with its owning form as part of a name/value pair.)
    open: boolean (The controlled open state of the Select. Can be bind as v-model:open.)
    placeholder: string (The placeholder to display for the select input.)
    preset: "aligned" | "popper" (Bindings presets)
    required: boolean (When true, indicates that the user must set the value before the owning form can be submitted.)
    rounded: "md" | "none" | "sm" | "lg" | "full" (The radius of the select input.)
    size: "md" | "sm" | "lg" | "xl" (The size of the select input.)
    variant: "default" | "muted" (The variant of the select input.)

  Events:
    update:open: [value: boolean]

  Slots:
    #default: {}
```

--------------------------------

### Build Docker Image with Tag

Source: https://tairo.cssninja.io/documentation/guides/deployment

This `docker build` command constructs a Docker image from the Dockerfile in the current directory. It assigns the tag `my-frontend-app:1.0.0` to the newly created image, typically as part of a multi-stage build process.

```bash
docker build --tag my-frontend-app:1.0.0 .
```

--------------------------------

### Basic Nuxt Configuration File Structure

Source: https://tairo.cssninja.io/documentation/setup/configuration

This snippet illustrates the fundamental structure of the `nuxt.config.ts` file, showing how to include layers via `extends` and register modules for a Nuxt application.

```ts
export default defineNuxtConfig({
  extends: [
    // register layers
  ],
  modules: [
    // register modules
  ],

  // rest of your nuxt config ...
})
```

--------------------------------

### API Documentation for TairoTopnavLayout Component

Source: https://tairo.cssninja.io/documentation/layouts/topnav

API documentation for the `TairoTopnavLayout` component, detailing its available slots and their expected types. This component serves as the main wrapper for the top navigation layout.

```APIDOC
TairoTopnavLayout:
  Slots:
    #default:
      Type: "{ isMobileOpen: any; }"
```

--------------------------------

### Open Panel (Legacy app.config.ts Method)

Source: https://tairo.cssninja.io/documentation/guides/migration

This Vue script shows the previous method for opening a panel in Tairo V1. It uses the `usePanels` composable to open a panel by its registered name, configured via `app.config.ts`.

```vue
<script setup lang="ts">
const { open } = usePanels()

function onSomeEvent() {
  // open a panel by name, which is registered in app.config.ts
  open('panel-name', {
    // ... panels props
  })
}
</script>
```

--------------------------------

### APIDOC: TairoSidebarNav Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarNav component, detailing its available slots.

```APIDOC
TairoSidebarNav:
  Slots:
    #default: {}
```

--------------------------------

### APIDOC: TairoSidebarLinks Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarLinks component, detailing its available slots.

```APIDOC
TairoSidebarLinks:
  Slots:
    #default: {}
```

--------------------------------

### APIDOC: TairoSidebarLayout Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarLayout component, including its v-model, props, and slots.

```APIDOC
TairoSidebarLayout:
  Models:
    v-model: string
  Props:
    default-value: string (default: -)
  Slots:
    #default: { isMobileOpen: any; toggleMobileNav: any; modelValue: any; }
```

--------------------------------

### APIDOC: TairoSidebarSubsidebarHeader Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarSubsidebarHeader component, detailing its available slots and external reference.

```APIDOC
TairoSidebarSubsidebarHeader:
  See also: BaseHeading (https://shurikenui.com/docs/components/heading)
  Slots:
    #default: {}
```

--------------------------------

### Tailwind CSS v4 Configuration with CSS Variables

Source: https://tairo.cssninja.io/documentation/guides/migration

This CSS snippet illustrates the new configuration method for Tailwind CSS v4, which leverages CSS variables for design customization. It shows how to import Tailwind and Shuriken UI, and then define custom primary color palettes using the `@theme` directive, replacing the `withShurikenUI` approach.

```css
@import 'tailwindcss';
@import '@shuriken-ui/nuxt';
@import '#layers/@cssninja/tairo/theme.css';

@theme {
  --color-primary-50: var(--color-sky-50);
  --color-primary-100: var(--color-sky-100);
  --color-primary-200: var(--color-sky-200);
  --color-primary-300: var(--color-sky-300);
  --color-primary-400: var(--color-sky-400);
  --color-primary-500: var(--color-sky-500);
  --color-primary-600: var(--color-sky-600);
  --color-primary-700: var(--color-sky-700);
  --color-primary-800: var(--color-sky-800);
  --color-primary-900: var(--color-sky-900);
  --color-primary-950: var(--color-sky-950);
}
```

--------------------------------

### APIDOC: TairoSidebarLink Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarLink component, including its props and slots.

```APIDOC
TairoSidebarLink:
  Props:
    active: boolean (default: -)
    icon: string (default: -)
    to: any (default: -)
  Slots:
    #default: {}
```

--------------------------------

### APIDOC: TairoSidebarSubsidebarContent Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarSubsidebarContent component, detailing its available slots.

```APIDOC
TairoSidebarSubsidebarContent:
  Slots:
    #default: {}
```

--------------------------------

### APIDOC: TairoSidebarSubsidebar Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarSubsidebar component, including its props and slots.

```APIDOC
TairoSidebarSubsidebar:
  Props:
    value: string (default: -)
  Slots:
    #default: {}
```

--------------------------------

### APIDOC: TairoSidebar Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebar component, detailing its available slots.

```APIDOC
TairoSidebar:
  Slots:
    #default: {}
```

--------------------------------

### APIDOC: TairoSidebarSubsidebarLink Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarSubsidebarLink component, including its props and slots.

```APIDOC
TairoSidebarSubsidebarLink:
  Props:
    icon: string (default: -)
    label: string (default: -)
    to: any (default: -)
  Slots:
    #default: {}
```

--------------------------------

### API Documentation for TairoTopnavContent Component

Source: https://tairo.cssninja.io/documentation/layouts/topnav

API documentation for the `TairoTopnavContent` component, detailing its available slots. This component is designed to hold the main content of the top navigation area.

```APIDOC
TairoTopnavContent:
  Slots:
    #default:
      Type: "{}"
```

--------------------------------

### TairoCheckboxAnimated Component API Reference

Source: https://tairo.cssninja.io/documentation/reference/tairo/checkbox-animated

Detailed API documentation for the TairoCheckboxAnimated component, including v-model, props, and exposed properties, outlining their types, default values, and descriptions.

```APIDOC
TairoCheckboxAnimated Component API

v-model:
  - Name: v-model
    Type: boolean | "indeterminate" | null
    Description: The controlled value of the checkbox. Can be binded with v-model.

Props:
  - Name: as
    Type: AsTag | Component
    Default: -
    Description: The element or component this component should render as. Can be overwritten by asChild.
  - Name: as-child
    Type: boolean
    Default: -
    Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
  - Name: default-value
    Type: boolean | "indeterminate"
    Default: -
    Description: The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
  - Name: disabled
    Type: boolean
    Default: -
    Description: When true, prevents the user from interacting with the checkbox.
  - Name: id
    Type: string
    Default: -
    Description: Id of the element.
  - Name: name
    Type: string
    Default: -
    Description: The name of the field. Submitted with its owning form as part of a name/value pair.
  - Name: required
    Type: boolean
    Default: -
    Description: When true, indicates that the user must set the value before the owning form can be submitted.
  - Name: value
    Type: AcceptableValue
    Default: -
    Description: The value given as data when submitted with a name.

Exposed:
  - Name: variant
    Type: "success" | "primary" | "info" | "warning" | "destructive" | "muted" | "light" | "dark" | "black" | "custom"
    Description: The color of the checkbox.
```

--------------------------------

### Tairo Flex Table Components API Reference

Source: https://tairo.cssninja.io/documentation/reference/tairo/flex-table

Detailed API documentation for Tairo Flex Table, TairoFlexTableHeading, TairoFlexTableRow, and TairoFlexTableCell components, including their props, types, default values, and slots.

```APIDOC
TairoFlexTable:
  Slots:
    #header: {}
    #default: {}

TairoFlexTableHeading:
  Props:
    type:
      Type: ""stable" | "grow" | "shrink""
      Default: ""stable""
      Description: The type of the heading.
  Slots:
    #default: {}

TairoFlexTableRow:
  Props:
    rounded:
      Type: ""md" | "sm" | "lg" | "none""
      Default: "-"
      Description: The radius of the row.
  Slots:
    #default: {}

TairoFlexTableCell:
  Props:
    clamp:
      Type: "false | 1 | 2 | 3 | 4 | 5 | 6"
      Default: "1"
    light:
      Type: "boolean"
      Default: "-"
    type:
      Type: "FlexTableCellType"
      Default: ""stable""
  Slots:
    #default: {}
```

--------------------------------

### Multi-Step Form API Reference

Source: https://tairo.cssninja.io/documentation/guides/mutli-step-forms

Reference for the `useMultiStepForm` and `provideMultiStepForm` composables, including their methods, properties, and the structure of validation functions.

```APIDOC
useMultiStepForm<TFormData, TFormStepMeta>(): {
  data: Ref<TFormData>;
  errors: {
    fields: Record<string, string | undefined>;
  };
  checkPreviousSteps: () => Promise<void>;
}

provideMultiStepForm(options: {
  onError?: (error: any, context: any) => Promise<void> | void;
  steps: Array<{
    validate?: (context: {
      data: Ref<TFormData>;
      setFieldError: (key: string, message: string) => void;
      resetFieldError: (fields: string[]) => void;
    }) => Promise<void> | void;
    // ... other step properties
  }>;
  // ... other global options
}): void

setFieldError(key: string, message: string): void
  - Populates `errors.fields[key]` with the given message.

resetFieldError(fields: string[]): void
  - Resets error messages for the specified fields.
```

--------------------------------

### APIDOC: TairoSidebarContent Component

Source: https://tairo.cssninja.io/documentation/layouts/sidebar

API documentation for the TairoSidebarContent component, detailing its available slots.

```APIDOC
TairoSidebarContent:
  Slots:
    #default: {}
```

--------------------------------

### Open Panel (New usePanels Composable Method)

Source: https://tairo.cssninja.io/documentation/guides/migration

This Vue script illustrates the updated method for opening panels in Tairo V2. It imports a panel component and uses the `usePanels` composable to open it directly, allowing for typed props and handling of emitted values upon panel closure.

```vue
<script setup lang="ts">
import { MyPanelComponent } from '#components'

const { open } = usePanels()

async function onSomeEvent() {
  // open a panel using a component
  const emitted = await open(MyPanelComponent, {
    // ... typed panels props
  })

  // emitted contains the properties
  // passed to the `close` event from the panel component
  console.log('panel closed', emitted)
}
</script>
```

--------------------------------

### Vue Parent Component for Multi-step Form with `provideMultiStepForm`

Source: https://tairo.cssninja.io/documentation/guides/mutli-step-forms

Vue component (`my-form.vue`) demonstrating the use of `provideMultiStepForm` to initialize the multi-step form's state, define steps with their paths and metadata, and handle form submission. It also shows how to integrate `NuxtPage` for rendering current steps and `useFetch` for initial data loading with state reset.

```vue
<script setup lang="ts">
import type { MyFormData, MyFormStepMeta } from '~/types/my-form'

const initialState = ref<MyFormData>({
  // step 1
  email: '',
  password: '',
  passwordCheck: '',
  // step 2
  firstName: '',
  lastName: '',
  // step 3
  role: null,
})

const {
  reset,
  handleSubmit,
} = provideMultiStepForm<MyFormData, MyFormStepMeta>({
  initialState,

  async onSubmit(values) {
    console.log('Form submitted', values)
  },

  steps: [
    {
      to: '/my-form',
      meta: {
        name: 'Step 1',
        description: 'Login details'
      },
    },
    {
      to: '/my-form/my-step-2',
      meta: {
        name: 'Step 2',
        description: 'Account info'
      },
    },
    {
      to: '/my-form/my-step-3',
      meta: {
        name: 'Step 3',
        description: 'Account role'
      },
    },
    {
      to: '/my-form/review',
      meta: {
        name: 'Step 4',
        description: 'Review account creation'
      },
    },
  ],
})

// you can fetch data here and provide it to the form,
// as mutating the initialState won't trigger form state update,
// unless you call reset()
const { data } = useFetch<MyFormData>('/api/my-form-data')
watch(data, (value) => {
  if (value) {
    initialState.value = value
    reset()
  }
}, { immediate: true })
</script>

<template>
  <main>
    <MyFormHeader />

    <form @submit.prevent="handleSubmit">
      <div class="mb-8">
        <NuxtPage />
      </div>

      <MyFormActions />
    </form>
  </main>
</template>
```
Tokens:
Raw