Vue download file from link href and Vuetify v-btn

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

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>