Create or import your Nuxt Content website on Nuxt Studio

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.

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).

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.

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:

"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({
  modules: [
    '@nuxthq/studio'
  ],
  studio: {
    gitInfo: {
      name: 'Your repository name',
      owner: 'Your eepository 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.