N
Nuxt•2w ago
nandi95

Content change content programatically

I'm trying to add style tag to the h1 of my posts: I tried the {style="... that didn't work I also tried in nuxt config: 
content: { build: {
  transformers: ['~/transformers/add-view-transition']
} },
content: { build: {
  transformers: ['~/transformers/add-view-transition']
} },
and I also tried in the nuxt config: 
hooks: {
    'content:file:afterParse': ctx => {
        console.log(`Parsing ${ctx.file.path}...`);
    }
},
hooks: {
    'content:file:afterParse': ctx => {
        console.log(`Parsing ${ctx.file.path}...`);
    }
},
I just can't seem to get anything. I am not getting logs in dev or during nuxi generate. What am i doing wrong?
5 Replies
kapa.ai
kapa.ai•2w ago
Hi @nandi95. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're trying to modify your Markdown content in Nuxt Content, specifically to add styling to h1 elements. Let me help you troubleshoot this issue. Transformers and Hooks Setup Your approach using transformers and hooks is correct, but there might be some issues with implementation. Let's address them: 1. Using Content Hooks The content:file:afterParse hook should work, but you need to ensure it's properly set up. Here's how you should implement it: 
export default defineNuxtConfig({
  hooks: {
    'content:file:afterParse': (ctx) => {
      console.log(`Parsing ${ctx.file.path}...`);
      // You can modify ctx.result here to change the parsed content
    }
  }
})
export default defineNuxtConfig({
  hooks: {
    'content:file:afterParse': (ctx) => {
      console.log(`Parsing ${ctx.file.path}...`);
      // You can modify ctx.result here to change the parsed content
    }
  }
})
If you're not seeing logs, it could be because: - The hook might not be triggered if you're using Nuxt Content v3 with a different hook naming convention - Console logs might be suppressed in the build process 2. Using Custom Transformers For your custom transformer approach, you need to create the actual transformer file: 
// ~/transformers/add-view-transition.ts
import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'add-view-transition',
  extensions: ['.md'],
  transform(file) {
    // Here you can modify the h1 elements
    // For example, if you want to add style to h1:
    if (file.title) {
      // Modify the title or other elements as needed
    }
    return file;
  },
})
// ~/transformers/add-view-transition.ts
import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'add-view-transition',
  extensions: ['.md'],
  transform(file) {
    // Here you can modify the h1 elements
    // For example, if you want to add style to h1:
    if (file.title) {
      // Modify the title or other elements as needed
    }
    return file;
  },
})
Then reference it in your config: 
export default defineNuxtConfig({
  content: {
    build: {
      transformers: [
        '~/transformers/add-view-transition',
      ],
    },
  },
})
export default defineNuxtConfig({
  content: {
    build: {
      transformers: [
        '~/transformers/add-view-transition',
      ],
    },
  },
})
Debugging Tips 1. Make sure you're restarting your Nuxt server after making changes to the configuration 2. For local debugging with Nuxt Content, you can enable the preview mode: 
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
    }
  }
})
This will help you see if your transformers are being applied correctly Local Debug. 3. Check if your transformer file is being properly loaded by adding more explicit console logs at the top level of the file. Alternative Approach If you're specifically looking to style h1 elements in your Markdown content, you might want to consider using Nuxt UI Pro's typography system which provides direct control over styling: 
export default defineAppConfig({
  uiPro: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-(--ui-text-highlighted) font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      }
    }
  }
})
export default defineAppConfig({
  uiPro: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-(--ui-text-highlighted) font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      }
    }
  }
})
This approach allows you to customize the styling of typography elements directly Typography. Let me know if you need more specific help with your implementation! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@478977928730902528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
nandi95
nandi95OP•2w ago
Also tried the hook in a nitro plugin
harlan
harlan•2w ago
these only run when it's transformed which only happens the first time it's passed so you may need to delete your .data / .nuxt folder to get it to trigger
nandi95
nandi95OP•2w ago
that was it! I was running nuxi cleanup but the .data stayed so that's the transformer only running, how do I get the hooks running? so nuxt.callHook in content seems to be undefined... nuxt is there, callHook function isn't

Did you find this page helpful?