Typed components for React, Vue, Nuxt & more.

A typed <AskThis /> component. Renders a container and mounts the widget into it.

import { AskThis } from "@askthis/react";

export function Share() {
  return <AskThis siteId="YOUR_SITE_ID" />;
}

Same package — the App Router just needs it in a client component.

"use client";
import { AskThis } from "@askthis/react";

export function Share() {
  return <AskThis siteId="YOUR_SITE_ID" />;
}

A <AskThis> component for Vue 3 single-file components.

<script setup lang="ts">
import { AskThis } from "@askthis/vue";
</script>

<template>
  <AskThis site-id="YOUR_SITE_ID" />
</template>

Nuxt is Vue 3 — the same component, wrapped in <ClientOnly> so it mounts on the client.

<template>
  <ClientOnly>
    <AskThis site-id="YOUR_SITE_ID" />
  </ClientOnly>
</template>

<script setup lang="ts">
import { AskThis } from "@askthis/vue";
</script>

Mount with the framework-free loader in onMount; return the cleanup fn on destroy.

<script lang="ts">
  import { onMount } from "svelte";
  import { createWidget } from "@askthis/embed";
  let el;
  onMount(() => createWidget(el, { siteId: "YOUR_SITE_ID" }));
</script>

<div bind:this={el}></div>

Mount in onMount and hand the cleanup fn to onCleanup.

import { onMount, onCleanup } from "solid-js";
import { createWidget } from "@askthis/embed";

export function Share() {
  let el;
  onMount(() => onCleanup(createWidget(el, { siteId: "YOUR_SITE_ID" })));
  return <div ref={el} />;
}

Drop the universal script in your layout — or use a framework island with the package above.

---
// src/layouts/Base.astro
---
<script async
  src="https://cdn.askthis.io/widget.js"
  data-site-id="YOUR_SITE_ID"></script>

For Angular or any other framework — inject the widget into any element, get a cleanup fn.

import { createWidget } from "@askthis/embed";

const cleanup = createWidget(el, { siteId: "YOUR_SITE_ID" });
// later: cleanup();