Nuxt Editor Template

Notion-like WYSIWYG editor with AI-powered completions and real-time collaboration in Vue & Nuxt. Built with Nuxt UI and TipTap, showcasing the powerful UEditor component with advanced editing capabilities.

• Live demo
• Documentation

Features

• Rich Text Editing - Full formatting support with headings, lists, blockquotes, and code blocks
• Tables - Insert and edit tables with row/column controls and cell selection
• Bubble & Fixed Toolbars - Contextual toolbars that adapt to your selection
• Drag Handle - Easily reorder, duplicate, or delete content blocks
• Slash Commands - Type / to access quick insertion commands
• Image Upload - Custom image upload node powered by NuxtHub with Vercel Blob
• Mentions - @mention support with user suggestions
• Emoji Picker - Full GitHub emoji set with :emoji: syntax
• Markdown Support - Content type set to markdown for easy serialization
• AI-powered Features - Inline completions and text transformations powered by Vercel AI SDK
• Real-time Collaboration - Optional collaborative editing powered by PartyKit

Quick Start

1
npm create nuxt@latest -- -t ui/editor

Deploy your own

Setup

Make sure to install the dependencies:

1
pnpm install

AI Integration (Optional)

This template includes AI-powered writing assistance using the Vercel AI SDK and its useCompletion composable for streaming text generation with support for multiple providers through Vercel AI Gateway.

AI Features:

• Inline Completions - Trigger AI suggestions with ⌘J, accept with Tab
• Continue Writing - Extend your content from the cursor position
• Fix Spelling & Grammar - Automatically correct selected text
• Extend/Reduce Text - Make selected content longer or shorter
• Simplify - Rewrite complex text in simpler terms
• Summarize - Generate a summary of selected content
• Translate - Translate selected text to English, French, Spanish, or German

Set your AI provider configuration in .env:

1
# AI Configuration via Vercel AI Gateway (unified API for all providers)
2
AI_GATEWAY_API_KEY=<your-vercel-ai-gateway-api-key>

[!TIP] With Vercel AI Gateway, you don't need individual API keys for OpenAI, Anthropic, etc. The AI Gateway provides a unified API to access hundreds of models through a single endpoint with automatic load balancing, fallbacks, and spend monitoring.

Blob Storage (Optional)

This template uses NuxtHub Blob for image uploads, which supports multiple storage providers:

• Local filesystem (default for development)
• Vercel Blob (auto-configured when deployed to Vercel)
• Cloudflare R2 (auto-configured when deployed to Cloudflare)
• Amazon S3 (with manual configuration)

For Vercel Blob (used by default via @vercel/blob), assign a Blob Store to your project from the Vercel dashboard (Project → Storage), then set the token for local development:

1
BLOB_READ_WRITE_TOKEN=<your-vercel-blob-token>

For S3-compatible storage, set:

1
S3_ACCESS_KEY_ID=<your-access-key-id>
2
S3_SECRET_ACCESS_KEY=<your-secret-access-key>
3
S3_BUCKET=<your-bucket-name>
4
S3_REGION=<your-region>

Without configuration, files are stored locally in .data/blob during development.

Collaboration (Optional)

This template includes optional real-time collaboration powered by Y.js, a CRDT framework for building collaborative applications. This example uses PartyKit as the Y.js provider, but you can swap it for alternatives like Liveblocks or Tiptap Collaboration.

To enable collaboration with PartyKit:

1. Create and deploy a PartyKit server following the PartyKit Quickstart:

1
npm create partykit@latest
2
npx partykit deploy

1. Set your PartyKit host in .env:

1
NUXT_PUBLIC_PARTYKIT_HOST=your-project.username.partykit.dev

1. Add ?room=your-room-name to the URL to collaborate. All users with the same room name will edit together in real-time.

Without the environment variable or ?room= parameter, the editor works standalone without collaboration.

Development Server

Start the development server on http://localhost:3000:

1
pnpm dev

Production

Build the application for production:

1
pnpm build

Locally preview production build:

1
pnpm preview

Check out the deployment documentation for more information.