Start a clean project

This guide will help you setup Tairo in your Nuxt project.

Create a new Nuxt project

This command will create a new Nuxt project with minimal configuration and dependencies.

pnpm create nuxt <app>

This will create <app> folder in your current directory containing an empty Nuxt project.

You can now navigate to the newly created project folder and install dependencies:

cd <app>

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

Enable Nuxt 4 compatibility

This optionnal step allows you to use the latest version of Nuxt with Tairo.

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

Useful resources:

• New Project on nuxt.com
• Testing Nuxt 4 on nuxt.com

Setup Tailwind CSS

Create the main.css file where you will import Tailwind CSS and Shuriken UI styles.

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

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

@theme {
  /* Your custom theme */
}

Useful resources:

• Theming on shurikenui.com

Load the Tairo layer

In order to make use of the Tairo components, you need to extends from Tairo layer. As tairo is a private repository, npm package is not available.

Option 1: Embed in your project

This is the simpliest way to use Tairo, but you will not be able to update it easily.

1. Download the source code either from themeforest.net, cssninja.io or clone the repository from Github.
2. Copy the layers/tairo folder to your project, keeping the same structure. You don't need to add it to nuxt.config.ts file, as Nuxt will automatically load it.

That's it! You can now install the dependencies and run the development server.

Option 2: Link with Github

This step requires you to have unlocked your github access and have a github personal access token with the repo scope for classic token, or read access to the Tairo repository for fine-grained access token.

The token is only need when installing. It is also needed on CI/CD environments.

1. Add your Github token to your environment variables.
   <app>/.env

   bash

   GIGET_AUTH=ghp_your_github_token
   

   Expand code
2. Link your project to the Tairo layers by adding them to the nuxt.config.ts file.
   The version 2.0.0 is the latest stable version of Tairo, you can also use the edge version which contains the current development version (useful for testing new features).
   <app>/nuxt.config.ts

   ts

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

   Expand code

Troubleshooting

If you forgot to set the GIGET_AUTH environment variable, if your token does not allow access to Tairo repository, or if you set a non existing version, you will see an error message like this:

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

Useful resources:

• Github Access on cssninja.io
• Manage Access Tokens on docs.github.com

Install dependencies

Additionnal dependencies are required to use Tairo with Nuxt, add them to your project.

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

Run the development server

Start nuxt from the current folder and open the frontend in your browser.

pnpm dev