Use BASE_URL in component’s JavaScript – Vue.js

You probably already know you can use BASE_URL in your HTML markup like this:

<link rel="manifest" href="<%= BASE_URL %>manifest.json">

If you want to use it within JavaScript you can define a publicPath in your component's data like this:

data() {
   return {
     publicPath: process.env.BASE_URL,
     user: {},
   };
 },

Then simply use it as a regular .vue file or template like any variable:

<img :src="`${publicPath}img/icon.svg`" alt="My Image">

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*