[Vuejs]-VueUse useEventListener – document not defined in Nuxt3

by

0👍

✅

It does work as intended. Should be a problem with your Nuxt setup.

SFC Playground

const { createApp } = Vue
const { useEventListener } = VueUse

const App = { 
  setup() {   
    console.log(`${new Date().toLocaleTimeString()} Start`)
    const cleanup = useEventListener(document, 'keydown', (e) => {
      if (e.key === 'Escape') {
         alert(`${new Date().toLocaleTimeString()} Esc`)
      }
   })
   return { cleanup }
  }
}

const app = createApp(App)
const vm = app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
<button @click="cleanup">cleanup</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

Leave a comment