How to use config variables in vue.js component

This article is laravel based, but it can work for any application that uses env config such as node.js apps and more...

Steps:

1. Laravel settings
2. Component settings

Laravel settings

In order to have default variables in your components such as app names you need to define those variables in your .env file, based on laravel documentation here is how you can do that:

MIX_SENTRY_DSN_PUBLIC=http://example.com

And you can access it like

process.env.MIX_SENTRY_DSN_PUBLIC

Component settings

All you need to do is in your component in data return env variable like:

data() {
  return {
    app_name: process.env.MIX_SENTRY_DSN_PUBLIC,
  }
},

Now you can have your value in component like:

<div :title="`text ${app_name}`"></div>
// Or
{{ app_name }}