Nuxt•3d ago

App.vue overwritten by layer after adding @nuxt/content@3

Hi, all. When adding @nuxt/content (3) to my app, the app.vue is not used anymore breaking my entire app. Furthermore, the index.vue is also not used and instead the index.vue out of one of my layers is used. This is my package.json:

{
  "name": "nuxt-app",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --envName local",
    "generate": "nuxt generate --envName local",
    "preview": "nuxt preview --envName local",
    "postinstall": "nuxt prepare --envName local",
    "lint": "eslint .",
  },
  "workspaces": [
    "./",
    "./layers/base",
    "./layers/image",
    "./layers/document"
  ],
  "dependencies": {
    "@nuxt/content": "^3.0.0",
    "@nuxt/scripts": "^0.9.5",
    "@nuxtjs/seo": "2.1.0",
    "@vite-pwa/nuxt": "^0.10.6",
    "nuxt": "^3.15.1",
    "swetrix": "^3.5.3",
    "@nuxt/ui": "^3.0.0-alpha.11",
    "@vueuse/core": "12.0.0",
    "@vueuse/nuxt": "12.0.0"
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@iconify-json/heroicons": "^1.2.1",
    "@iconify-json/lucide": "^1.2.16",
    "@iconify-json/material-symbols": "^1.2.5",
    "@iconify-json/simple-icons": "^1.2.9",
  },
  "overrides": {
    "@nuxt/ui": "^3.0.0-alpha.11",
    "@vueuse/core": "12.0.0",
    "@vueuse/nuxt": "12.0.0"
  }
}

{
  "name": "nuxt-app",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --envName local",
    "generate": "nuxt generate --envName local",
    "preview": "nuxt preview --envName local",
    "postinstall": "nuxt prepare --envName local",
    "lint": "eslint .",
  },
  "workspaces": [
    "./",
    "./layers/base",
    "./layers/image",
    "./layers/document"
  ],
  "dependencies": {
    "@nuxt/content": "^3.0.0",
    "@nuxt/scripts": "^0.9.5",
    "@nuxtjs/seo": "2.1.0",
    "@vite-pwa/nuxt": "^0.10.6",
    "nuxt": "^3.15.1",
    "swetrix": "^3.5.3",
    "@nuxt/ui": "^3.0.0-alpha.11",
    "@vueuse/core": "12.0.0",
    "@vueuse/nuxt": "12.0.0"
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@iconify-json/heroicons": "^1.2.1",
    "@iconify-json/lucide": "^1.2.16",
    "@iconify-json/material-symbols": "^1.2.5",
    "@iconify-json/simple-icons": "^1.2.9",
  },
  "overrides": {
    "@nuxt/ui": "^3.0.0-alpha.11",
    "@vueuse/core": "12.0.0",
    "@vueuse/nuxt": "12.0.0"
  }
}

I'm using bun if that's of any help. When removing nuxt content from the modules array, the problem disappears. Has anybody had a similar experience or a clue on where i could look (logs etc) to find a solution to this issue? Thanks a lot ❤️

17 Replies

kapa.ai•3d ago

Hi @Tom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it appears that you're experiencing an issue with Nuxt Content v3 and how it interacts with your app structure. Let me address the key points: 1. App.vue not being used: When you add @nuxt/content v3 to your project, it changes how pages are handled. According to the Nuxt Content v3 migration guide, the document-driven mode has been dropped. This means that Markdown files will not automatically convert to Nuxt pages. 2. Index.vue from a layer being used instead of your main index.vue: This behavior might be related to how Nuxt is resolving pages when using layers. However, the knowledge sources don't provide specific information about this issue with layers and Nuxt Content. To address these issues, you can try the following: 1. Implement a catch-all route: Create a pages/[...slug].vue file to handle content rendering. Here's an example from the Nuxt Content v3 migration guide:

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

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer v-if="page" :value="page" />

    <footer><!-- ... --></footer>
  </div>
