estel_docs/content/1.简单文档/2.installation.md

title, description, navigation

title	description	navigation
Installation	Get started with Nuxt UI Pro documentation template.	icon lucide-download

::ProseImg{src="https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png"} ::

::stack ::div{class="p-6 text-3xl font-bold"} ✨ shadcn-docs-nuxt ::

---
title: Installation
description: How to install shadcn-docs-nuxt in your app.
icon: lucide:play
---

## Using the starter template

:read-more{title="Installation" to="/getting-started/installation"}

::card

title: Components icon: lucide:box

See MDC components provided by shadcn-docs-nuxt. :: ::

::field-group ::field{name="withDefault" type="boolean" defaultValue="true"} A field with a default value. :: ::field{name="requiredField" type="boolean" required} A required field. :: ::field{name="clear (path?: string)" type="void"} Clears form errors associated with a specific path. If no path is provided, clears all form errors. :: ::field{name="getErrors (path?: string)" type="FormError[]"} Retrieves form errors associated with a specific path. If no path is provided, returns all form errors. :: ::field{name="setErrors (errors: FormError[], path?: string)" type="void"} Sets form errors for a given path. If no path is provided, overrides all errors. :: ::field{name="errors" type="Ref<FormError[]>"} A reference to the array containing validation errors. Use this to access or manipulate the error information. :: :: ::code-tree{defaultValue="nuxt.config.ts"}

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
});

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui-pro": "3.0.0-alpha.10",
    "nuxt": "^3.15.1"
  },
  "devDependencies": {
    "typescript": "^5.7.2",
    "vue-tsc": "^2.2.0"
  }
}

{
  "extends": "./.nuxt/tsconfig.json"
}

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],

  future: {
    compatibilityVersion: 4
  },

  css: ['~/assets/main.css']
});

# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

::

::tip{target="_blank" to="https://content.nuxt.com/templates/docs"} Use this template on Nuxt Studio and start your documentation in seconds. ::

Quick Start

You can start a fresh new project with:

npx nuxi init -t github:nuxt-ui-pro/docs

or create a new repository from GitHub:

1. Open https://github.com/nuxt-ui-pro/docs
2. Click on Use this template button
3. Enter repository name and click on Create repository from template button
4. Clone your new repository
5. Install dependencies with your favorite package manager
6. Start development server

That's it! You can now start writing your documentation in the content/ directory 🚀