Utilisation
Application Nuxt Exemple
app/assets/main.css
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
app/app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
app/app.vue
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
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"
}
}
tsconfig.json
{
"extends": "./.nuxt/tsconfig.json"
}
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
README.md
# Starter Minimal Nuxt 3
Consultez la [documentation Nuxt 3](https://nuxt.com/docs/getting-started/introduction) pour en savoir plus.
## Configuration
Assurez-vous d'installer les dépendances :
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Serveur de Développement
Démarrez le serveur de développement sur `http://localhost:3000` :
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Construisez l'application pour la production :
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Prévisualisez localement la build de production :
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Consultez la [documentation de déploiement](https://nuxt.com/docs/getting-started/deployment) pour plus d'informations.
::code-tree{defaultValue="nuxt.config.ts" title="Application Nuxt Exemple"}
```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]
# Starter Minimal Nuxt 3
Consultez la [documentation Nuxt 3](https://nuxt.com/docs/getting-started/introduction) pour en savoir plus.
## Configuration
Assurez-vous d'installer les dépendances :
```bash
# npm
npm install
```
## Props
::field-group
:field{name="defaultValue"}[Default open file]
:field{name="title" type="string"}[Code tree title]
:field{name="height" type="number" default-value="400"}
::