Nuxt•2w ago

setup nuxt studio

can you walk me through setting up nuxt studio? I deployed my site via github to render.com. what steps do i need to ensure in my project so i can use nuxt studio

14 Replies

kapa.ai•2w ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Certainly! Here’s a step-by-step guide to set up Nuxt Studio for your Nuxt Content site deployed on Render.com via GitHub: --- 1. Enable the Preview API in your Nuxt project In your nuxt.config.ts, add the following to enable the Preview API, which is required for Studio integration:

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

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

This allows Studio to connect to your deployed site and provide live editing and preview features Docs: Enable the Full Editing Experience. --- 2. Deploy your site and ensure preview metadata is available After deploying to Render.com, make sure your site exposes the /__preview.json endpoint. You can check this by visiting:

<https://your-site-on-render.com/__preview.json>

<https://your-site-on-render.com/__preview.json>

This file is automatically generated by the Content module and is required for Studio to connect to your site Docs: Enable the Full Editing Experience. --- 3. Ensure GitHub repository information is available Studio uses your GitHub repository info for synchronization. The __preview.json file should include a gitInfo field like:

"gitInfo": {
  "name": "your-repo-name",
  "owner": "your-github-username-or-org",
  "url": "<https://github.com/your-org/your-repo">
}

"gitInfo": {
  "name": "your-repo-name",
  "owner": "your-github-username-or-org",
  "url": "<https://github.com/your-org/your-repo">
}

If this is missing or incorrect (which can happen on some platforms), you can override it in your nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    preview: {
      api: '<https://api.nuxt.studio',>
      gitInfo: {
        name: 'your-repo-name',
        owner: 'your-github-username-or-org',
        url: '<https://github.com/your-org/your-repo'>
      }
    }
  }
})

export default defineNuxtConfig({
  content: {
    preview: {
      api: '<https://api.nuxt.studio',>
      gitInfo: {
        name: 'your-repo-name',
        owner: 'your-github-username-or-org',
        url: '<https://github.com/your-org/your-repo'>
      }
    }
  }
})

Docs: Enable the Full Editing Experience --- 4. Connect your repository to Nuxt Studio - Go to nuxt.studio and log in (GitHub login is required to import repositories). - Import your GitHub repository via the Studio interface. - If prompted, install the Nuxt Studio GitHub App to enable synchronization and publishing from Studio Docs: Studio Setup. --- 5. Set your deployed site URL in Studio - In the Studio admin, go to the deployment/self-hosting section. - Enter your Render.com site URL (e.g., <https://your-site-on-render.com>). - Studio will verify the connection by checking the /__preview.json endpoint. --- 6. Start editing! You can now use Nuxt Studio’s visual editor to edit Markdown, YAML, and JSON files, manage media, and publish changes directly to GitHub. All changes can be previewed live on your deployed site Docs: Studio Setup. --- Troubleshooting:
If you see a "Forbidden error: invalid property check" when setting your URL, double-check the gitInfo field in your __preview.json and ensure it matches your GitHub repository Docs: Enable the Full Editing Experience. --- Let me know if you need help with any specific step! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

WiFi PlugOP•2w ago

@kapa.ai i got hit with a "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory" when deploying to render the only change was adding " content: { preview: { api: 'https://api.nuxt.studio', }, }," why is that? how can i solve it

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not explicitly mention a "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory" occurring specifically when enabling the Nuxt Content preview API for Nuxt Studio. There is no direct documentation or issue report linking this error to the addition of the content.preview.api configuration. However, based on the available sources, enabling the preview API should only expose metadata for Studio integration and should not, by itself, cause a significant increase in memory usage during build or deployment. If you are experiencing a heap out of memory error after this change, it may be due to an indirect effect, such as increased processing or a bug, but this is not documented in the provided sources. If you continue to encounter this issue, you may want to check for other changes in your project or try increasing the Node.js memory limit as a temporary workaround. For further troubleshooting, you could also consult the Nuxt Discord or GitHub discussions, as suggested in the documentation for Studio setup issues Enable the Full Editing Experience. If you need more detailed help, please provide additional logs or context. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

WiFi PlugOP•2w ago

@kapa.ai [error] [nuxi] Nuxt Build Error: [commonjs--resolver] [unimport] failed to find "useContentState" imported from "#imports" i installed the nuxt studio module instead but get this error now

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error [unimport] failed to find "useContentState" imported from "#imports" indicates that the composable useContentState does not exist in the current version of Nuxt Content or is not available for auto-import from #imports. Based on the knowledge sources, in Nuxt Content v3, several APIs and composables from previous versions have been removed or renamed. Notably, the useContent() composable was removed, and there is no mention of a useContentState composable in the official migration or getting started guides. The recommended approach for fetching content is now to use the new queryCollection() API and related helpers, not useContentState or useContent() Changes in Nuxt Content v3. If you are following an older guide or using code from a previous version, you should update your code to use the new APIs. For example, to fetch content in a page, you can use:

const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())

