CODEWITHSUNDEEP
nuxt3.js
Nick
Nick

Reputation: 491

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

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:

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
})

Upvotes: 2

Views: 1001

Answers (1)

Mohsen M.
Mohsen M.

Reputation: 31

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

Upvotes: 3

Related Questions