How to access the window object in vue js?

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.

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;

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>

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!

Another answer that is IMO cleaner and does not involve polluting the Vue global object:

<template>
    <div>
      {{ window.something }}
    </div>
</template>

<script>
  export default {
    name: 'mycomp',
    data: function () {
      return {
        window = document.defaultView
      }
    },
    mounted() {
      console.log(this.window.something);
    },
  }
</script>

window is not available to the Vue instance but document is, and you can reference the defaultView to get the window. In almost all cases this will refer to the same global window instance available outside of Vue's component scope.

I expect ( but haven't tested ) that the window object would not be reactive: you would need to use a computed value alongside another reactive value to get that.