</template>

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

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer v-if="page" :value="page" />

    <footer><!-- ... --></footer>
  </div>
</template>

2. Check your nuxt.config.ts: Make sure you've properly registered the Nuxt Content module:

export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

3. Review your content structure: Ensure that your content is organized correctly according to the new Nuxt Content v3 structure. You may need to create a content.config.ts file to define your collections. 4. Check for conflicts: Given that you're using layers and other modules, there might be conflicts in how pages are resolved. Try temporarily disabling other modules or layers to isolate the issue. 5. Logging: To get more information about what's happening, you can enable debug mode for Nuxt. Add the following to your nuxt.config.ts:

export default defineNuxtConfig({
  // ... other config
  debug: true
})

export default defineNuxtConfig({
  // ... other config
  debug: true
})

If these steps don't resolve your issue, you may need to provide more details about your project structure, particularly how you're using layers and the content of your nuxt.config.ts file. Lastly, as this seems to be a complex issue that's not fully covered by the available knowledge sources, you might want to consider opening an issue on the Nuxt Content GitHub repository for more specific assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

TomOP•3d ago

@kapa.ai in the attachment you can see what a bun dev command outputs.

message.txt

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize, but I'm not able to see any attachments or images in this conversation. As an AI language model, I don't have access to external files or images that you might be referring to. To help you with your Nuxt-related question, I would need you to provide the text output of the bun dev command directly in your message. If you could copy and paste the relevant parts of the output here, I'd be happy to analyze it and provide assistance based on that information. If you have specific error messages or logs from the bun dev command that you'd like me to look at, please share them in text format, and I'll do my best to help you troubleshoot the issue with your Nuxt application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

TomOP•3d ago

@kapa.ai the output is too large, I don't think i can give you a meaningful segment in small text message, is there anything else i can try?

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that the output is too large to share in a single message. In this case, there are a few alternative approaches we can try to troubleshoot your Nuxt Content issue: 1. Enable debug mode: As mentioned earlier, you can enable debug mode in your nuxt.config.ts file to get more detailed logs:

   export default defineNuxtConfig({
     // ... other config
     debug: true
   })

   export default defineNuxtConfig({
     // ... other config
     debug: true
   })

This might help you identify specific issues or error messages. 2. Check for specific error messages: Instead of sharing the entire output, look for any specific error messages or warnings related to Nuxt Content or page rendering. These are usually more informative and can help pinpoint the issue. 3. Verify your project structure: Ensure that your project structure follows the Nuxt Content v3 guidelines. Specifically, check that: - You have a content/ directory with your Markdown files - You've created a content.config.ts file to define your collections - Your pages/ directory is set up correctly 4. Isolate the issue: Try creating a minimal reproduction of the problem. Start with a fresh Nuxt project, add Nuxt Content, and gradually add your custom configurations until you reproduce the issue. This can help identify which specific part of your setup is causing the problem. 5. Use the Nuxt DevTools: Nuxt provides a powerful DevTools extension that can help diagnose issues. As mentioned in the Nuxt documentation on debugging, you can use the DevTools to inspect your application's structure and behavior. 6. Check for conflicts: Since you're using layers and multiple modules, there might be conflicts. Try temporarily disabling other modules or layers to see if the issue persists with only Nuxt Content enabled. 7. Review your app.vue and pages/index.vue: Make sure these files exist and are correctly structured. The content of these files might be overridden by Nuxt Content or your layer configuration. If you're still unable to resolve the issue after trying these steps, consider creating a minimal reproduction of the problem and sharing it on the Nuxt GitHub Discussions or opening an issue on the Nuxt Content GitHub repository. This will allow the Nuxt community and maintainers to provide more specific assistance based on your exact setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

TomOP•3d ago

