1

hello there i am trying to access my youtube api key located in the .env file from within this code:

<template>
   <div class="YoutubeDash__wrapper">
      <video-group :videos="videos"></video-group>
   </div>
</template>

<script>
  import VideoGroup from './VideoGroup.vue';
  import Search from './Search';

  export default {
    components: {
      VideoGroup
    },
    created(){
      Search({
        apiKey: process.env.VUE_APP_SECRET,
        term: 'laravel repo'
      }, response => this.videos = response);
    },

    data(){
      return {
        videos: null
      }
    }
  }
</script>

According to the documentation using env variables with vue.js. Everything seems to be correct. In my .env file i say: VUE_APP_SECRET=xxxxxxxxxxxxxxx, what am i missing here ?

I get this error message: 

app.js:37809 Error: YouTube search would require a key

Any tips are welcome! Thanks a lot!

Improve this question
1
  • Try using the dotenv package. Commented Sep 16, 2018 at 11:35

2 Answers 2

Reset to default
1

We need to work with a small amount of information here so I am going to make a few assumptions (based on the tags) mostly that you are using laravel and laravel-mix to compile your resources.

For laravel(-mix) to make your .env variables accessible by JS you need to prefix them with MIX_ i.e. MIX_VUE_APP_SECRET. This will make your variable accessible as process.env.MIX_VUE_APP_SECRET.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

yes @milo526 i use laravel-mix sorry... i manage it to use a vue.config.js file and import the variable, but i will try your suggestion now.... i prefer to have everything in the .env file....
nope still not working mmmh my code is like so: Search({ apiKey: process.env.MIX_VUE_APP_SECRET, term: 'laravel repo' }, response => this.videos = response);
You will need to place the MIX_VUE_APP_SECRET=XXXXXXXXX in your .env file, also be sure to reload your config cache by running php artisan config:cache
did both and still error message 😫Error: YouTube search would require a key at module.exports (app.js:47895) at VueComponent.created (app.js:47872) at callHook (app.js:38989) at VueComponent.Vue._init (app.js:40698) at new VueComponent (app.js:40866) at createComponentInstanceForVnode (app.js:40378) at init (app.js:40199) at createComponent (app.js:41676) at createElm (app.js:41623) at createChildren (app.js:41750)
running vue in dev mode !?
0

I prefer excluding laravel-mix from this process.
Usually, in my blade entry-point I use meta tags:

<meta name="myVal" content="{{ config('<any-config-key>') }}">

<any-config-key> can be any laravel configuration key including those taken from .env.
Then, in my javascript I do something like:

const setVueGlobal = (metaHeaderName, vueGlobalName) => {
    let value = document.head.querySelector('meta[name="' + metaHeaderName + '"]').content;
    if (!value) {
        console.error('some error msg');
        return null;
    }

    Vue.prototype[vueGlobalName] = value;
    return value;
};

setVueGlobal('myVal', '$myVal');

Finally, accessing using this.$myVal

Improve this answer

1 Comment

good idea @aviram but i am trying to access the laravel .env file to get an api key in a vue context, i don't think its useful to access it in the head tag in my case, but thanks anyway.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.