Documentation
Documentation Hub

Option 1: New nuxt project with github layers

The recommended way to start a new project with Tairo.

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.

Create a new Nuxt project (or use an existing one)

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

bash

Add the Tairo layers from github

Link your project to the Tairo layers by adding them to the nuxt.config.ts file. The version v1.5.1 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).

ts

Add your Github token

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

bash

Install dependencies with your package manager

In previous step, you should have chosen a package manager, use it to install the dependencies.

bash

Run the development server

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

bash
Once you are done, you can stop the development server by pressing Ctrl+C (or ⌘+C on macOS) in your terminal.

Done!

You are now ready to edit your nuxt app! Continue by adding a layout.

In the documentation, <app> in paths refers to the root of your project.

If you forgot to set the GITHUB_TOKEN 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:

bash

Useful resources:

Option 2: Install and run from the source

This is the quickest way to start a project with Tairo when you want to use the source code directly. It's also the way to go if you want to run the demo app.

Download the source code

Either from themeforest.net, cssninja.io or clone the repository from Github. The project structure should look like this:

bash

Update the tsconfig

By default, the tsconfig.json file is set to extend the .demo folder. Update it to extend the .app folder. If you are starting from the demo, you can keep it as is.

json

Install dependencies with pnpm

When using Tairo from source, pnpm is required in order to work. This is because we rely on the pnpm-workspace.yaml to manage the dependencies between layers.

bash
Read more about pnpm and workspace.

Run the development server

Start nuxt from the <app>/ folder and open the frontend in your browser.

bash
Once you are done, you can stop the development server by pressing Ctrl+C (or ⌘+C on macOS) in your terminal.

Done!

You are now ready to edit your nuxt app! Continue by adding a layout.

In the documentation, <app> in paths refers to the <app>/ folder.

Demo app overview

The demo app is a separate app layer. It's a good starting point to see how Tairo is used to build a dashboard application.

•Demo project structure

The Tairo demo is split into different nuxt layers. This allow to separate the marketing part from the documentation part, and to enable or disable features easily.

bash

By default, documentation layer is disabled.
You can set the ENABLE_DOCUMENTATION=true environment variable in the .demo/.env file to enable it before starting the demo server. This will generate the components documentation from the source code (via nuxt-component-meta). Note that this feature is heavy, requires more memory and can slow down the development server.

•Start the demo development server

To start the project from the .demo/ instead of the <app>/ folder, run this command:

bash
Don't forget to update the tsconfig.json to extend the .demo folder.