Displaying yaml data in component

[vedxp]

I've this data in image.yaml file and the file is in content directory itself:

about: a little info about the data inside the file here
data:
- name: name here
  link: link here
  info: description here
- name: name here
  link: link here
  info: description here

I want to display these data in a component like this:

<template>
  <div>
    <p>{{ content.about }}</p>
    <ul>
      <li v-for="item in content.data" :key="item.name">
        <p>{{ item.name }}</p>
        <p>{{ item.link }}</p>
        <p>{{ item.info }}</p>
      </li>
    </ul>
  </div>
</template>

I need help in writing script here, how to fetch the data and display in the template block.

And also, if the code inside template section is correct or not, regarding what the script would be?

:)

[AloisSeckar]

Hi again, answering your call in the nearby discussion :)

Unfortunately I was unable to find quick way of importing data from .yaml directly in Nuxt. I would suggest you use .json data files instead, because then it is easy. If you insist on .yaml (e.g. becuse your external data come in this format), Nuxt Context might be the answer, because it should be capable of parsing .yaml data (among other formats). But I haven't chance to try it yet, so you'll have to go through the docs and elaborate.

[vedxp]

Hi again, answering your call in the nearby discussion :)

Unfortunately I was unable to find quick way of importing data from .yaml directly in Nuxt. I would suggest you use .json data files instead, because then it is easy. If you insist on .yaml (e.g. becuse your external data come in this format), Nuxt Context might be the answer, because it should be capable of parsing .yaml data (among other formats). But I haven't chance to try it yet, so you'll have to go through the docs and elaborate.

I sincerely appreciate your willingness to provide insight and answer my questions. Thank you for your time and efforts :)