Nuxt 3 - window is not defined

[mak33v]

Hello 👋

Nuxt 3 5.2 - window is not defined

[RayJason]

You should init it in

onMounted(() => nextTick(()=>{..}))

[soulinmaikadua]

same issue Nuxt 3.7.3 window is not defined after install install vue3-apexcharts and apexcharts

[kieranmansfield]

Same issue, nuxt 3.8.0.

Tried this, didn't solve it for me. @RayJason

You should init it in

onMounted(() => nextTick(()=>{..}))

Error message -

500
window is not defined
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

and terminal is showing me this -

[Vue warn]: Component LayoutLoader is missing template or render function.

[evilmastermind]

Same issue for me in nuxt 3.8.0. It's from a component that's used in a route that is supposed to be set to { ssr: false }... so window should be available in it?

500
window is not defined

at setup ([my project folder]\components\Navbar\Theme.js:41:5)
at _sfc_main.setup ([my project folder]\components\Navbar\Theme.js:95:23)
at callWithErrorHandling ([my project folder]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:156:18)
at setupStatefulComponent ([my project folder]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7244:25)
at setupComponent ([my project folder]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7205:36)
at renderComponentVNode ([my project folder]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:614:15)
at Module.ssrRenderComponent ([my project folder]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:86:10)
at [my project folder]\components\Navbar\Settings.js:113:38
at renderFnWithContext ([my project folder]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:767:13)

[jibrilmohamod]

Anyone have a solution , I'm getting the same error.

[cmarcelly]

Try to use this plugin to import the library: https://github.com/bluwy/vite-plugin-iso-import

[pieterjanmaes]

This works for me:

// ./plugins/locomotive.client.ts

import LocomotiveScroll from 'locomotive-scroll';

export default defineNuxtPlugin(nuxtApp => {
  let locomotiveScroll: LocomotiveScroll | null = null;

  nuxtApp.hook('page:start', () => {
    locomotiveScroll?.destroy();
  });

  nuxtApp.hook('page:finish', () => {
    locomotiveScroll = new LocomotiveScroll();
  });
});

I'm using:

• Nuxt: 3.11.2
• locomotive-scroll: 5.0.0-beta.12