use-supported

Hydration-stable feature detection.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useSupported } from "@vizejs/composable/use-supported";

Try it

Check browser features

Detect browser features after mounting so the first render matches server output.

Open the interactive example

What to observe: Each feature reads available or not available for this browser. During server rendering every check reads not available.

The check runs again after mount, so it is safe to reference navigator or document inside it.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useSupported } from "@vizejs/composable/use-supported";

const features = [
  { name: "Web Share", supported: useSupported(() => "share" in navigator) },
  { name: "Clipboard", supported: useSupported(() => "clipboard" in navigator) },
  { name: "View transitions", supported: useSupported(() => "startViewTransition" in document) },
];
</script>

<template>
  <div class="composable-example">
    <p>Check browser features after mounting, so server and client render the same markup.</p>
    <ul aria-label="Browser features">
      <li v-for="feature in features" :key="feature.name">
        {{ feature.name }}: {{ feature.supported.value ? "available" : "not available" }}
      </li>
    </ul>
  </div>
</template>

Runtime contract

API

useSupported

Hydration-stable feature detection. Inside a component the result is false until the component mounts and then reflects check(), so server and hydrating client render the same fallback first. Outside a component it is evaluated right away when a browser window exists and stays false otherwise. check may read reactive state; the result recomputes when it changes.

function useSupported(check: () => unknown): ComputedRef<boolean>

const isSupported = useSupported(() => "share" in navigator);