Rendering <NuxtImg> in @nuxt/content (v2) markdown file with Nuxt v3

Question

In the previous version of @nuxt/content (1.x) with Nuxt v2 and @nuxt/img (v0), you used to be able to write this in your Markdown files:

content/example.md

<nuxt-img src="img/myImage.jpg"></nuxt-img>

In Nuxt v3 world, with the latest @nuxt/content (2.2.1) and @nuxt/image-edge (1.0.0-27769790.4b27db3), I am getting this error while running in development (yarn run dev):

[Vue warn]: Failed to resolve component: NuxtImg
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Am I doing something wrong? Do I need to use the new MDC syntax? Is it not yet supported, or not supported when SSR is disabled (ssr: false)?

There's a few tickets I'm aware of/watching:

@nuxt/image Checklist for Nuxt 3 support: https://github.com/nuxt/image/discussions/548
@nuxt/image feat: support prerendering static images: https://github.com/nuxt/image/pull/614
@nuxt/content Support for @nuxt/image (v1): https://github.com/nuxt/content/issues/624

Details

package.json

"@nuxt/content": "^2.2.1",
"@nuxt/image-edge": "^1.0.0-27769790.4b27db3",
"nuxt": "^3.0.0-rc.13"

NOTE: @nuxt/image-edge is the work-in-progress for the new @nuxt/image v1 module which will work with Nuxt 3. Mentioned here.

nuxt.config.ts

export default defineNuxtConfig({
  ssr: false, // Use without SSR
  components: false // Disabled auto-import components
})

Not sure but you maybe need to import the image module into the modules key? — kissu
– kissu, Commented Nov 8, 2022 at 12:24
@kissu Yep, I have it like in the docs: export default defineNuxtConfig({ modules: [ '@nuxt/image-edge', ] }) — Nick
– Nick, Commented Nov 8, 2022 at 12:54
@kissu Actually I'm getting the same error on another page where the .md file has a <nuxt-link></nuxt-link> in it... so it seems like the default Nuxt 3 components are not accessible from the @nuxt/content context yet? — Nick
– Nick, Commented Nov 8, 2022 at 14:15
I'll also ask about the correct way to use components in @nuxt/content (v2) here: github.com/nuxt/content/discussions/1663 — Nick
– Nick, Commented Nov 8, 2022 at 15:14

Mohsen M. · Accepted Answer · 2023-02-10 12:34:37Z

3

nuxt: v3.1.2
@nuxt/content: v2.4.2
@nuxt/image-edge: 1.0.0-27913696.5d122a3

Solution:
create the file components/content/ProseImg.vue with following content:

<template>
  <nuxt-img v-bind="$attrs" />
</template>

Usage file.md:

![Captain Jack Sparrow](/images/jack.png){height="800", quality="80", preload}

Reference: https://github.com/nuxt/content/issues/390#issuecomment-1344593577

answered Feb 10, 2023 at 12:34

Mohsen M.

312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Over a year ago

This is the workaround I ended up going with 👍

Collectives™ on Stack Overflow

Rendering <NuxtImg> in @nuxt/content (v2) markdown file with Nuxt v3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related