How to access the window object in vue js?

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

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;

In Vue3, you no longer have the global Vue instance, so you need to assign the window as a global property on your app...

// main.js
app.config.globalProperties.window = window

Then in your components, window will just work.

This info is from an impeccable source.

window is available in the vuex store. This may help if you need to mutate the window property synchronously with other actions/mutations, give you a chance to validate what goes into it, or catch an error if the variable you intend to put there isn't available.

export default new Vuex.store({
  state: {
    windowFoo: window.foo,
    googleRecaptcha: window.google_recaptcha_public_key
  },
  getters: {
    windowFoo: (state) => state.windowFoo,
    googleRecaptcha: (state) => state.googleRecaptcha
  },
  actions: {
    barThenFooThenBaz({ commit }, { foo }) {
        // ... do some other required actions first
        commit("setWindowFoo", foo);
       // ... do some dependent actions next
    }
  },
  mutations: {
    setWindowFoo(state, foo) {
      state.windowFoo = foo;
    }
  }
});

Then from your Single File Component...

//....
computed: {
  windowFoo() {
    return this.$store.getters.windowFoo;
  },
  googleRecaptcha() {
    return this.$store.getters.googleRecaptcha;
  }
},
methods: {
  async barThenFooThenBaz(foo) {
     await this.$store.dispatch({
       type: "barThenFooThenBaz",
       foo: foo
     });
     // ... do something dependent on windowFoo being set
  }
}
//....

Although the other answers here are totally acceptable, I've had issues using the Vue instance with Vue.prototype in main.js as our project has gotten larger, so I hope this helps!

Provide/Inject works nicely. Here's an example with Vue 3:

main.js

const app = createApp(App)
app.provide('recaptcha_key', window.google_recaptcha_public_key)
app.mount('#app')

MyComponent.vue

<script setup>
const { inject } from 'vue'
const recaptchaKey = inject('recaptcha_key')
</script>