Welcome to

Start your first page

Welcome to the Tairo app starter. You are here because you ran the pnpm dev command in your terminal. Follow the instructions below to configure the project and start building your first page.

Online demo

Nuxt documentation

Github Access

Discord Server

Online documentation

Reviewing Tairo's documentation is essential to get a grasp on all basic concepts used in this project and to get some code examples that you can immediately paste in.

Getting started

Enable a layout in .app/nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    '../layers/tairo',
    '../layers/tairo-layout-sidebar',
  ]
})

Set default layout in .app/layouts/default.vue

<template>
  <TairoSidebarLayout>
    <slot />
  </TairoSidebarLayout>
</template>

Define your app settings in .app/app.config.ts(logo, name, sidebars, panels, ...)

export default defineAppConfig({
  "title": "Tairo Quick Starter",
  "error": {
    "logo": {
      "component": "TairoLogo",
      "resolve": true,
      "props": {
        "class": "text-primary-500 mx-auto h-40 p-6"
      }
    }
  },
  "panels": []
})

Create your first page .app/pages/index.vue

<script setup lang="ts">
definePageMeta({
  title: 'My page',
})
</script>

<template>
  Hello Tairo!
</template>

Customize tailwind settings in .app/tailwind.config.ts(colors, fonts, ...)

import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'

export default withShurikenUI({
  content: [],
  theme: {
    extend: {
      colors: {
        primary: colors.red,
        muted: colors.stone,
      }
    }
  }
})

Continue learning with the Online documentation