How to use config variables in vue.js component

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...


  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:


And you can access it like


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 }}

- Last updated 3 years ago

Be the first to leave a comment.

You must login to leave a comment