How to access the window object in vue js?

Question

I have this vue js component:

Answer 1

U can use Vue.prototype in main.js file, or in file you import Vue

Vue.prototype.Hereanyname = window.hereanyname;

and in your Vue application, you can use it

Hereanyname.thefunction

Real example on Laravel

in main.js

import Vue from 'vue';
Vue.prototype.Routes = window.routes;

new Vue({
    el: '#app',
    template: '<App/>',
    components: {App}
});

in your application

:href="Routes.route('laravel.route.here')"

So for your case

import Vue from 'vue';
Vue.prototype.GoogleRecaptcha = window.google_recaptcha_public_key;

new Vue({
    el: '#app',
    template: '<App/>',
    components: {App}
});

inside application

mounted() {
  console.log(this.GoogleRecaptcha)
}

Answer 2

You should save your window variable in Vue.prototype

main.js

Vue.prototype.$authUser = window.authUser;

After that, you can access your data as follows:

Vue template

<div v-text="$authUser.name"></div>

Vue script

let name = this.$authUser.name;