Nuxt•2mo ago

Nuxt Studio Module is breaking build

Is Nuxt Studio broken? I can't seem to build my project ERROR Nuxt Build Error: [nuxt:imports-transform] [unimport] failed to find "useContentState" imported from "#imports"

8 Replies

kapa.ai•2mo ago

Hi @nathanr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt Studio itself is not broken, but the issue you're encountering is likely due to using the deprecated @nuxthq/studio module or outdated integration patterns. As of Nuxt Content v3, the Studio module has been deprecated and its functionality is now integrated directly into Nuxt Content via the new generic Preview API. You should remove the @nuxthq/studio package from your dependencies and from the modules section in your nuxt.config.ts. Instead, enable Studio by adding the following to your config:

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

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

Additionally, if you have any imports or usage of functions like useContentState that are no longer available, you should update your code to match the new APIs and patterns in Nuxt Content v3. For example, many old composables and components have been removed or replaced—see the migration guide for details. In summary: - Remove @nuxthq/studio from your project. - Use the new preview config for Studio integration. - Update any deprecated imports or usage in your code. This should resolve the build error and align your project with the latest Nuxt Content and Studio integration best practices How to upgrade your Nuxt documentation website to Content x UI v3 Docs > Getting-started: Changes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

nathanrOP•2mo ago

@kapa.ai when I go to my home page which is part of nuxt content it doesn't load it. Also the Nuxt studio app is not working for me to self host

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If your Nuxt Content home page is not loading and the Nuxt Studio app is not working for self-hosting, here are the key things to check based on the official documentation: 1. Nuxt Content v3 Setup
- Ensure you have created a content.config.ts file and defined your collections properly. - Your home page Markdown file should be at content/index.md. - Your pages/index.vue should use the new queryCollection API and <ContentRenderer> component, for example:

   <script setup lang="ts">
   const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())

   useSeoMeta({
     title: home.value?.title,
     description: home.value?.description
   })
   </script>

   <template>
     <ContentRenderer v-if="home" :value="home" />
     <div v-else>Home not found</div>
   </template>

   <script setup lang="ts">
   const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())

   useSeoMeta({
     title: home.value?.title,
     description: home.value?.description
   })
   </script>

   <template>
     <ContentRenderer v-if="home" :value="home" />
     <div v-else>Home not found</div>
   </template>

If you are missing the pages directory, make sure your app.vue includes <NuxtPage /> so pages can render Getting Started: Installation. 2. Nuxt Studio Self-Hosting
- You must enable the Preview API in your nuxt.config.ts:

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

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

- After deploying, ensure that <https://your-site.com/__preview.json> is accessible. This file is required for Studio to connect to your site Enable the Full Editing Experience. - If you see a "Forbidden error: invalid property check" in Studio, make sure the gitInfo field is set correctly in __preview.json. You can override it in your config:

   export default defineNuxtConfig({
     content: {
       preview: {
         api: '<https://api.nuxt.studio',>
         gitInfo: {
           name: 'Your repository name',
           owner: 'Your repository owner/organization',
           url: 'Your GitHub repository URL'
         }
       }
     }
   })

   export default defineNuxtConfig({
     content: {
       preview: {
         api: '<https://api.nuxt.studio',>
         gitInfo: {
           name: 'Your repository name',
           owner: 'Your repository owner/organization',
           url: 'Your GitHub repository URL'
         }
       }
     }
   })

- For local development, run your app with npx nuxt dev --tunnel and use the tunnel URL in Studio Studio: Local Debug. If you have followed these steps and your home page or Studio integration still does not work, double-check that you have removed any deprecated modules (like @nuxthq/studio) and updated your code to use the new Nuxt Content v3 APIs and structure. If the __preview.json file is not generated or not accessible, Studio will not be able to connect. If you need more specific troubleshooting, please provide any error messages you see or details about your configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

nathanrOP•2mo ago

@kapa.ai I have deployed it by building it, and uploading a zip file to a Cpanel account

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When deploying a Nuxt Content site to a CPanel account by uploading a built zip file, you are most likely using static hosting. In this scenario, Nuxt generates static HTML, JS, and CSS files (using nuxi generate), which you then upload to your server. Here are some important considerations and troubleshooting steps based on the official documentation: 1. Static Hosting Requirements
- Make sure you used npx nuxi generate to build your site for static hosting. This creates a dist/ directory with all the static files you need to upload Deploy# Static Hosting. - Upload the contents of the dist/ directory to your public web root (often public_html on CPanel). 2. Home Page Not Loading
- Nuxt generates index.html, 200.html, and 404.html by default. Some static hosts (including CPanel setups) may not automatically serve 200.html for unknown routes, which can cause issues with client-side routing and custom error pages Deploying a Static Client-Rendered App. - If you see your hosting provider’s 404 page instead of your Nuxt error page, you may need to configure your host to use 200.html as a fallback for all routes. On some hosts, this can be done via the control panel or by editing .htaccess (for Apache servers) Stack Overflow: Hostinger 404. 3. Nuxt Studio Self-Hosting
- The Nuxt Studio app requires the __preview.json file to be accessible at the root of your deployed site. On static hosting, this file should be present if you have enabled the Preview API in your nuxt.config.ts and built your site correctly Enable the Full Editing Experience. - If __preview.json is missing or inaccessible, Studio will not work. Static hosting may not support all Studio features, as some require server-side functionality. 4. Database Limitations
- On static hosting, Nuxt Content loads the database in the browser using WASM SQLite. This means content queries happen client-side, and features requiring server-side processing or a persistent database will not work Deploy# Static Hosting. Summary:
- Ensure you are uploading the correct static files (dist/). - Configure your host to use 200.html as a fallback for client-side routing. - Make sure __preview.json is present and accessible for Studio. - Some Studio and server-side features may not work on static hosting. If you need server-side features or full Studio integration, consider deploying to a platform that supports serverless or Node.js hosting, as described in the Nuxt documentation. If you have specific error messages or issues, please provide them for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Nuxt Studio Module is breaking build

Did you find this page helpful?