Search code examples
vue.jsnuxt.jsnuxt3.jsnuxt-content

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

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?

Solution

  • 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