Vue download file from link href and Vuetify v-btn

Question

I'm new to Vue.js, and I'm struggling with this simple thing.

I'd like to place a Vuetify button on my page and point it to a file, that the user can download. The href part is where nothing works for me. The file to download is placed in the /assets folder.

<v-btn 
   class="ma-2" 
   outlined 
   href="../assets/file.pdf" 
   target="_blank">
       Download PDF
</v-btn>

All it does when I click on the button is point me to a new url which is not displaying anything:

http://localhost:8080/assets/file.pdf

Same result if I place my file to the /public directory.

Thanks for any help

Answer 1

It should work when you place the file in public. Anything in public will be in the root directory at runtime. Change the href attribute to:

href="file.pdf" 

You can also remove the target attribute and use the download attribute to force a download:

<a href="file.pdf" download>
   Download PDF
</a>

With a v-btn it's the same idea:

<v-btn 
   class="ma-2" 
   outlined 
   href="file.pdf"
   download>
       Download PDF
</v-btn>