nuxt-quickstart

PrimeUI Pro Text Editor Nuxt Quickstart

A minimal Nuxt 4 application for starting with PrimeUI Pro Text Editor for Vue. It contains one editable document, application-owned PrimeOne toolbar parts, and a lightweight topbar and footer with light and dark modes.

Run the App

corepack pnpm install
cp .env.example .env
corepack pnpm dev

Set your PrimeUI Pro license key in .env:

NUXT_PUBLIC_PRIMEUI_LICENSE=your-license-key

What the Example Shows

• Text Editor, PrimeVue, Aura, styles, icons, and license setup
• A controlled HTML document using v-model
• Formatting, headings, lists, checklists, and history controls
• Editable PrimeOne toolbar parts using PrimeVue Select and Tooltip
• A persistent light and dark mode switch

Project Map

app/
├── components/primeui/texteditor/   Keep or edit: application-owned PrimeOne UI parts
├── components/shell/                Optional: quickstart topbar and footer
├── composables/useAppTheme.ts       Optional: light and dark mode state
├── demo/texteditor/                 Replace: sample document and editor composition
├── layouts/default.vue              Optional: lightweight quickstart shell
├── pages/index.vue                  Replace: thin route for the example
└── plugins/primeui-license.client.ts
                                       Keep: PrimeUI Pro license registration

Text Editor and PrimeVue setup also lives in package.json and nuxt.config.ts. Replace app/demo/texteditor/TextEditorDemo.vue with your document and persistence logic, then delete app/demo/texteditor after it is no longer imported.

PrimeOne UI Parts

The toolbar parts are copied into and owned by this application. Regenerate the complete PrimeOne set with:

corepack pnpm dlx @primeui/cli add texteditor --framework vue --ui primeone --output-dir ./app/components/primeui

Commands

corepack pnpm dev
corepack pnpm typecheck
corepack pnpm build
corepack pnpm preview

Documentation

• Text Editor overview
• Text Editor setup
• PrimeUI Pro