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.
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).
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
when setting your URL in the self-hosted section, follow these steps:
- 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"
},
- If necessary, manually override this data by setting the following environment variables:
GITHUB_REPOSITORY_OWNER="The owner for the GitHub repository"
GITHUB_REPOSITORY="the name of the GitHub repository"
REPOSITORY_URL="the url of the repository on GitHub"
- By ensuring these fields are correctly set, you can resolve the
Forbidden error
and successfully connect your site to Nuxt Studio. If not please contact us on the Discord server.
Introduction to Nuxt Studio - The CMS for Nuxt
Studio is a Git-based CMS for Nuxt Content websites, providing an intuitive interface to edit your Markdown files and publish your changes to GitHub.
Edit your Nuxt Content website with our editors
Pick your favorite Nuxt Studio CMS editor to manage your content and your medias, choose between our Markdown editor and our visual editor.