Use watchEffect instead of immediately using an event listener on window (#817)

* use `watchEffect` instead of immediately using an event listener on `window`

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
 - Allow to click on elements inside a `DialogOverlay` ([#816](https://github.com/tailwindlabs/headlessui/pull/816))
+- Fix SSR crash because of `useWindowEvent` ([#817](https://github.com/tailwindlabs/headlessui/pull/817))
 
 ## [@headlessui/react@v1.4.1] - 2021-08-30
 

packages/@headlessui-vue/src/hooks/use-window-event.ts

@@ -1,10 +1,15 @@
-import { onUnmounted } from 'vue'
+import { watchEffect } from 'vue'
 
 export function useWindowEvent<TType extends keyof WindowEventMap>(
   type: TType,
   listener: (this: Window, ev: WindowEventMap[TType]) => any,
   options?: boolean | AddEventListenerOptions
 ) {
-  window.addEventListener(type, listener, options)
-  onUnmounted(() => window.removeEventListener(type, listener, options))
+  watchEffect(onInvalidate => {
+    window.addEventListener(type, listener, options)
+
+    onInvalidate(() => {
+      window.removeEventListener(type, listener, options)
+    })
+  })
 }