Opening a PDF file in another window with VueJS Opening a PDF file in another window with VueJS vue.js vue.js

Opening a PDF file in another window with VueJS


Did you figure it out?

My solution is for projects created with Vue CLI 3 running locally (I haven't built my project yet).

My issue was similar to yours. I just wanted <a> link that opened up my pdf file on a new tab but my url concatenated a single hash to my path and redirected me to my home page. And it was a surprisingly easy fix:

<a href="./resume.pdf" target="_blank">resume</a>

Just a dot, forward slash, and my file name. And my file is located under root > public folder.

Relative Path Imports

When you reference a static asset using relative path (must start with .) inside JavaScript, CSS or *.vue files, the asset will be included into webpack's dependency graph...

https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports


Assuming that you have static folder generated by default by Vue CLI you can simply put the PDF there and do it as follows <a href="./../static/file.pdf" target="_blank">.