Get Started

Create or import your Nuxt Content website on Nuxt Studio

Start editing and managing your Nuxt Content project on Nuxt Studio by following these few easy steps.

No projects found page

As the Pro version of Nuxt Content, Nuxt Studio has been optimized for Nuxt content based website.

If you're using the Content module then your project is compatible by default and can be edited with Studio without any additional configuration.

Even if Studio is optimized for Nuxt Content projects, the only real requirement is to have a content folder in your project with Markdown files in it. This is enough to setup a project on Studio and to start editing and publishing your files with the platform.

Authentication

There are two different authentication methods. You can either login with GitHub or with Google. Both methods give you the same edition rights but since Studio is synchronized with GitHub, some features are specific to GitHub users, especially project creation (synchronized with a GitHub repository).

Since a Google user can not create a project he has to join a team with existing projects to edit them.

Create your project

Once you are logged in Studio, you have the possibility to create a project from the interface.

Two options are available, you can either start from an existing repository or use one of our templates.

The only requirement at that point is to connect to our GitHub app, you'll be then able to link a GitHub repository to your project.

Once the project is created, you can start editing your files with the Studio editor 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.

You can deploy your project yourself or use our GitHub Pages deployment.

If you are using our GitHub Pages deployment, we will handle all the requirements for you. However, if you have a self-hosted project, please follow the guidelines below.

To enable the live preview, you need to add our Studio Module to your project. You can do this by cloning your repository and adding the module from an external IDE.

Open a terminal within your repository folder and execute the following command:

npm i -D @nuxthq/studio

Once installed, add the module to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@nuxthq/studio'
  ]
})

To ensure your website is compatible with Nuxt Studio, navigate to the /__studio.json page on your site. This metadata page is automatically generated by the Studio module and must be accessible to connect your URL in the self-hosted section of Nuxt Studio.

Troubleshooting

You're __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:
https://your-website.com/__studio.json
"gitInfo": {
  "name": "studio-front",
  "owner": "nuxtlabs",
  "url": "https://github.com/nuxtlabs/studio-front"
},
This information should be populated automatically in most cases. We support most popular providers (Vercel, Netlify, etc.), but if you're using a non supported provider or a custom one, it may not be fetched correctly.
  1. You can manually override this data by setting those configs in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxthq/studio'
  ],
  studio: {
    gitInfo: {
      name: 'Your repository name',
      owner: 'Your eepository owner/organization',
      url: 'Your GitHub repository URL'    
    }
  }
})
  1. 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.