UI
Gives every module's screens the same headings, cards, tables, forms and toasts, on top of Nuxt UI.
UI makes screens from different modules look like one app. It has the headings, cards, tables, inputs and toasts of every admin and account page. Admin, Account and the feature modules install it for you.
The package is @frigear-nu/ui. Its components and composables are auto-imported.
What you get
- Components (on by default): page components, the App shell and form inputs.
- Composables and helpers (on by default): confirmations, toasts, data loading, formatting and tables.
- Translations (opt-in, with
@nuxtjs/i18n): shareddaandenstrings that every module reuses.
ServerClientMobile
Installed for you:
@frigear-nu/module-kit.You add:@nuxt/ui.Optional:@nuxtjs/i18n and nuxt-monaco-editor (for MonacoCodeEditor).Quick setup
Install UI
Skip this when another module installs UI.
pnpm add @frigear-nu/ui @nuxt/ui
Add it to nuxt.config.ts
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui', '@frigear-nu/ui'],
})
What you should see:
<PageHeading title="Orders" /> renders a heading without an import.Options
The module has no options.
Module pages
| Page | What it covers | For |
|---|---|---|
| Page components | Headings, tabs, cards, tables and forms. | Page authors |
| App shell | The admin dashboard layout. | Module authors |
| Form inputs | Money, date, tag and translated inputs. | Page authors |
| Composables and helpers | Confirmations, data loading, formatting and tables. | Page authors |
| UI reference | Import paths, helpers and translation keys. | Page authors |