Where to place application constants in vue-js?

I have all the my application constants in a JavaScript separate file . I need application constants throughout my app. What will be best choice for me to do it.I am newbie to Vue-Js .I can’t import throughout the application on every component.Please suggest a solution .

Hi mohsinraza , welcome to the Vue community!

There are a few ways of doing this. My preferred method is to put all the constants into a single global object, e.g:

window.app = {
   name: "My Awesome App",
   ...
}

Then I add them to my root Vue instance…

new Vue({
  el: "#app",
  app, // <- put the global app object here
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
  },

…so that I can access them in any template anywhere:

  <h1>Welcome to {{$root.$options.app.name}}</h1>

Another option, if you want to avoid all the $root.$options.app... everywhere is to add them to the Vue prototype, but this probably isn’t recommended, so use at your own risk :wink: :

Vue.prototype.$const = {
   appName: "My Awesome App",
   ...
}

Then in any template:

  <h1>Welcome to {{$const.appName}}</h1>