Installation
Learn how to install and configure the NOBEARS Nuxt UI layer in your Nuxt application.
NOBEARS Nuxt UI Layer is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
Setup
Install the NOBEARS Nuxt UI layer
pnpm add @nobears-front-end/nuxt-ui@latest
yarn add @nobears-front-end/nuxt-ui@latest
npm install @nobears-front-end/nuxt-ui@latest
bun add @nobears-front-end/nuxt-ui@latest
Extend the layer in your nuxt.config.ts
nuxt.config.ts
export default defineNuxtConfig({
extends: [
["@nobears-front-end/nuxt-ui", { install: true }],
]
})
Import and customize the css as you see fit
The first 2
@import statements are required inder order for the @nuxt/ui module to compile the css correctly.assets/css/main.css
@import "tailwindcss" source("../../../node_modules/@nobears-front-end/nuxt-ui");
@import "@nuxt/ui";
/* Customize the theme as you see fit */
@theme {
--font-sans: "Inter", sans-serif;
}
It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:
settings.json
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
},
"tailwindCSS.classAttributes": ["class", "ui"],
"tailwindCSS.experimental.classRegex": [
["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]
Wrap your app with the UApp component
app.vue
<template>
<UApp>
<NuxtPage />
</UApp>
</template>