231 lines
4.1 KiB
Markdown
231 lines
4.1 KiB
Markdown
---
|
|
title: Installation
|
|
description: Get started with Nuxt UI Pro documentation template.
|
|
navigation:
|
|
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
|
|
::
|
|
|
|
```mdc
|
|
---
|
|
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"}
|
|
|
|
```css [app/assets/main.css]
|
|
@import "tailwindcss" theme(static);
|
|
@import "@nuxt/ui-pro";
|
|
```
|
|
|
|
```ts [app/app.config.ts]
|
|
export default defineAppConfig({
|
|
ui: {
|
|
colors: {
|
|
primary: 'sky',
|
|
colors: 'slate'
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
```vue [app/app.vue]
|
|
<template>
|
|
<UApp>
|
|
<NuxtPage />
|
|
</UApp>
|
|
</template>
|
|
```
|
|
|
|
```json [package.json]
|
|
{
|
|
"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"
|
|
}
|
|
}
|
|
```
|
|
|
|
```json [tsconfig.json]
|
|
{
|
|
"extends": "./.nuxt/tsconfig.json"
|
|
}
|
|
```
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui-pro'],
|
|
|
|
future: {
|
|
compatibilityVersion: 4
|
|
},
|
|
|
|
css: ['~/assets/main.css']
|
|
});
|
|
```
|
|
|
|
````md [README.md]
|
|
# 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:
|
|
|
|
```bash [Terminal]
|
|
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/`](https://content.nuxt.com/usage/content-directory) directory 🚀
|