use-mounted

Whether the calling component has mounted.

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 { useMounted } from "@vizejs/composable/use-mounted";

Try it

Show browser-only content after mounting

Render a placeholder until the component is mounted, then show values that only exist in the browser.

Open the interactive example

What to observe: The output shows the viewport width once the component has mounted.

useMounted is false during server rendering and the first client render, so hydration sees the same markup.

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 { computed } from "vue";
import { useMounted } from "@vizejs/composable/use-mounted";

const mounted = useMounted();
const width = computed(() => (mounted.value ? window.innerWidth : 0));
</script>

<template>
  <div class="composable-example">
    <p>Render a placeholder on the server and switch to browser-only content after mounting.</p>
    <output aria-live="polite">{{
      mounted ? `Viewport width: ${width}px` : "Measuring the viewport…"
    }}</output>
  </div>
</template>

Runtime contract

API

useMounted

Whether the calling component has mounted. false during server rendering and during hydration, true from the component's onMounted on: gate client-only rendering behind it to keep hydration stable. Outside a component (no instance to mount) it stays false. Component detection uses hasInjectionContext() rather than getCurrentInstance(), which returns null inside Vapor components, so the flag also flips in Vapor.

function useMounted(): Readonly<ShallowRef<boolean>>

const mounted = useMounted();
// <ClientOnlyChart v-if="mounted" />