use-share

Share text, links, and files through the platform share sheet.

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

Try it

Share a link

Use the system share sheet where it exists and show a copyable link elsewhere.

Open the interactive example

What to observe: On phones and some desktops, Share Vize opens the share sheet. Elsewhere the link is shown instead.

canShare() checks a specific payload, such as files, before offering the button. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

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

const mounted = useMounted();
const { supported, share } = useShare({
  title: "Vize",
  text: "A Vue toolchain in Rust",
  url: "https://vizejs.dev",
});
</script>

<template>
  <div class="composable-example">
    <p>Use the system share sheet on devices that have one, and a copyable link elsewhere.</p>
    <button v-if="mounted && supported" type="button" @click="() => share()">Share Vize</button>
    <p v-else>Copy this link: https://vizejs.dev</p>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : supported
          ? "The share sheet is available."
          : "No share sheet here; showing a link instead."
    }}</output>
  </div>
</template>

Runtime contract

API

useShare

Share text, links, and files through the platform share sheet. Reactive defaults are merged with per-call overrides. Outcomes are reported as a discriminated ShareResult, so a user dismissing the sheet ("cancelled") is distinguishable from missing support or invalid data without try/catch. Server rendering: no capability is resolved, supported is false, and nothing is shared. No resources are retained, so nothing needs cleanup.

function useShare( defaults: MaybeRefOrGetter<ShareDataLike> = {}, options: UseShareOptions = {}, ): ShareControls

const { share, supported } = useShare(() => ({ title: document.title, url: location.href }));
const onClick = () => share();

Types

ShareDataLike

Data shared through the Web Share API.

ShareHost

Minimal Web Share capability (navigator).

UseShareOptions

Options for useShare.

ShareControls

Reactive state and actions returned by useShare.