Nuxt Studio

A new experience to build content-driven website with Nuxt.

• ✨  Release Notes
• ▶️ Play online
• 📖  Documentation

Features

• 👌  Zero configuration to start, works with any Nuxt 3 project
• 🪄  Write your Content with our Notion-like editor, powered by Milkdown
• 🎨  Edit your Design tokens with generated forms
• ⚙️  Define your project options
• 🚀  Works both in development and production with live preview

Installation

yarn add --dev @nuxthq/studio

Then, register the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxthq/studio'
  ]
})

Configuration

By default the Studio API is https://api.nuxt.studio. If you want to customise it, you can set the STUDIO_API environement variable.

# .env
STUDIO_API=https://dev-api.nuxt.studio

Usage

The module will expose the Studio UI in development on /_studio/.

Development

In this directory:

• Run yarn install.
• Copy ui/.env.example to ui/.env and adjust based on playground port.
• When using VS Code, press F5 to start the dev servers. Or to do it manually:
  • Run yarn play to start the playground, you can extends both content-wind or docus so far.
  • Run yarn ui on another terminal.
• Visit http://localhost:3100/_studio to start.

To develop the Nuxt Studio UI in your project, install @nuxthq/studio on your project and run nuxi dev in your project instead of yarn play.

License

• [ ] Define license

Copyright (c) NuxtLabs