Solution 1 :

My Resume is in the directory where I run my server

Put your resume in public folder, like: public/Avi-Dave-Resume.pdf

and in vue:

<a href="./Avi-Dave-Resume.pdf" target="_blank">pdf</a>

for more, refer to here

Solution 2 :

You can create a page for displaying the pdf

use iframe to show pdf

<iframe src='pdf_name.pdf' ></iframe>
  • Inside routes.js create route to that page
  • when you click on that page it will route you to that page

Solution 3 :

You can achieve the same result changing your current html tag to another.

<a href="path/to/resume/Avi-Dave-Resume.pdf" class="button in-left2" target="_blank">Resume</button>

With that you can remove the v-on:click="openPdf() and the function openPdf().

They will not be needed.

Problem :

Currently, I am developing my personal website using vuejs and I am running into an error when I am trying to open up my resume in another window through a button click. What is happening is that, when I click the corresponding button, instead of opening-up the pdf, it renders the home page again. Here is my button HTML element:

<button class="button in-left2" v-on:click="openPdf()" target="_blank">Resume</button>

Here is the corresponding Method


My Resume is in the directory where I am using the vue cli to render my website. My Resume is in the directory where I run my server. I feel like my file path is wrong, but would love to know more about the issue.


Comment posted by Danizavtz

You can try to change the tag

Comment posted by Aluan Haddad

Sounds like a server config or client side routing issue. If the pdf is coming from the same server as the app, and if you are using HTML5 for hashless client side routing, you need to allow the link to bypass the config that maps every request to index.html

Comment posted by Naila Akbar

you saved my day, Thank you.

Comment posted by jhabar singh Bhati

i recommend you to use routers rather than using href’s

Comment posted by Avi Dave

So I actually tried this too, and somehow it still re-renders the home page of my website. I feel the way I am doing my path is wrong. All this code is in one of my components file, I even moved my resume to the assets folder but it is still doing the same thing

Comment posted by Danizavtz

It might be cached somewhere, try it in a new tab (incognito mode)


Leave a Reply

Your email address will not be published. Required fields are marked *