Setup Nuxt Studio

Studio is a Nuxt Content plugin you can activate to use the visual CMS platform.

Content editors can benefit from a user-friendly interface including, among other things, editors to edit their Markdown, YAML or JSON files.

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

Authentication

The Studio admin is located on studio.content.nuxt.com. From there you can either login with GitHub or with Google. Both methods give you the same edition 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 live preview

Once created, your project URL must be set to enjoy all Studio features, especially the live preview of your website.

To enable the live preview, you just need to activate studio in the content configuration of your nuxt.config.ts file.

export default defineNuxtConfig({
  content: {
    studio: {
      enabled: true
    }
  }
})

Once deployed, you can ensure Studio has been activated by navigating to the /__studio.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 __studio.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:

1. Ensure the gitInfo field is set and accurate in the __studio.json file:

"gitInfo": {
  "name": "studio-front",
  "owner": "nuxtlabs",
  "url": "https://github.com/nuxtlabs/studio-front"
},

2. You can manually override this data by setting those configs in your nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    studio: {
      enabled: true,
      gitInfo: {
        name: 'Your repository name',
        owner: 'Your repository owner/organization',
        url: 'Your GitHub repository URL'
      }
    }
  }
})

3. By ensuring these fields are correctly set, you can resolve the Forbidden error and successfully enable your site preview on Nuxt Studio. If not, please contact us on the Discord server.