VerifiedPlugin
Documentation
docus
Write beautiful documentations with Nuxt and Markdown.
1 skill
@nuxt-contentContent
Plugin
nuxt-studio
![npm version][npm-version-href] ![npm downloads][npm-downloads-href] ![License][license-href] Visual edition in production for your Nuxt Content website.
Plugin Signal70/100Solid
maintained96
capable23
documented100
adopted61
Install
$ npx -y skills add nuxt-content/nuxt-studio --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
708
Stars
138
Forks
Active
Maintenance
TypeScript
Language
MIT
License
3h ago
Last commit
11mo ago
Created
Repo: nuxt-content/nuxt-studio
What's inside
Skills
2/make-content-editableConverts hardcoded Vue components in a Nuxt Content markdown file into slot-based, Studio-editable MDC components. Use when a user wants their Nuxt Content page to be visually editable in Nuxt Studio's TipTap editor./migrate-mdc-to-comarkPort a legacy MDC-based PR onto the new comark-based `main`. Use when a contributor's PR was opened against the old `@nuxtjs/mdc` API (any commit before `feat(mdc): comark migration #355`) and now needs to be rebased / merged with the current Nuxt Studio main branch, which uses
README
1Nuxt Studio
Visual edition in production for your Nuxt Content website.
Originally offered as a standalone premium platform, Studio has evolved into a free, open-source, and self-hostable Nuxt module. Enable your entire team to edit website content right in production.
https://github.com/user-attachments/assets/39bf4250-e72b-45aa-bf6d-9441a38cb2d5
Current Features
- 💻 Monaco Code Editor - Code editor for enhanced Markdown with MDC syntax, YAML, and JSON
- ✨ TipTap Visual Editor - Markdown editor with MDC component support (default mode)
- 📝 Form-based Editor - Edit YAML/JSON files and frontmatter with auto-generated forms based on collection schemas
- 🎨 Vue Component Props Editor - Visual interface for editing Vue component props directly in the editor
- 🧠 AI-powered content suggestions - Plug and play DX with the Vercel AI Gateway, let AI help you shape your content.
- 🔄 Real-time Preview - See your changes instantly on your production website
- 🔐 Multi-provider Authentication - Secure OAuth-based login with GitHub, GitLab, and Google
- 🔑 Custom Authentication - Utilities for implementing your own auth flow (password, SSO, LDAP)
- 📝 File Management - Create, edit, delete, and rename content files (
content/directory) - 🖼️ Media Management - Centralized media library with support for JPEG, PNG, GIF, WebP, AVIF, SVG, and more
- 🌳 Git Integration - Commit changes directly from your production website and just wait your CI/CD pipeline to deploy your changes
- 🚀 Development Mode - Directly edit your content files and media files in your local filesystem using the module interface
- 🌍 25 Languages - Full i18n support (AR, BG, BN, CS, DE, EN, ES, FA, FI, FR, ID, IT, JA, KO, NB-NO, NL, NN-NO, PL, PT-BR, RU, TH, UA, ZH, ZH-TW)
Future Features:
- 📂 Collections view - View and manage your content collections in a unified interface
- 🖼️ Media optimization - Optimize your media files in the editor
- 🤖 AI Content Assistant — Receive smart, AI-powered suggestions to enhance your content creation flow
- 💡 Community-driven Features — Have an idea? Share your suggestions to shape the future of Nuxt Studio
Resources
Quick Setup
1. Install
Install the module in your Nuxt application:
npx nuxi module add nuxt-studio
2. Dev Mode
🚀 That's all you need to enable Studio locally!
Run your Nuxt app and you will see a floating button on bottom left for editing your content. Any file changes will be synchronized in real time with the file system.
Note: The publish system is only available in production mode. Use your classical workflow (IDE, CLI, GitHub Desktop...) to publish your changes locally.
3. Configure Production
Add it to your nuxt.config.ts and configure your repository:
export default defineNuxtConfig({
modules: [
'@nuxt/content',
'nuxt-studio'
],
studio: {
// Studio admin route (default: '/_studio')
route: '/_studio',
// Git repository configuration (owner and repo are required)
repository: {
provider: 'github', // 'github' or 'gitlab'
owner: 'your-username', // your GitHub/GitLab username or organization
repo: 'your-repo', // your repository name
branch: 'main', // the branch to commit to (default: main)
}
}
})
4. Production Mode
To enable publishing directly from your production website, you need to configure:
Git Provider
Configure where your content is stored (GitHub or GitLab repository). See the repository configuration above.
Auth Provider
Configure how users authenticate to access Studio. Choose from GitHub, GitLab, Google OAuth, or custom authentication.
# Example with GitHub OAuth
STUDIO_GITHUB_CLIENT_ID=<your_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_client_secret>
Deployment
Nuxt Studio requires server-side routes for authentication. Your site must be deployed on a platform that supports SSR using nuxt build.
Open Studio
Once deployed, navigate to your configured route (default: /_studio) and authenticate to start editing.
Configuration Options
export default defineNuxtConfig({
studio: {
// Studio admin login route
route: '/_studio', // default
// Git repository configuration
repository: {
provider: 'github', // 'github' or 'gitlab' (default: 'github')
owner: 'your-username', // your GitHub/GitLab owner (required)
repo: 'your-repo', // your repository name (required)
branch: 'main', // branch to commit to (default: 'main')
rootDir: '', // subdirectory for monorepos (default: '')
private: true, // request access to private repos (default: true)
},
}
})
Contributing
You can start contributing by cloning the repository and using the playground in dev mode (set dev option to true).
If you want to contribute with production mode you must create a local GitHub OAuth App (pointing to
http://localhost:3000as callback URL).
Development Setup
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Build the app and service worker
pnpm prepack
# Terminal 1: Start the playground
pnpm dev
# Terminal 2: Start the app dev server
pnpm dev:app
# Login at http://localhost:3000/admin
Project Structure
studio/
├── src/
│ ├── app/ # Studio editor Vue app
│ └── module/ # Nuxt module
├── playground/ # Development playground
│ ├── docus/ # Docus example
│ └── minimal/ # Minimal example
Testing
You can run a global command to test all needed check at once.
# Global verify running all needed commands
pnpm verify
Or run them one by one.
# Run tests
pnpm test
# Run type checking
pnpm typecheck
# Run linter
pnpm lint
Roadmap
✅ Phase 1 (Completed)
- Monaco code editor
- TipTap visual editor with MDC support (default mode)
- Editor mode switching (code ↔ visual/form)
- Form-based editor for YAML/JSON and frontmatter (schema-based)
- File operations (create, edit, delete, rename)
- Media management with visual picker
- Enhanced component slot editing
- GitHub authentication
- GitLab provider support
- Google OAuth authentication
- Development mode
- Git integration
- Real-time preview
- Internationalization (25 languages)
- Custom authentication utilities
- Vue Component props editor (visual interface)
- Span-style text formatting with toolbar button
- Binding extension for component prop editing
🔮 Future
- Advanced conflict resolution
- Pull request generation (from a branch to the main one)
- AI-powered content suggestions
- Media optimization
Links
- 📖 Documentation
- 🐛 Report a Bug
- 💡 Feature Request
- 🗨️ Discussions
- 🆇 Twitter
- 🦋 Bluesky
License
Published under the MIT license.
File tree
417nuxt-content/nuxt-studioView on GitHub
.editorconfig
.env.example
.github/
ISSUE_TEMPLATE/
bug-report.yml
config.yml
feature-request.md
stale.yml
workflows/
module.yml
release.yml
.gitignore
.release-it.json
.vscode/
settings.json
CHANGELOG.md
CLAUDE.md
docs/
.gitignore
app/
app.config.ts
assets/
css/
main.css
components/
AppHeaderCTA.vue
AppHeaderLogo.vue
BrowserFrame.vue
CtaBackground.vue
PmInstall.vue
UInputCopy.vue
plugins/
vercel.client.ts
content/
1.introduction.md
2.setup.md
3.git-providers.md
4.auth-providers.md
5.content.md
6.medias.md
7.ai.md
9.advanced.md
index.md
nuxt.config.ts
package.json
public/
favicon.ico
home/
cta-dark.svg
cta-light.svg
features-dark.svg
features-light.svg
preview-schema.png
studio/
code-editor.webp
form-hints.png
github-sync.webp
json-yml-forms.webp
visual-markdown-editor.webp
video-thumbnail.jpg
README.md
tsconfig.json
eslint.config.mjs
license.md
package.json
playground/
docus/
.env.example
app/
app.config.ts
components/
Authors.vue
pages/
authors.vue
route-prefix/
[...slug].vue
content/
content.config.ts
1.getting-started/
.navigation.yml
2.introduction.md
3.installation.md
4.project-structure.md
5.studio.md
6.migration.md
7.essentials/
.navigation.yml
1.components.md
1.markdown-syntax.md
2.code-blocks.md
2.images-embeds.md
3.pages/
authors.md
authors/
atinux.yml
farnabaz.md
larbish.json
fs-prefix/
hello.md
index.md
nuxt.config.ts
package.json
public/
developers/
atinux.jpeg
farnabaz.jpeg
larbish.jpeg
favicon.ico
landscapes/
mountains.webp
server/
routes/
login.ts
tsconfig.json
minimal/
app/
app.vue
content/
content.config.ts
index.md
nuxt.config.ts
package.json
public/
favicon.ico
mountains.webp
tsconfig.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
skills/
make-content-editable/
references/
mdc-syntax.md
nuxt-components.md
nuxt-studio.md
nuxt-ui-components.md
tailwind-purging.md
vue-slots.md
SKILL.md
migrate-mdc-to-comark/
references/
porting-guide.md
test-migration.md
SKILL.md
src/
app/
mock/
mdc-import.ts
src/
app.vue
assets/
comark.svg
css/
main.css
tiptap.css
components/
AppBanner.vue
AppError.vue
AppFooter.vue
AppHeader.vue
AppLayout.vue
AppResizeHandle.vue
content/
ContentCard.vue
ContentCardForm.vue
ContentCardReview.vue
editor/
ai/
ContentEditorAILanguageSelection.vue
ContentEditorAIValidation.vue
ContentEditor.vue
ContentEditorCode.vue
ContentEditorConflict.vue
ContentEditorDiff.vue
ContentEditorForm.vue
ContentEditorTipTap.vue
ContentEditorTipTapDebug.vue
form/
FormInput.vue
FormSchemaBased.vue
FormSection.vue
input/
InputArray.vue
InputBoolean.vue
InputDate.vue
InputIcon.vue
InputMedia.vue
InputNumber.vue
InputObject.vue
InputText.vue
InputTextarea.vue
InputWrapper.vue
header/
HeaderMain.vue
HeaderReview.vue
HeaderSuccess.vue
media/
MediaCard.vue
MediaCardForm.vue
MediaCardReview.vue
MediaEditor.vue
MediaEditorAudio.vue
MediaEditorImage.vue
MediaEditorVideo.vue
shared/
Collapsible.vue
ComarkFormattingBanner.vue
CopyButton.vue
item/
ItemActionsDropdown.vue
ItemActionsToolbar.vue
ItemBadge.vue
ItemBreadcrumb.vue
ItemCard.vue
ItemCardForm.vue
ItemCardReview.vue
ItemTree.vue
media-picker/
ImagePreview.vue
VideoPreview.vue
ModalMediaPicker.vue
ResizableElement.vue
tiptap/
extension/
TiptapExtensionBinding.vue
TiptapExtensionCodeBlock.vue
TiptapExtensionElement.vue
TiptapExtensionFrontmatter.vue
TiptapExtensionImage.vue
TiptapExtensionImagePicker.vue
TiptapExtensionInlineElement.vue
TiptapExtensionSlot.vue
TiptapExtensionSpanStyle.vue
TiptapExtensionUCallout.vue
TiptapExtensionUniqueDefaultSlot.vue
TiptapExtensionVideo.vue
TiptapExtensionVideoPicker.vue
TiptapComponentProps.vue
TiptapLinkPopover.vue
TiptapSpanStylePopover.vue
TiptapTableGrips.vue
composables/
createSharedComposable.ts
useAI.ts
useContext.ts
useDraftBase.ts
useDraftDocuments.ts
useDraftMedias.ts
useError.ts
useGitProvider.ts
useHooks.ts
useMonaco.ts
useMonacoDiff.ts
useSidebar.ts
useStudio.ts
useStudioState.ts
useTableGrips.ts
useTiptapEditor.ts
useTiptapEditorAI.ts
useTree.ts
useUI.ts
locales/
ar.json
bg.json
bn.json
ckb.json
cs.json
de.json
en.json
es.json
fa.json
fi.json
fr.json
hu.json
id.json
it.json
ja.json
km.json
ko.json
nb-no.json
nl.json
nn-no.json
pl.json
pt-br.json
ru.json
sk.json
th.json
ua.json
vi.json
zh-tw.json
zh.json
localizationRules/
index.ts
main.ts
pages/
ai.vue
content.vue
error.vue
media.vue
review.vue
success.vue
service-worker.ts
shared.ts
types/
ai.ts
config.ts
content.ts
context.ts
database.ts
draft.ts
editor.ts
file.ts
git.ts
index.ts
item.ts
media.ts
tree.ts
user.ts
utils/
ai/
completion.ts
transform.ts
colors.ts
comark.ts
content.ts
context.ts
data.ts
draft.ts
emoji.ts
file.ts
form.ts
icon.ts
media.ts
monaco/
index.ts
mdc-compilation.ts
theme-dark.ts
theme-light.ts
object.ts
providers/
github.ts
gitlab.ts
index.ts
null.ts
storage.ts
string.ts
styles.ts
tiptap/
comarkToTiptap.ts
editor.ts
extensions/
ai-completion.ts
ai-transform.ts
binding.ts
callout.ts
code-attributes.ts
code-block.ts
custom-placeholder.ts
element.ts
frontmatter.ts
image-picker.ts
image.ts
inline-element.ts
slot-drop-guard.ts
slot.ts
span-style.ts
table.ts
video-picker.ts
video.ts
handlers.ts
input-rules.ts
props.ts
studio-extensions.ts
tiptapToComark.ts
tree.ts
vite-env.d.ts
test/
integration/
actions.test.ts
component-array-props-roundtrip.test.ts
publish.test.ts
table.test.ts
tiptap.test.ts
mocks/
composables.ts
database.ts
document.ts
draft.ts
editor-state.ts
form.ts
git.ts
host.ts
media.ts
props.ts
schema.ts
tree.ts
setup.ts
unit/
composables/
draft-base.test.ts
... 125 moreMore Flows by @nuxt-content.
@nuxt-contentFAQ
nuxt-studio is a Claude Code plugin with 2 hand-picked skills for content work, indexed on Flowy. Install it with the command on its page. It includes make-content-editable, migrate-mdc-to-comark. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is nuxt-studio?
- ![npm version][npm-version-href] ![npm downloads][npm-downloads-href] ![License][license-href] Visual edition in production for your Nuxt Content website.
- How do I install nuxt-studio?
- Run these in Claude Code: npx -y skills add nuxt-content/nuxt-studio --agent claude-code. Then prompt normally.
- Does nuxt-studio auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is nuxt-studio free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.