CODEWITHSUNDEEP
vue.jsnuxt.js
waffl
waffl

Reputation: 5511

Nuxt Content: How to link to binary files from markdown/yaml?

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.

Upvotes: 1

Views: 403

Answers (1)

tony19
tony19

Reputation: 138636

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

Upvotes: -1

Related Questions