Server a static pdf - Vue CLI - Webpack - issue

user_3723311 0
Viewed 3821

I build a little front thanks to VueCLI (+ Vuetify).

I wanted to render a button where onClick open a new tab with a pdf located in the folder's tree of the project.

I have an error and after hours looking why, it's seems to be a webpack conf to modify.

I finally read this answer on S/O ; Serving static pdf with react webpack file loader

But I got an error saying include: paths -> paths is not defined

I have to admit that I have no clue how webpack works behind the scene so any help would be find.

vue.js webpack pdf
1 Answers

You probably don't need Webpack for this: you can just put it in your static folder and link to it <a href="/static/mypdf.pdf">pdf</a>. If you want to go the Webpack route, put it in your src/assets directory and import it and add it to data object:

import pdf from '../assets/mypdf.pdf'

//...
data: () => ({ pdf })
//...

Then use the link in your component:

<a :href="pdf">pdf</a>

You probably added include: paths to the loader config but you didn't define it, instead of modifying your image loader, add a new one for PDFs:

  {
    test: /\.(pdf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      name: utils.assetsPath('[name].[hash:7].[ext]')
    }
  }

You can change [name].[hash:7].[ext] if you want, say you want to add a pdfs directory in assets instead of using the base assets directory you would use: pdfs/[name].[hash:7].[ext]

user_8944200
Related