Nuxt Studio
A new experience to build content-driven website with Nuxt.
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
Copyright (c) NuxtLabs
