fix:Adjust the demo.vue file name and modify the SSR Compatibility de…

…scription.
vueuse · antfu · May 14, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 7, 2025
commit 5d88cacde8794bbdcacba87d9eb28ee19949e8d2
diff --git a/packages/core/useGamepad/demo.client.vue b/packages/core/useGamepad/demo.client.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useGamepad } from '@vueuse/core'
+import Gamepad from './components/Gamepad.vue'
+
+const { isSupported, gamepads } = useGamepad()
+</script>
+
+<template>
+  <div>
+    <div v-if="!isSupported" flex="~ row" place="items-center content-center" items="center" space="x-4">
+      <i i-carbon-error text="5xl" opacity="50" />
+      <div flex="~ col">
+        <span text="2xl">Gamepad is not supported on this device.</span>
+        <span opacity="70">It seems your device does not support the Gamepad API. Check <a href="https://caniuse.com/gamepad">here</a> for a list supported devices.</span>
+      </div>
+    </div>
+    <div v-else-if="gamepads.length === 0" flex="~ row" place="items-center content-center" items="center" space="x-4">
+      <i i-carbon-game-console text="5xl" opacity="50" />
+      <div flex="~ col">
+        <span text="2xl">No Gamepad Detected</span>
+        <span opacity="50">Ensure your gamepad is connected and press a button to wake it up.</span>
+      </div>
+    </div>
+    <div v-else space="y-4">
+      <Gamepad v-for="gamepad in gamepads" :key="gamepad.id" :gamepad="gamepad" />
+    </div>
+  </div>
+</template>
diff --git a/packages/core/useGamepad/demo.vue b/packages/core/useGamepad/demo.vue
diff --git a/packages/core/useGamepad/index.md b/packages/core/useGamepad/index.md
@@ -106,14 +106,10 @@ Currently there are only mappings for the Xbox 360 controller. If you have contr

 ### SSR Compatibility

-When using this component in SSR environments, wrap it with your framework's client-only component to avoid hydration mismatches:
+When using this component in SSR environments, you have a few options to avoid hydration mismatches:

-```vue
-<template>
-  <ClientOnly>
-    <GamepadComponent />
-  </ClientOnly>
-</template>
-```
+#### In Nuxt.js
+
+In Nuxt, you can simply rename your component file with the `.client.vue` suffix (e.g., `GamepadComponent.client.vue`) which will automatically make it render only on the client side, avoiding hydration mismatches.

 This ensures proper rendering across server and client environments.