'window' is not defined in Vue.js 2

Question

I'm currently upgrading my application from Vue.js 1 to Vue.js 2. I have a problem with the following function in my main component:

<script>
  export default {
    ready: function listenKeyUp() {
      window.addEventListener('keyup', this.handleKeyUp());
    },

    methods: {
      handleKeyUp(e) {
        if (e.keyCode === 27) {
          this.$router.go({ name: '/' });
        }
      },
    },
  };
</script>

My console shows this error: 'window' is not defined How is this possible? I don't understand the reason. How to fix this and why is this problem coming up with the new version?

--- EDIT --- Some additional code:

main.js:

// Import plugins
import Vue from 'vue';
import VueResource from 'vue-resource';
import VueI18n from 'vue-i18n';

// Import mixins
import api from './mixins/api';

// Import router config
import router from './router';


// Register plugins
Vue.use(VueResource);
Vue.use(VueI18n);
Vue.mixin(api);


// Go
new Vue({
  router,
}).$mount('#app');

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>New website</title>

        <link rel="shortcut icon" href="/static/favicon.ico" />
        <link rel="apple-touch-icon" href="/static/mobile.png">

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> 
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>

        <noscript>
            <div class="container">
                <div class="col-sm-6 col-sm-offset-3">
                    <div class="alert alert-danger">
                        JavaScript is disabled in your web browser!
                    </div>
                </div>
            </div>
        </noscript>

    </body>
</html>

Main component:

<template>
    <div>

        <div class="container">
            <header>
                HEADER HERE
            </header>
        </div>


        <div id="modal" v-if=" $route.name !== 'home' " transition="modal">
            <div id="modal-bg" :to="{ name: 'home' }"></div>
            <div id="modal-container">
                <div id="modal-header">
                    <h2>Modal</h2>
                    <router-link id="modal-close" :to="{ name: 'home' }">X</router-link>
                </div>
                <router-view></router-view>
            </div>
        </div>


        <nav id="primary-navigation">
            <div class="container-fluid">
                <div class="row">
                    NAV HERE
                </div>
            </div>
        </nav>

    </div>
</template>


<script>
  /* SCRIPT PART, SEE TOP OF THIS POST */
</script>


<style lang="scss">
  /* CSS */
</style>

Hexodus · Accepted Answer · 2018-03-13 18:21:00Z

24

The safest place to use browser references is the mounted() lifecycle hook. Especially if you're using a SSR setup like Nuxt.js or similar.

answered Mar 13, 2018 at 18:21

Hexodus

13.1k6 gold badges58 silver badges74 bronze badges

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

1 Comment

fredley Over a year ago

Was using Nuxt, and it wasn't working in created(), but worked in mounted().

Community · Accepted Answer · 2017-05-23 11:54:53Z

6

It's related to Eslint. Putting this:

"env": {
    "browser": true,
    "node": true
}

inside .eslintrc.js in my root fixed the issue. (source)

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Nov 21, 2016 at 20:10

Jordy

4,78512 gold badges52 silver badges82 bronze badges

Comments

darryn.ten · Accepted Answer · 2016-11-21 11:09:05Z

5

Try putting the listener in your created() method

You're also going to be losing context on your this so use a lexical fat arrow to preserve the context

// rest of export
created() {
  // make an event listener and pass the right `this` through
  window.addEventListener('keyup', (event) => {
    // if the key is escape
    if (event.keyCode === 27) {
      // due to `=>` this is the this you're expecting
      this.keyHandler()
    }
  }
},
methods: {
  keyHandler() {
    // this *should* be the right this
    this.$router.go({ name: '/' })
  }
}
// rest of export

Completely untested but it should work (vue 2.x)

answered Nov 21, 2016 at 11:09

darryn.ten

6,9933 gold badges50 silver badges67 bronze badges

4 Comments

Jordy Over a year ago

Thank you. Tried your code but unfortunately the NPM console still displays: 'window' is not defined. How is that possible? What could be the problem?

darryn.ten Over a year ago

The npm console? Isn't this running in the browser?

Jordy Over a year ago

No, after typing 'npm run dev' in the console.

Jordy Over a year ago

Found out it was being related to eslint, see my answer. Thanks for your help anyway!

Ганна Саймонс · Accepted Answer · 2018-09-17 09:46:14Z

0

Fix for vue-cli 3.x projects by editing (creating) vue.config.js:

module.exports = {
    configureWebpack: config => {
        config.output.globalObject = "this"
    }
}

answered Sep 17, 2018 at 9:46

Ганна Саймонс

1

Collectives™ on Stack Overflow

'window' is not defined in Vue.js 2

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related