Nuxt•4d ago

Nuxt Content Preview in development

I'm a bit confused on how to access my Nuxt Content Preview UI during local dev. https://content.nuxt.com/docs/studio/debug#clone-your-repository-on-local I followed all the steps successfully I believe. I can see the generated at my cloudflare tunnel url preview.json, ect. But, do I need to append something to my dev url? After Step 6, what url do I visit to see the Studio UI locally?

Nuxt Content

Test your Nuxt Content Studio customization on local.

Validate your Nuxt Content Studio customization in local development to ensure a smooth edition once deployed.

8 Replies

kapa.ai•4d ago

Hi @djmtype. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not provide explicit information about accessing the Nuxt Studio UI locally during development, or about a specific URL you should visit to see the Studio UI on your local dev server. What is clear from the documentation is: - The Studio UI itself is a cloud-based platform, available at <https://nuxt.studio, and is not served directly from your local Nuxt dev server. - To enable live preview and editing from Studio, you must configure your local Nuxt Content project with the preview.api option pointing to the Studio API, for example:

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

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

Docs: Configuration - preview - Once this is set up and your local server is accessible (e.g., via a tunnel like Cloudflare), you can connect your repository to Nuxt Studio at <https://nuxt.studio and use its UI to edit your content. The Studio UI itself is not hosted on your local server; you always access it via the Studio website. - The local preview endpoints (like /preview.json) are used by Studio to fetch and update content, but you do not access the Studio UI by visiting a local URL. If you are looking for a local web interface for Studio, the knowledge sources indicate that this does not exist; all editing is done through the cloud Studio UI, which connects to your local server via the configured API and tunnel. If you need to debug or test the integration, you should: - Ensure your local server is running and accessible from the internet (using your tunnel URL). - Log in to <https://nuxt.studio, import your repository, and configure the preview URL to point to your tunnel. If you need more details about debugging or troubleshooting, please refer to the official Studio documentation, but the knowledge sources above do not provide further specifics on this topic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

djmtypeOP•4d ago

@kapa.ai Then what is the purpose of this?

export default defineNuxtConfig({
  content: {
    preview: {
      // force module initialization on dev env
      dev: true
    }
  }
})

export default defineNuxtConfig({
  content: {
    preview: {
      // force module initialization on dev env
      dev: true
    }
  }
})

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The purpose of the following configuration:

export default defineNuxtConfig({
  content: {
    preview: {
      // force module initialization on dev env
      dev: true
    }
  }
})

export default defineNuxtConfig({
  content: {
    preview: {
      // force module initialization on dev env
      dev: true
    }
  }
})

is to enable the Nuxt Content Preview API during development mode. Setting dev: true under the preview option ensures that the preview functionality (used for live editing and previewing content changes, such as with Nuxt Studio) is active even when running your Nuxt app locally in development mode. This is useful if you want to test or use the preview features (like live content updates from Studio) without having to build and run your app in production mode. It essentially forces the preview module to initialize in your development environment, making it possible for external tools (like Nuxt Studio) to interact with your local server for live preview purposes. This is confirmed in the documentation, which states:

Enable Preview API

This is needed to enable live preview on Nuxt Studio.

Value: - dev: Enable in development mode - api: Activate the preview mode and set the API to be linked with.

Enable Studio

preview: {
  api: '<https://api.nuxt.studio',>
}
preview: {
  api: '<https://api.nuxt.studio',>
}

Docs: Configuration - preview

However, the knowledge sources do not provide further details or examples specifically about the dev: true option beyond this explanation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

djmtypeOP•4d ago

@kapa.ai https://someurl.trycloudflare.com/__studio.json doesn't seem to exist

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, there is no mention of a /__studio.json endpoint being required or available for Nuxt Content Preview or Nuxt Studio integration. The documentation and migration guides reference endpoints like /preview.json and the general configuration of the Preview API, but do not mention /__studio.json at all. The typical setup involves configuring your nuxt.config.ts with the preview.api option to enable Studio integration, and ensuring your local server is accessible (e.g., via a Cloudflare tunnel). Studio then interacts with your local server through the configured API, but the knowledge sources do not specify that /__studio.json should exist or be accessed directly. If you are expecting /__studio.json to exist based on external documentation or assumptions, the knowledge sources do not confirm this endpoint. Instead, they focus on the general preview API integration and endpoints like /preview.json for Studio communication. If /__studio.json is not found, this is not addressed or documented as an expected endpoint in the official Nuxt Content or Studio documentation provided in the sources above. If you need to verify your setup, ensure you have followed the documented steps for enabling the Preview API and making your local server accessible, but do not expect /__studio.json to be present based on the current official documentation.Docs: Configuration - preview ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Gaming

Programming

Nuxt Content Preview in development

Did you find this page helpful?