Nuxt•4d ago

Nuxt 4 with Content Module v3 `nuxt.config.tx` issue

Using VS Code/Codium there is a nuxt.config IDE error when adding a content:{} section to the config. The error is as follows:

Object literal may only specify known properties, and 'content' does not exist in type 'InputConfig<NuxtConfig, ConfigLayerMeta>'.ts(2353)

Object literal may only specify known properties, and 'content' does not exist in type 'InputConfig<NuxtConfig, ConfigLayerMeta>'.ts(2353)

I'm currently using:

future: {
  compatibilityVersion: 4
},

compatibilityDate: '2024-12-24',

modules: [
    '@nuxt/content',
    '@nuxtjs/tailwindcss',
    '@formkit/nuxt',
    '@nuxtjs/mdc',
    '@nuxt/image',
    '@nuxtjs/color-mode',
    '@nuxt/icon',
  ],

future: {
  compatibilityVersion: 4
},

compatibilityDate: '2024-12-24',

modules: [
    '@nuxt/content',
    '@nuxtjs/tailwindcss',
    '@formkit/nuxt',
    '@nuxtjs/mdc',
    '@nuxt/image',
    '@nuxtjs/color-mode',
    '@nuxt/icon',
  ],

My tsconfig.json looks like:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@trpc/client",
      "@trpc/server",
    ],
  },
  "include": [
    "types/**/*.ts"
  ],
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@trpc/client",
      "@trpc/server",
    ],
  },
  "include": [
    "types/**/*.ts"
  ],
}

There are no conflicts in my package.json. At this point I'm really not sure what to look for. Any insights? FYI, I'm happy to simply remove the section, but interestingly enough, code highlighting only works if I configure the content section (and simply ignore the errors). If there's a better way to accommodate it, I'm open.

3 Replies

kapa.ai•4d ago

Hi @humblemodulo. 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 the knowledge sources, I don't have enough specific details to directly address the IDE error you're encountering with the content section in your nuxt.config.ts file for Nuxt 4 and Content Module v3. However, I can provide some insights and suggestions based on the available information about Nuxt Content v3 configuration. 1. Nuxt Content v3 Configuration: According to the Nuxt Content v3 documentation, you should be able to configure the content module in your nuxt.config.ts file. The correct way to add the configuration is:

   export default defineNuxtConfig({
     content: {
       // Options
     }
   })

   export default defineNuxtConfig({
     content: {
       // Options
     }
   })

2. TypeScript Configuration: The error you're seeing suggests that TypeScript doesn't recognize the content property in the Nuxt configuration. This could be due to outdated type definitions. Make sure you have the latest version of @nuxt/content installed and that your TypeScript definitions are up to date. 3. Compatibility: You mentioned using compatibility settings for Nuxt 4. It's important to note that Nuxt Content v3 is designed to work with Nuxt 3. There might be compatibility issues when trying to use it with Nuxt 4 settings. The Nuxt Content installation guide doesn't mention Nuxt 4 compatibility. 4. Code Highlighting: Regarding code highlighting, Nuxt Content v3 does include built-in syntax highlighting. According to the configuration documentation, you can configure the highlight option under the markdown section:

   export default defineNuxtConfig({
     content: {
       build: {
         markdown: {
           highlight: {
             // highlight options
           }
         }
       }
     }
   })

   export default defineNuxtConfig({
     content: {
       build: {
         markdown: {
           highlight: {
             // highlight options
           }
         }
       }
     }
   })

5. Alternative Approach: If you continue to face issues with the IDE recognizing the content configuration, you could try using a separate configuration file for Nuxt Content. Create a content.config.ts file in your project root as suggested in the installation guide:

   import { defineContentConfig, defineCollection } from '@nuxt/content'

   export default defineContentConfig({
     // Your content configuration here
   })

   import { defineContentConfig, defineCollection } from '@nuxt/content'

   export default defineContentConfig({
     // Your content configuration here
   })

This approach might help bypass the IDE error while still allowing you to configure Nuxt Content. Given the complexity of your setup and the potential compatibility issues between Nuxt 4 and Nuxt Content v3, you might want to consider: 1. Ensuring all your packages are up to date. 2. Double-checking the compatibility of Nuxt Content v3 with Nuxt 4 settings. 3. If possible, try reverting to Nuxt 3 compatibility settings to see if it resolves the issue. If the problem persists, you might need to reach out to the Nuxt Content maintainers or check their GitHub issues for similar problems or ongoing discussions about Nuxt 4 compatibility. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

humblemoduloOP•3d ago

I'm testing with Nuxt 4, but Nuxt3 was the only available tag option. Deleted node_modules, disabled type imports in tsconfig.json and all seems well. Very odd.

Gaming

Programming

Nuxt 4 with Content Module v3 `nuxt.config.tx` issue

Did you find this page helpful?