Nuxt•3mo ago

How use NuxtContent to hydrate Vue Components using image path ?

Hi, I'm creating a card component to display persons. Like this: Markdown content file :

::card
Main title
#firstName
Robert
#src
robert.jpg
::

::card
Main title
#firstName
Robert
#src
robert.jpg
::

Vue content file

<template>
  <div>
    <div>
      <slot />
    </div>
    <div>
      <slot name="firstName" />
    </div>
    <img :src="imgSrc" />
  </div>
</template>

<template>
  <div>
    <div>
      <slot />
    </div>
    <div>
      <slot name="firstName" />
    </div>
    <img :src="imgSrc" />
  </div>
</template>

But the src is not working with this approach. How can I fix this?

2 Replies

dwol•3mo ago

You're trying to use a slot when you should be using a prop instead. Also How do you expect src to become imgSrc? I'd use a prop instead of slot for the source

dwol•3mo ago

https://content.nuxt.com/usage/markdown#props

Nuxt Content

Markdown - Nuxt Content

Nuxt Content uses the Markdown syntax and conventions to provide a rich-text editing experience.

Gaming

Programming

How use NuxtContent to hydrate Vue Components using image path ?