Nuxt•2w ago

Nuxt Studio Local Development

So I understand Nuxt Studio expects a github repo (why no support for gitlab etc ;( ) but I need to test certain things related to studio experience before committing and pushing changes to the repo. How should I go about this. docs mention this might be possible but not the exact way

17 Replies

kapa.ai•2w ago

Hi @SamKaizen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt Studio is designed to work with GitHub repositories and currently does not support other platforms like GitLab. This is because Studio relies on deep integration with the GitHub API and a dedicated GitHub App for features like real-time synchronization, content editing, and publishing changes directly from the Studio interface. The documentation confirms that the only requirement is to host your repository on GitHub, and all synchronization is handled via the GitHub App, which requires admin or owner permissions on the repository Real time synchronization between Studio and GitHub. For local development and testing of the Studio experience before pushing changes to GitHub, the documentation does not provide a direct workflow for a fully local Studio experience. However, it does mention that to unlock the full Studio feature set (including live preview and dynamic editing), you need to: 1. Set up the preview.api in your nuxt.config.ts to point to <https://api.nuxt.studio.> 2. Deploy your site (even if just locally or on a preview environment) and ensure the /__preview.json endpoint is accessible. 3. Connect your deployed site’s URL in the Studio interface for live preview and editing Enable the Full Editing Experience. If you want to test changes before pushing to GitHub, the recommended approach is: - Run your Nuxt Content project locally with the correct preview.api configuration. - Expose your local server to the internet using a tool like ngrok or similar, so Studio can access your local /__preview.json endpoint. - Connect this public URL in the Studio self-hosted section to test the editing and preview features as if it were deployed. This setup allows you to experience most Studio features locally before committing and pushing changes to your GitHub repository. However, since Studio’s core workflow is built around GitHub integration, some features (like publishing changes) will still require a GitHub repository. If you encounter issues with the preview connection (such as a "Forbidden error"), ensure your gitInfo is correctly set in the __preview.json file, as described in the troubleshooting section of the docs Enable the Full Editing Experience. In summary:
- Full local-only Studio experience is not documented or officially supported. - You can test most features by exposing your local server and connecting it to Studio. - GitHub is required for full synchronization and publishing. If you need more flexibility or support for other git providers, the current documentation does not mention any alternatives or roadmap for this. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•2w ago

@kapa.ai i added the preview.api and on yarn dev and accessing http://localhost:3000/__preview.json the fallback [...slug].vue is rendered instead

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When running your Nuxt Content project in development mode (yarn dev), accessing <http://localhost:3000/__preview.json> should return a JSON metadata file generated by the Content module, not render your fallback [...slug].vue page. This file is essential for Studio integration and must be accessible for Studio to connect to your site Enable the Full Editing Experience. If you are seeing your fallback page instead, it suggests that the Content module is not correctly intercepting the /__preview.json route. Here are some things to check based on the documentation: 1. Ensure Content Module is Installed and Configured
Make sure you have the Nuxt Content module installed and properly configured in your nuxt.config.ts, including the preview.api setting:

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

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

Enable the Full Editing Experience 2. Check for Custom Catch-All Routes
If you have a catch-all route like [...slug].vue, ensure it does not override or conflict with the /__preview.json route. The Content module should take precedence for this specific endpoint. 3. Development Mode Support
The documentation states that the /__preview.json endpoint should be available both in development and production, as long as the Content module is active and correctly configured. 4. Module Order
If you have custom server middleware or other modules, ensure that Nuxt Content is not being overridden by other route handlers. If after these checks the issue persists, the knowledge sources do not provide a more specific troubleshooting step for this scenario. You may want to try restarting your dev server or consult the Nuxt Content documentation for updates. Summary:
- /__preview.json should return JSON, not render a fallback page. - Double-check your Content module setup and route handling. - If the problem continues, the documentation does not provide further troubleshooting steps for this specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•2w ago

@kapa.ai it is not being generated i think.. i renamed the fallback slug option too but it is giving 404. is yarn dev supposed to generate it if we have content: { preview: { api: 'https://api.nuxt.studio' } } in the nuxt.config,js automatically?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, according to the official documentation, when you add the following to your nuxt.config.ts:

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

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

the /__preview.json endpoint should be automatically generated by the Content module. This endpoint is required for Studio integration and should be accessible both in development (yarn dev) and production. The documentation specifically states:

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 Enable the Full Editing Experience.

If you are getting a 404 error and the file is not being generated, double-check that: - The Content module is installed and enabled. - The preview.api option is set exactly as shown above. - There are no custom routes or middleware intercepting /__preview.json. If all of these are correct and you still get a 404, the knowledge sources do not provide further troubleshooting steps for this specific issue. In that case, it may be a bug or a misconfiguration not covered in the documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•2w ago

@kapa.ai where is the preview file supposed to show up? .nuxt?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The /__preview.json file is not a physical file that appears in your project directory (such as .nuxt/). Instead, it is a route automatically generated and served by the Nuxt Content module when you have the preview.api option set in your nuxt.config.ts. You should be able to access it by visiting <http://localhost:3000/__preview.json> in your browser or via HTTP request when your dev server is running. The documentation states:

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 Enable the Full Editing Experience.

So, it is not a file you will see in .nuxt/ or your filesystem, but a dynamic endpoint provided by the Content module. If you do not see it when visiting the URL, it means the Content module is not serving it as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•2w ago

@kapa.ai but doesn't that mean a corresponding project needs to be set up first? this is the first commit in which nuxt content module and related content is being added?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the official documentation, the /__preview.json endpoint is generated dynamically by the Nuxt Content module as soon as you add and configure the module with the preview.api option in your nuxt.config.ts file. There is no requirement for a pre-existing project to be set up in Nuxt Studio or GitHub for this endpoint to be available. The endpoint should be accessible as soon as you run your Nuxt app with the Content module enabled and properly configured:

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

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

The documentation says:

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 Enable the Full Editing Experience.

So, as soon as you add Nuxt Content and the preview config, and run your dev server, /__preview.json should be available—even on your very first commit. You do not need to set up a Studio project or connect to GitHub first for this endpoint to work. If you are not seeing the endpoint, it is likely due to a misconfiguration or an issue with how the module is installed or registered, not because a Studio project is missing. The knowledge sources do not mention any requirement for a pre-existing Studio project for the endpoint to be generated. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•2w ago

@kapa.ai ok so apparently this only works with yarn build && yarn preview. but also there is no local interface for studio at all? one MUST commit and push to github? also how to change the branch nuxt studio should use for my project?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct:
- The /__preview.json endpoint is reliably generated when you run yarn build && yarn preview (production preview), not always in yarn dev. This matches the intended workflow for Studio integration, as the docs recommend using a deployed or preview environment for connecting with Studio Enable the Full Editing Experience. Local Studio Interface:
There is no local interface for Nuxt Studio itself. Studio is a cloud-based platform accessed at nuxt.studio. You must connect your (publicly accessible) deployed site to Studio for live editing and preview. The documentation confirms that Studio is not run locally; instead, you connect your site (local or deployed) to the Studio web interface Setup Nuxt Studio. Committing and Pushing to GitHub:
Yes, you must commit and push to GitHub for full Studio functionality. Studio is natively integrated with GitHub and requires your repository to be hosted there for synchronization, editing, and publishing features. There is no documented support for other git providers or for a fully local workflow without GitHub Real time synchronization between Studio and GitHub. Changing the Branch Used by Nuxt Studio:
The knowledge sources do not provide explicit instructions for changing the branch that Nuxt Studio uses for your project. The documentation mentions that Studio synchronizes with your GitHub repository and supports features like branches and pull requests (with some features "coming soon"), but does not detail how to select or switch branches within Studio at this time Studio Pricing & Features. Summary:
- /__preview.json is generated in production preview (yarn build && yarn preview). - Studio is only available as a cloud interface; there is no local Studio UI. - You must commit and push to GitHub for Studio integration. - The documentation does not specify how to change the branch Studio uses. If you need branch-specific workflows, you may need to consult the Studio interface or GitHub integration settings directly, as the current documentation does not cover this detail. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt Studio Local Development

Did you find this page helpful?