const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())

and render it with <ContentRenderer /> as shown in the Nuxt Content installation guide. Summary:
- useContentState does not exist in Nuxt Content v3. - Use the new queryCollection() API and related helpers instead. - Remove or replace any usage of useContentState in your code. If you need help migrating your code, please share the relevant snippet, and I can suggest the v3 equivalent. If you installed the Nuxt Studio module, note that the Studio module has been deprecated and Studio integration is now handled directly via the Content module's preview API. You do not need to install a separate Studio module—just enable the preview API in your nuxt.config.ts as described in the migration guide Nuxt Studio integration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

WiFi PlugOP•2w ago

@kapa.ai i don't use usecontentstate, and it works properly on local dev server

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you do not use useContentState in your code and that your project works properly on your local development server. Based on the knowledge sources provided, there is no explicit documentation or issue report describing a situation where the [unimport] failed to find "useContentState" imported from "#imports" error occurs only in production (such as on Render.com) but not in local development, especially when you are not using this composable yourself. This error typically means that somewhere in your codebase, or in a dependency, there is an import of useContentState from #imports, but the auto-import system (powered by unimport) cannot find it. Since you confirmed you do not use it directly, possible causes could include: - A third-party module or dependency is trying to import useContentState. - There is a mismatch between local and production dependencies or build environments. - The build process on Render.com is picking up stale or cached files. What you can try: - Double-check your dependencies and ensure all are up to date and match your local environment. - Search your entire project (including node_modules and any custom modules) for useContentState to see if it is referenced anywhere. - Clear the build cache on Render.com and trigger a fresh build. - Make sure your nuxt.config and lockfiles (package-lock.json or yarn.lock) are committed and up to date. Unfortunately, the knowledge sources do not provide a direct solution or mention this specific error scenario, so I cannot offer a more definitive answer. If the issue persists, you may want to open an issue on the Nuxt GitHub or ask in the Nuxt community for further troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

WiFi PlugOP•2w ago

@kapa.ai it's definitely something to do with that content preview api setting i added. but i also prerender these content pages "routeRules: { // -- Page pre rendering for content pages etc '/privacy-policy': { prerender: true }, '/terms-of-service': { prerender: true }, '/site-rules': { prerender: true }, '/blog/**': { prerender: true }, // All blog pages }," could it be something to do with this?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, using the content.preview.api setting is the recommended way to enable Nuxt Studio integration and should not, by itself, cause issues with prerendering content pages. The use of routeRules to prerender specific pages (like /privacy-policy, /terms-of-service, /site-rules, and /blog/**) is also a documented and supported approach for selective prerendering in Nuxt 3:

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/terms-of-service': { prerender: true },
    '/site-rules': { prerender: true },
    '/blog/**': { prerender: true },
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/privacy-policy': { prerender: true },
    '/terms-of-service': { prerender: true },
    '/site-rules': { prerender: true },
    '/blog/**': { prerender: true },
  }
})

This configuration tells Nuxt to prerender those routes at build time, and it is compatible with the Content module and Studio integration Prerendering. There is no information in the knowledge sources indicating that enabling the Content preview API and using routeRules for prerendering should conflict or cause the [unimport] failed to find "useContentState" error. The sources do mention that route rules with wildcards (like /blog/**) will prerender all matching pages, as long as those pages are discoverable or explicitly defined use routeRules to hint pages to prerender. If you are experiencing this error only after enabling the preview API, but not when prerendering without it, the knowledge sources do not provide a direct explanation or known issue for this scenario. There is no mention of useContentState being required or auto-imported as part of the preview API or prerendering process. Summary:
- Your use of routeRules for prerendering is correct and supported. - The content.preview.api setting should not conflict with prerendering according to the documentation. - The specific [unimport] failed to find "useContentState" error is not explained in the knowledge sources in relation to these settings. If the problem persists, it may be due to an edge case or a bug not covered in the current documentation. In that case, further investigation or reaching out to the Nuxt team may be necessary. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

setup nuxt studio

Did you find this page helpful?