Nuxt | A mystery in addEventListener: "referenceError: window is not defined"

Question

I am working on a hamburger menu. But i've got an error. It gives the next

ReferenceError: window is not defined. The fault is in the created section.

<script>
export default {
    name: "navigation",
    data() {
        return {
            scrollPosition: null,
            mobile: null,
            mobileNav: null,
            windowWidth: null,
        };
    },
    created() {
        window.addEventListener("resize", this.checkScreen);
        this.checkScreen();
    },
    methods: {
        toggleMobileNav() {
            this.mobileNav = !this.mobileNav;
        },

        checkScreen() {
            this.windowWidth = window.innerWidth;
            if (this.windowWidth <= 750) {
                this.mobile = true;
                return;
            }
            this.mobile = false;
            this.mobileNav = false;
            return;
        },
    },
};
</script>

Answer 1

As explained here: https://stackoverflow.com/a/67751550/8816585

window is undefined here because your code runs on both client and server side. But window is not available on the server side.

Check the solution for further details or use mounted if you're in a hurry.