How to add a link to download a file in a md file using Nuxt3 & Nuxt Content?

1.7k Views Asked by At

I want to offer PDF files to download on my Nuxt3 site which uses Nuxt Content.

According to the answers given here this should be possible by just putting the pdf file into the /static folder and link it via

<a href="/my_pdf_file.pdf" download>Download</a>

In Nuxt3, the static folder has been renamed to public, so I just assumed putting my pdf into /public and using the same link should work.

But unfortunately it doesn't - I get a 404 Error when clicking on the Download link and Vue warns me anyway [Vue Router warn]: No match found for location with path "/my_pdf_file.pdf" (I did put the file into the folder, trust me).

I'm using Nuxt Content (2.1.0) and want to put the link in a .md file that lives in the /content folder.

Here is a minimal, reproducible example in which the Download does not work: https://github.com/chamaoskurumi/nuxt3content_example

Any ideas how to solve this?

1

There are 1 best solutions below

3
On BEST ANSWER

Update after an official answer

As confirmed here by an official core maintainer of the Nuxt team, you can use this syntax

# Nuxt Content

[Download](/dummy.pdf){target="_blank" download="dummy.pdf"} pdf via MDC syntax

<a href="/dummy.pdf" target="_blank" download="awesome.pdf">Download</a> via regular HTML syntax

The given solution perfectly works, there is something with your project configuration or maybe your version of Nuxt.
Here is a visual of how it should be exactly.

enter image description here

Just double-checked and it works perfectly fine.

Here is a result: https://share.cleanshot.com/0YCBRVYB