Setup Nuxt Studio

Studio is an intuitive CMS interface to edit your Nuxt Content websites.

It takes advantage of the Preview API included in Nuxt Content to propose the best editing experience for your content files. Editors can benefit from a user-friendly interface to edit their Markdown, YAML or JSON files.

Developers can customize the editing experience and provide tools to the editor who can focus on content without requiring any technical expertise.

Authentication

The Studio admin is located on nuxt.studio. From there you can either login with GitHub or with Google. Both methods give you the same editing rights but since Studio is synchronized with GitHub, the repository import must be handled by a GitHub user.

Connect your Nuxt Content Repository

Once you are logged in the admin, you have the possibility to import your Nuxt Content repository from the interface.

The only requirement is to host your repository on GitHub. From the interface, connect to our GitHub app, you'll be then able to link a GitHub repository to your Studio project.

Once the project is created, you can start editing your files with the Studio editors and publish your changes.

Enable the Full Editing Experience

To unlock the complete range of features in Studio, make sure your project URL is properly configured in the deployment section.

This will enable all Studio features including:

• Live preview of your website: instantly see changes reflected on your site as you work.
• Dynamic form generation: Automatically generate forms to edit your files based on your Nuxt Content collections.
• Enhanced markdown editors: enjoy an improved editing experience, including the ability to list and integrate Vue components that you’ve exposed.
• Automatic app configuration: generate application configurations based on the schema you’ve defined.

To be able to set your URL in Studio, you just need to set the Preview API in the content configuration of your nuxt.config.ts file.

export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio'
    }
  }
})

Once deployed, you can ensure the Preview API has been activated by navigating to the /__preview.json page on your site. This metadata page is automatically generated by the Content module and must be accessible to connect your URL in the self-hosted section of Studio.

Troubleshooting

The __preview.json file is generated but you encounter a Forbidden error: invalid property check when setting your URL in the self-hosted section, follow these steps:

"gitInfo": {
  "name": "content",
  "owner": "nuxt",
  "url": "https://github.com/nuxt/content"
},

export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio',
      gitInfo: {
        name: 'Your repository name',
        owner: 'Your repository owner/organization',
        url: 'Your GitHub repository URL'
      }
    }
  }
})