Agent skill

nuxt-studio

Use when working with Nuxt Studio, the self-hosted open-source CMS for Nuxt Content sites - provides visual editing, media management, Git-based publishing, auth providers, and AI content assistance

Stars 611
Forks 25

Install this agent skill to your Project

npx add-skill https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt-studio

SKILL.md

Nuxt Studio

Self-hosted, open-source CMS module for editing Nuxt Content websites in production.

When to Use

Working with:

  • Installing and configuring nuxt-studio module
  • Authentication providers (GitHub, GitLab, Google OAuth, SSO, custom)
  • Git provider setup (GitHub, GitLab, branch config)
  • Visual content editing (MDC components, YAML/JSON forms, frontmatter)
  • Media management (public dir, NuxtHub blob, S3, R2)
  • Publishing flow (draft layer, conflict detection, CI/CD rebuild)
  • AI-powered content assistance (Vercel AI Gateway)

For content collections/queries: use nuxt-content skill For NuxtHub storage/database: use nuxthub skill For Nuxt basics: use nuxt skill

Available Guidance

Read specific files based on current work:

  • references/configuration.md - Module setup, auth providers, Git providers, environment variables
  • references/live-editing.md - Visual editor, media management, MDC components, AI features
  • references/deployment.md - SSR requirements, Git publishing, branch strategies, CI/CD

Loading Files

Consider loading these reference files based on your task:

  • references/configuration.md - if installing, configuring auth/git providers, or setting env vars
  • references/live-editing.md - if working with content editor, media, components, or AI features
  • references/deployment.md - if deploying, configuring branches, or troubleshooting publish flow

DO NOT load all files at once. Load only what's relevant to your current task.

Key Concepts

Concept Purpose
Auth providers Control who can access Studio (GitHub, GitLab, Google, SSO)
Git providers Handle publishing commits to your repository
Draft layer IndexedDB-backed local storage for unpublished changes
Media manager Upload/browse files in /public or external blob storage
Visual editor TipTap-based WYSIWYG with MDC component support
Publishing Commits drafts to Git, triggers CI/CD rebuild

Quick Start

bash
npx nuxt module add nuxt-studio
ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content', 'nuxt-studio'],
  studio: {
    repository: {
      provider: 'github',
      owner: 'your-username',
      repo: 'your-repo',
      branch: 'main',
    },
  },
})
bash
# .env
STUDIO_GITHUB_CLIENT_ID=<client_id>
STUDIO_GITHUB_CLIENT_SECRET=<client_secret>

Access Studio at https://your-site.com/_studio (default route).

Official Documentation

Token Efficiency

Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.

Expand your agent's capabilities with these related and highly-rated skills.

onmax/nuxt-skills

pnpm

Use when managing Node.js dependencies with pnpm - install packages, configure monorepo workspaces, set up pnpm catalogs, resolve dependency conflicts with overrides, patch third-party packages, and configure CI pipelines for pnpm projects

611 25
Explore
onmax/nuxt-skills

nuxt-seo

Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.

611 25
Explore
onmax/nuxt-skills

ts-library

Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.

611 25
Explore
onmax/nuxt-skills

motion

Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt

611 25
Explore
onmax/nuxt-skills

vue

Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance

611 25
Explore
onmax/nuxt-skills

vite

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

611 25
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results