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 Editor 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

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

Deploy your own

Setup

Make sure to install the dependencies:

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. When deployed on Vercel, the AI Gateway is configured automatically.

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

For local development, set your API key in .env:

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. It 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 drivers:

• Local filesystem (default for development, stored in .data/blob)
• Vercel Blob (auto-configured when deployed to Vercel)
• Cloudflare R2 (when deployed to Cloudflare)
• Amazon S3 (with manual configuration)

For Vercel Blob, assign a Blob Store to your project from the Vercel dashboard (Project → Storage), then set the token for local development:

BLOB_READ_WRITE_TOKEN=<your-vercel-blob-token>

Note

See the NuxtHub Blob documentation for configuring other storage drivers.

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:

npm create partykit@latest
npx partykit deploy

2. Set your PartyKit host in .env:

NUXT_PUBLIC_PARTYKIT_HOST=your-project.username.partykit.dev

3. 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:

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Check out the deployment documentation for more information.

Renovate integration

Install Renovate GitHub app on your repository and you are good to go.