vue.js - The global variable is not working with VueJS & Laravel

Question

I have a global variable in app.blade.php like this>

<script>
window.App = {!! json_encode([
    'apiToken' => Auth::user()->api_token,
]) !!};
</script>

I have in app.blade.php layouts a

and it has:

 <script>
  export default {
    created() {
        this.getRol();
    },
    methods: {
        getRol() {
            console.log(App.apiToken);
            axios.get('/api/user?api_token='+App.apiToken)
            .then(response => {
                console.log(response);
                this.rol_id = response.data.data.rol_id;
            });
        }
    }
  }
  </script>

But I wonder why does it say this error?

[Vue warn]: Error in created hook: "ReferenceError: App is not defined"

And it's created globally.

Thanks

question from:https://stackoverflow.com/questions/66050935/the-global-variable-is-not-working-with-vuejs-laravel

Answer 1

To create a "global variable" to be used in Vue, see LinusBorg's answer on the Vue forums here: https://forum.vuejs.org/t/global-variable-for-vue-project/32510/4

Contents of the post:

It’s not a good idea to use tru global variables in projects, to keep the global namespace clean.

Instead, create a small file, from where you can export any variable that you need to use in many places:

// variables.js
export const myVar = 'This is my variable'
export const settings = {
  some: 'Settings'
}

// in your Vue
import { myVar, Settings } from './variables.js'