@kapa.ai I've also tried switching from github layer source to local. Didn't help either. I guess content somehow alters the way layer priority?

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information provided in the knowledge sources and our previous conversation, there isn't specific documentation about Nuxt Content altering layer priority. However, your observation is interesting and worth investigating further. The Nuxt documentation on layers mentions that layers have a specific priority order, with the user's project being the first item in the _layers array and having the highest priority. It's possible that the addition of Nuxt Content is interacting with this system in an unexpected way. To help troubleshoot this issue, you could try the following: 1. Check your layer configuration: Make sure your layers are correctly set up in your nuxt.config.ts file. The order of layers matters, as earlier items have higher priority. 2. Inspect the nuxt.options._layers array: You can create a simple module to log the layers and their order. Add this to your nuxt.config.ts:

   export default defineNuxtConfig({
     modules: [
       // ... other modules
       function (_, nuxt) {
         console.log('Layers:', nuxt.options._layers.map(l => l.config.srcDir))
       }
     ]
   })

   export default defineNuxtConfig({
     modules: [
       // ... other modules
       function (_, nuxt) {
         console.log('Layers:', nuxt.options._layers.map(l => l.config.srcDir))
       }
     ]
   })

This will help you see if the layer order is being affected when you add Nuxt Content. 3. Use local layer aliases: The Nuxt documentation on experimental features mentions an experimental feature called localLayerAliases. You could try enabling this:

   export default defineNuxtConfig({
     experimental: {
       localLayerAliases: true
     }
   })

   export default defineNuxtConfig({
     experimental: {
       localLayerAliases: true
     }
   })

This might help with resolving aliases within layers more consistently. 4. Check for conflicts in your content structure: Ensure that your content structure in the layers doesn't conflict with the main project's content. The Nuxt Content documentation explains how to set up your content, which might interact with your layer structure. 5. Review your content.config.ts: If you have a content.config.ts file, make sure it's correctly set up and not interfering with your layer structure. If these steps don't resolve the issue, it might be worth opening an issue on the Nuxt Content GitHub repository or the main Nuxt repository, as this could be an unexpected interaction between Nuxt Content and the layer system that the maintainers should be aware of. Remember, when dealing with experimental features and complex setups involving layers and Nuxt Content, you might encounter edge cases that aren't well-documented. Your feedback could be valuable for improving Nuxt and its ecosystem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

TomOP•3d ago

A reproduction can be found here: https://github.com/tomvoet/nuxt-content-issue-reproduction

GitHub

GitHub - tomvoet/nuxt-content-issue-reproduction

Contribute to tomvoet/nuxt-content-issue-reproduction development by creating an account on GitHub.

Mads•2d ago

@Tom there is definitely a bug in layers after upgrading from from Nuxt 3.14.1592 to 3.15.2 I would suggest to downgrade until it is fixed. @danielroe when using Layers And having this app.config.ts in base layer // base layer export default defineAppConfig({ myLayer: { name: 'base' as 'base' | 'kassebil' | 'maxgarage' | 'hellocar', }, }) When I deploy the Kassebil layer it will still show myLayer.name === base if the component comes from this layer. Even with this app.config.ts in kassebil layer // base layer export default defineAppConfig({ myLayer: { name: 'kassebil' as 'base' | 'kassebil' | 'maxgarage' | 'hellocar', }, }) I will try to make a minimal repro soon Basically Nuxt can’t see current layer Sorry it’s Nuxt/Content v3 that’s causing this like op suggested. Downgrading did not help

danielroe•2d ago

cc: @farnabaz

farnabaz•2d ago

There was a side effect in Content module, should be good in https://pkg.pr.new/@nuxt/content@b4e7dec The layers was getting reversed in the module and that's why the priority was reverse As I checked you also missed future: { compatibilityVersion: 4 } in the nuxt.config.ts Since you put app.vue inside app directory you should change compatibility version

Mads•2d ago

That was quick! Love it. ♥️

TomOP•2d ago

Great, that was quick. Thanks a lot @farnabaz & @danielroe ❤️

Gaming

Programming

App.vue overwritten by layer after adding @nuxt/content@3

Did you find this page helpful?