vue.js - Nuxt Content: How to link to binary files from markdown/yaml?

Question

I have a Nuxt Content project, which fetches a number of content files like so:

/content/resources/item.yaml

---
item:
  title: Hello World
  pdf: sample.pdf

Which is pulled into the Vue component:

async asyncData({ $content }) {
  const resources = await $content('resources').fetch()
  return { resources }
},

Where should the PDF file go in the Nuxt folder structure? and how should it be referred to in the YAML file? I'm trying something like:

/content/resources
-- item.yaml
-- sample.pdf

and then in Vue: <a :href="item.pdf" ..., which always just results in https://url/sample.pdf, which does not load obviously. What is the obvious thing I am missing, as I can't find it anywhere in the Nuxt Content docs?

/content/resources
-- item.yaml

/assets/files
-- sample.pdf

and referencing /assets/files/sample.pdf also doesn't work.

question from:https://stackoverflow.com/questions/65889854/nuxt-content-how-to-link-to-binary-files-from-markdown-yaml

Answer 1

The Nuxt Content docs describe using static assets for this.

Move sample.pdf to static/ in the root of your Nuxt project (e.g., in static/sample.pdf), and then use its static-relative path in your pdf YAML property:

pdf: /sample.pdf