diff --git a/.claude/skills/port-widget/SKILL.md b/.claude/skills/port-widget/SKILL.md
index 2be2d4ff3a0..0fcdece0001 100644
--- a/.claude/skills/port-widget/SKILL.md
+++ b/.claude/skills/port-widget/SKILL.md
@@ -5,16 +5,51 @@ description: Port or introduce an InstantSearch widget or connector-driven featu
 
 # Port InstantSearch Widgets Across Flavors
 
-## Start with the repo audit
+## Start with the audit
 
-- Run `python3 scripts/audit_widget_coverage.py <widget-kebab-name>` from this skill folder before editing.
-- Use `--repo /path/to/instantsearch` if your current working directory is not inside the InstantSearch repo.
-- Treat placeholder Vue failures in `packages/vue-instantsearch/src/__tests__/common-widgets.test.js` or `common-connectors.test.js` as evidence that the connector exists but the Vue wrapper still needs work.
+Always run the audit before editing — it tells you what is actually missing,
+catches variant widgets, and points to the right placeholder strings to remove.
+
+```bash
+# What porting work is open across the whole repo?
+python3 .claude/skills/port-widget/scripts/audit_widget_coverage.py --gaps
+
+# Detailed scorecard for one widget (use the kebab-case directory name)
+python3 .claude/skills/port-widget/scripts/audit_widget_coverage.py <widget>
+```
+
+Pass `--repo /path/to/instantsearch` if your CWD is outside this repo.
+
+The audit's `Notes` section already calls out:
+
+- variant widgets (e.g. `menu-select` reuses `connectMenu`/`useMenu`)
+- special widgets that live outside the normal layout (e.g. `dynamic-widgets`
+  exports its React component from `react-instantsearch-core/src/components/`)
+- Vue placeholder strings still throwing `"X is not supported in Vue InstantSearch"`
+- recommendation/chat widgets that need the `Hits.js` render-function pattern in Vue
+
+Trust those notes — they encode pitfalls that have already burned past porting work.
+
+## Current gap shape (as of this skill version)
+
+Useful to know which patterns dominate so you can plan from the right precedent.
+Re-run `--gaps` to see live state.
+
+- **React widgets missing**: `numeric-menu`, `menu-select` (variant of `menu`),
+  `rating-menu` (needs hook + widget).
+- **Vue components missing**: the recommendation/chat family —
+  `chat`, `filter-suggestions`, `frequently-bought-together`, `looking-similar`,
+  `related-products`, `trending-facets`, `trending-items`, plus an
+  `autocomplete` test-only gap. All have connectors and React widgets already;
+  Vue is the only missing flavor.
+- **Test-suite-only gaps**: several established widgets (`hits`, `search-box`,
+  `clear-refinements`, etc.) lack `tests/common/connectors/<widget>/`. Low
+  priority — add only when changing the connector contract.
 
 ## Layer map
 
 - Connector: `packages/instantsearch.js/src/connectors/<widget>/connect<Pascal>.ts`
-- JS widget: `packages/instantsearch.js/src/widgets/<widget>/<widget>.tsx`
+- JS widget: `packages/instantsearch.js/src/widgets/<widget>/<widget>.tsx` (or `.ts` for `dynamic-widgets`)
 - React hook: `packages/react-instantsearch-core/src/connectors/use<Pascal>.ts`
 - React widget: `packages/react-instantsearch/src/widgets/<Pascal>.tsx`
 - Optional React UI: `packages/react-instantsearch/src/ui/<Pascal>.tsx`
@@ -24,47 +59,95 @@ description: Port or introduce an InstantSearch widget or connector-driven featu
 
 ## Variant widgets
 
-Some widgets reuse another widget's connector with different defaults or UI. For example, `menuSelect` uses `connectMenu`/`useMenu` (not a dedicated `connectMenuSelect`). The audit will show `no` for connector and hook rows — this is expected. The `$$widgetType` still differs (`ais.menuSelect` vs `ais.menu`). When porting a variant widget, skip connector/hook creation and reuse the existing hook directly in the widget file.
+Some widgets reuse another widget's connector with different defaults or UI:
 
-Known variants: `menuSelect` → `connectMenu`/`useMenu`.
+| Variant         | Reuses              | Set `$$widgetType` to |
+| --------------- | ------------------- | --------------------- |
+| `menu-select`   | `connectMenu` / `useMenu`   | `ais.menuSelect`   |
+| `range-input`   | `connectRange` / `useRange` | `ais.rangeInput`   |
+| `range-slider`  | `connectRange`              | `ais.rangeSlider`  |
+
+For these, the audit will show `no` on connector/hook rows by design. Skip
+connector/hook creation, import the upstream hook directly, and only port the
+wrapper plus wrapper tests.
 
 ## Workflow
 
-1. Decide the scope.
-   - Existing connector, missing wrapper: keep the connector API unchanged and port only the wrapper plus wrapper tests.
-   - Variant widget (shared connector, different UI): skip connector/hook creation; reuse the existing hook and set a distinct `$$widgetType`.
-   - Missing connector or changed render state: start in `instantsearch.js`, then update every flavor and both common test suites.
-   - Vue port for a newer recommendation, chat, or filter-suggestions feature: inspect `Hits.js`, `Highlighter.js`, `DynamicWidgets.js`, and `util/vue-compat.js` before designing the wrapper.
-2. Match a real precedent.
-   - Pick one close widget in the target flavor and one close widget in another flavor.
-   - Reuse the same prop names, slot or component escape hatches, `$$widgetType`, and test style.
-3. Build from the bottom up.
-   - Connector exports belong in `packages/instantsearch.js/src/connectors/index.ts`.
-   - JS widget exports belong in `packages/instantsearch.js/src/widgets/index.ts`.
-   - React hook exports belong in `packages/react-instantsearch-core/src/index.ts`.
-   - React widget exports belong in `packages/react-instantsearch/src/widgets/index.ts`; `packages/react-instantsearch/src/index.ts` already re-exports widgets.
-   - Vue exports belong in `packages/vue-instantsearch/src/widgets.js`; `src/instantsearch.js` and the plugin re-export and register from there automatically.
-4. Choose the right sharing model.
-   - JS and React: prefer `instantsearch-ui-components` when the markup can be shared.
-   - React: create `src/ui/<Pascal>.tsx` whenever the widget has no shared factory in `instantsearch-ui-components`. This includes simple widgets like `MenuSelect` (a plain `<select>`) — `src/ui/` is for all React-rendered markup, not only complex cases.
-   - Vue: use `.vue` SFCs for slot-heavy markup and `.js` render functions with `renderCompat` when reusing `instantsearch-ui-components`.
-5. Wire tests before finishing.
+1. **Scope the work.** Run `--gaps` to confirm what's missing, then pick:
+   - Missing wrapper, existing connector → keep the connector API unchanged and
+     port only the wrapper plus wrapper tests.
+   - Variant widget → skip connector/hook creation; reuse the upstream hook and
+     set a distinct `$$widgetType`.
+   - Missing connector or changed render state → start in `instantsearch.js`,
+     then update every flavor and both common test suites.
+   - Recommendation, chat, or filter-suggestions widget being ported to Vue →
+     read the [Vue render-function precedents](references/vue-flavor.md) before
+     designing the wrapper, since these all share the `Hits.js` pattern.
+2. **Pick a precedent.**
+   - Open the [precedent picker](#precedent-picker) below and clone the closest
+     widget that already exists in the target flavor.
+   - Reuse the same prop names, slot or component escape hatches,
+     `$$widgetType`, and test style.
+3. **Build from the bottom up.** Registration entry points:
+   - Connectors: `packages/instantsearch.js/src/connectors/index.ts`
+   - JS widgets: `packages/instantsearch.js/src/widgets/index.ts`
+   - React hooks: `packages/react-instantsearch-core/src/index.ts`
+   - React widgets: `packages/react-instantsearch/src/widgets/index.ts`
+     (`packages/react-instantsearch/src/index.ts` re-exports it for you)
+   - Vue widgets: `packages/vue-instantsearch/src/widgets.js`
+     (`src/instantsearch.js` and the plugin re-register from there)
+4. **Choose the right sharing model.**
+   - JS and React: prefer `instantsearch-ui-components` when the markup can be
+     shared.
+   - React: create `src/ui/<Pascal>.tsx` whenever the widget has no shared
+     factory in `instantsearch-ui-components`. This includes simple widgets
+     like `MenuSelect` (a plain `<select>`) — `src/ui/` is for all
+     React-rendered markup, not only complex cases.
+   - Vue: use `.vue` SFCs for slot-heavy markup and `.js` render functions with
+     `renderCompat` when reusing `instantsearch-ui-components`.
+5. **Wire tests before finishing.**
    - Update `tests/common/widgets/<widget>/` whenever the wrapper behavior changes.
-   - Update `tests/common/connectors/<widget>/` whenever connector params or render state change.
-   - Register the suite in each flavor's `common-widgets.test.*` and `common-connectors.test.*`.
-   - Replace any `throw new Error('X is not supported in ...')` placeholder with real setup code in the target flavor's `common-widgets.test.*`.
+   - Update `tests/common/connectors/<widget>/` whenever connector params or
+     render state change.
+   - Register the suite in each flavor's `common-widgets.test.*` and
+     `common-connectors.test.*`.
+   - Replace any `throw new Error('X is not supported in ...')` placeholder
+     with real setup code. The audit prints the exact placeholder string —
+     watch for irregular names like `RelatedProduct` (singular) for
+     `related-products`.
    - Remove the corresponding `skippedTests` entry in `testOptions` for that widget.
-   - For React: always add the widget to the switch in `packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx` with the required minimum props.
-6. Check examples only when the widget is user-facing.
-   - Search existing examples first. Recommendation, chat, and query-suggestion widgets already live in getting-started or query-suggestions examples, not only the e-commerce apps.
-   - Add to `examples/*/e-commerce` only when the widget fits the shared storefront UX or existing Playwright coverage.
+   - For React: always add the widget to the switch in
+     `packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx`
+     with the required minimum props.
+6. **Check examples only when the widget is user-facing.**
+   - Search existing examples first. Recommendation, chat, and query-suggestion
+     widgets already live in getting-started or query-suggestions examples,
+     not only the e-commerce apps.
+   - Add to `examples/*/e-commerce` only when the widget fits the shared
+     storefront UX or existing Playwright coverage.
+
+## Precedent picker
+
+| Porting target | Best precedents to clone from |
+| --- | --- |
+| JS widget, shared UI | `hits`, `related-products`, `trending-items`, `filter-suggestions` |
+| JS widget, legacy templates + CSS helpers | `refinement-list`, `menu`, `pagination` |
+| React widget with shared UI factory | `Hits.tsx`, `RelatedProducts.tsx`, `TrendingItems.tsx`, `FilterSuggestions.tsx` |
+| React widget with React-only UI in `src/ui` | `SearchBox.tsx`, `RangeInput.tsx`, `RefinementList.tsx`, `Menu.tsx`, `SortBy.tsx`, `HitsPerPage.tsx` |
+| React variant of another widget | `RangeInput.tsx` (uses `useRange`); for `MenuSelect` clone this pattern and use `useMenu` |
+| Vue SFC, slot-heavy template | `RefinementList.vue`, `Menu.vue`, `Pagination.vue` |
+| Vue render-function wrapper around shared UI | `Hits.js`, `Highlighter.js`, `DynamicWidgets.js`, `Feeds.js` |
 
 ## Reminders
 
 - Keep `$$widgetType` aligned across flavors.
-- Do not invent new Vue patterns; match `createWidgetMixin`, `createSuitMixin`, scoped slots, and `renderCompat`.
-- Do not add memoization hooks in React unless an adjacent widget uses them for the same reason.
+- Do not invent new Vue patterns; match `createWidgetMixin`, `createSuitMixin`,
+  scoped slots, and `renderCompat`.
+- Do not add memoization hooks in React unless an adjacent widget uses them for
+  the same reason.
 - `chat` is now available in UMD; no special exclusions apply.
+- Don't trust grep for placeholder names — the audit script knows the irregular
+  ones (e.g. `RelatedProduct` vs `RelatedProducts`).
 
 ## References
 
diff --git a/.claude/skills/port-widget/references/react-flavor.md b/.claude/skills/port-widget/references/react-flavor.md
index 87d218b119f..a6676f58e70 100644
--- a/.claude/skills/port-widget/references/react-flavor.md
+++ b/.claude/skills/port-widget/references/react-flavor.md
@@ -19,7 +19,7 @@ File: `packages/react-instantsearch-core/src/connectors/use<Pascal>.ts`
 Choose the closest precedent before writing code:
 
 - Shared UI component wrapper: `Hits.tsx`, `RelatedProducts.tsx`, `TrendingItems.tsx`, `FilterSuggestions.tsx`
-- React-only presentational UI in `src/ui`: `SearchBox.tsx`, `RangeInput.tsx`, `RefinementList.tsx`, `Menu.tsx`, `MenuSelect.tsx`, `SortBy.tsx`
+- React-only presentational UI in `src/ui`: `SearchBox.tsx`, `RangeInput.tsx`, `RefinementList.tsx`, `Menu.tsx`, `SortBy.tsx`, `HitsPerPage.tsx`
 
 ### If the UI is shared via `instantsearch-ui-components`
 
diff --git a/.claude/skills/port-widget/references/vue-flavor.md b/.claude/skills/port-widget/references/vue-flavor.md
index a2f93d186e0..8f9738e3923 100644
--- a/.claude/skills/port-widget/references/vue-flavor.md
+++ b/.claude/skills/port-widget/references/vue-flavor.md
@@ -3,7 +3,7 @@
 ## Current patterns in this repo
 
 - Slot-heavy SFCs: `RefinementList.vue`, `Menu.vue`, `Pagination.vue`
-- Render-function wrappers around shared UI components: `Hits.js`, `Highlighter.js`
+- Render-function wrappers around shared UI components: `Hits.js`, `Highlighter.js`, `DynamicWidgets.js`, `Feeds.js`
 - Framework glue helpers: `mixins/widget.js`, `mixins/suit.js`, `util/vue-compat.js`
 
 ## Choose the wrapper shape deliberately
@@ -24,19 +24,195 @@
 
 - Import connectors from `instantsearch.js/es/connectors/index`.
 - Use `createWidgetMixin({ connector: ... }, { $$widgetType: 'ais.<camelName>' })`.
-- Use `createSuitMixin({ name: '<Pascal>' })` for BEM classes. When the widget delegates all rendering to a shared `createXxxComponent` factory, the suit mixin's `suit()` method goes unused but the `classNames` prop it provides is still convenient. Pass `this.classNames` directly to the shared component's `classNames` prop (semantic keys like `{ root, container }`, not BEM keys).
+- Use `createSuitMixin({ name: '<Pascal>' })` for BEM classes. When the widget
+  delegates all rendering to a shared `createXxxComponent` factory, the suit
+  mixin's `suit()` method goes unused but the `classNames` prop it provides is
+  still convenient. Pass `this.classNames` directly to the shared component's
+  `classNames` prop (semantic keys like `{ root, container }`, not BEM keys).
 - Expose connector params through a computed `widgetParams()` object.
-- When reusing shared UI factories, wrap the render function with `renderCompat(...)` and map `this.classNames` into the `classNames` prop expected by the shared component.
-- Prefer `getScopedSlot` or `getDefaultSlot` helpers over direct slot access when matching render-function components.
-- In render-function callbacks that reference connector state (e.g. `onSubmit`, `onInput`), read from `this.state.xxx` instead of destructured locals. Vue batches re-renders, so destructured values become stale between synchronous user interactions (type then click).
+- When reusing shared UI factories, wrap the render function with
+  `renderCompat(...)` and map `this.classNames` into the `classNames` prop
+  expected by the shared component.
+- Prefer `getScopedSlot` or `getDefaultSlot` helpers over direct slot access
+  when matching render-function components.
+- In render-function callbacks that reference connector state (e.g. `onSubmit`,
+  `onInput`), read from `this.state.xxx` instead of destructured locals. Vue
+  batches re-renders, so destructured values become stale between synchronous
+  user interactions (type then click).
+
+## Annotated template — render function around a shared UI factory
+
+This is the pattern to use for recommendation widgets (`RelatedProducts`,
+`TrendingItems`, `TrendingFacets`, `FrequentlyBoughtTogether`, `LookingSimilar`)
+and other widgets that reuse a `createXxxComponent` factory from
+`instantsearch-ui-components`. Distilled from `Hits.js` and `Feeds.js`:
+
+```js
+import { createXxxComponent } from 'instantsearch-ui-components';
+import { connectXxx } from 'instantsearch.js/es/connectors/index';
+
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisXxx',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectXxx },
+      { $$widgetType: 'ais.xxx' }, // keep aligned with JS and React
+    ),
+    createSuitMixin({ name: 'Xxx' }),
+  ],
+  props: {
+    // 1:1 with connector params — keep names matching the React widget's props.
+    limit: { type: Number, default: undefined },
+    transformItems: { type: Function, default: undefined },
+    // ...
+  },
+  computed: {
+    widgetParams() {
+      return {
+        limit: this.limit,
+        transformItems: this.transformItems,
+        // ...
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null; // connector hasn't delivered state yet
+    }
+
+    // Map Vue scoped slots onto the shared UI factory's component props.
+    const itemSlot = getScopedSlot(this, 'item');
+    const headerSlot = getScopedSlot(this, 'header');
+
+    return h(createXxxComponent({ createElement: h }), {
+      items: this.state.items,
+      sendEvent: this.state.sendEvent,
+      itemComponent: itemSlot,
+      headerComponent: headerSlot,
+      classNames: this.classNames && {
+        root: this.classNames['ais-Xxx'],
+        list: this.classNames['ais-Xxx-list'],
+        item: this.classNames['ais-Xxx-item'],
+        // ...
+      },
+    });
+  }),
+};
+```
+
+When the matching React widget uses `useInstantSearch().status` (most
+recommendation widgets do), expose it through Vue's `state` too — the connector
+already does this for you via `createWidgetMixin`.
 
 ## Registration checklist
 
 - Export the component from `packages/vue-instantsearch/src/widgets.js`.
-- Do not manually edit `src/plugin.js` or `src/instantsearch.js` for normal widget additions; they already derive registration and exports from `widgets.js`.
-- Search `packages/vue-instantsearch/src/__tests__/common-widgets.test.js` and `common-connectors.test.js` for placeholder "not supported" branches before deciding the widget is genuinely absent.
+- Do not manually edit `src/plugin.js` or `src/instantsearch.js` for normal
+  widget additions; they already derive registration and exports from
+  `widgets.js`.
+- Search `packages/vue-instantsearch/src/__tests__/common-widgets.test.js` and
+  `common-connectors.test.js` for placeholder "not supported" branches before
+  deciding the widget is genuinely absent. The audit script
+  (`--gaps` mode) lists which widgets still have placeholders.
 
 ## Missing-feature caution
 
-- Recommendation widgets, chat, and filter suggestions already have connector-level test placeholders in Vue, but several still throw explicit "not supported" errors at the widget layer.
-- If you port one of those widgets, remove the placeholder failure and replace it with real setup code plus the component implementation.
+- Recommendation widgets, chat, and filter suggestions already have
+  connector-level test placeholders in Vue, but most still throw explicit
+  "not supported" errors at the widget layer.
+- The placeholder name does not always match `PascalCase(widget)` — for
+  example `related-products` uses `RelatedProduct` (singular). The audit
+  prints the exact string.
+- When porting one of those widgets, remove the placeholder failure and
+  replace it with real setup code plus the component implementation.
+- For async connectors like `connectChat`, follow the Vue test timing notes
+  in [testing.md](./testing.md) — initial state arrives after a macrotask,
+  so the test setup needs both `nextTick()` and a `setTimeout(0)` wait.
+
+## Pitfalls discovered while porting recommendation widgets
+
+### Vue 2 needs help with shared JSX factories
+
+The `createXxxComponent` factories in `instantsearch-ui-components` use
+React-style JSX (`<Fragment>`, `onClick={...}`). Vue 2 has no native fragment
+and Vue 2's `createElement` ignores `onClick`-style props (they fall through
+to HTML attributes). The augmented `renderCompat` `h` in
+`util/vue-compat/index-vue2.js` now normalizes both — but only for the
+augmented path. When you import shared factories:
+
+```js
+import { Fragment, renderCompat } from '../util/vue-compat';
+// ...
+return h(createXxxComponent({ createElement: h, Fragment }), props);
+```
+
+Always pass `Fragment`. Without it, the default `EmptyComponent` /
+`DefaultItem` from `recommend-shared/` crash in Vue 2.
+
+### Tracking `status` reactively
+
+The shared Recommend components need a `status` prop to decide between
+"render results" and "render empty state." React reads it from
+`useInstantSearch()`; Vue must subscribe to the InstantSearch lifecycle.
+
+Use the shared mixin instead of re-implementing per widget:
+
+```js
+import { createRecommendMixin } from '../mixins/recommend';
+// ...
+mixins: [
+  createWidgetMixin({ connector: connectXxx }, { $$widgetType: '...' }),
+  createSuitMixin({ name: 'Xxx' }),
+  createRecommendMixin(),
+],
+// then in render: `status: this.status`
+```
+
+`createRecommendMixin` is defensive: if the surrounding test or harness
+provides a stub InstantSearch instance without `addListener`, it skips
+subscribing and falls back to `'idle'`.
+
+### Async state delivery in test setup
+
+Recommend connectors deliver state after the Recommend API resolves. The
+Vue setup function must flush both the macrotask queue and Vue's update
+queue, in that order:
+
+```js
+mountApp({ render: ... }, container);
+await nextTick();
+await new Promise((resolve) => setTimeout(resolve, 0));
+await nextTick();
+```
+
+### Vue swallows connector throws
+
+Some common tests assert that the widget throws on missing required
+options (e.g. `agentId`). Vue's `created` hook logs the error via
+`[Vue warn]` instead of letting it propagate. Skip these tests for Vue
+via `skippableTest` rather than fighting the framework:
+
+```js
+createXxxWidgetTests: {
+  skippedTests: {
+    'throws without agentId': true,
+  },
+},
+```
+
+For this to work, the test source file must wrap the test in
+`skippableTest(name, skippedTests, fn)` instead of plain `test(name, fn)`.
+Same for whole describe blocks — use `skippableDescribe`.
+
+### Flavored test suites need real Vue params
+
+When a widget's test index declares `flavored = true` (e.g. FilterSuggestions,
+Chat), `runTestSuites` extracts `widgetParams[flavor]`. If `vue:
+Record<string, never>` was used as a placeholder, the Vue setup receives an
+empty object and the connector will throw on missing required params. Update
+the type to a real connector params shape and fill in real values in every
+test case before wiring up the Vue setup.
diff --git a/.claude/skills/port-widget/scripts/audit_widget_coverage.py b/.claude/skills/port-widget/scripts/audit_widget_coverage.py
index 273e2beb0d0..3f85bcd5935 100755
--- a/.claude/skills/port-widget/scripts/audit_widget_coverage.py
+++ b/.claude/skills/port-widget/scripts/audit_widget_coverage.py
@@ -1,18 +1,65 @@
 #!/usr/bin/env python3
 
+"""Audit InstantSearch widget coverage across JavaScript, React, and Vue.
+
+Usage:
+    audit_widget_coverage.py <widget> [<widget> ...]
+    audit_widget_coverage.py --all
+    audit_widget_coverage.py --gaps      # only widgets with missing artifacts
+"""
+
 from __future__ import annotations
 
 import argparse
+import re
 import subprocess
 import sys
 from pathlib import Path
 from typing import Iterable
 
 
+# Widgets that reuse another widget's connector/hook.
+# A variant's connector and hook entries are expected to be absent.
+VARIANTS: dict[str, str] = {
+    "menu-select": "menu",        # uses connectMenu / useMenu
+    "range-input": "range",       # uses connectRange / useRange
+    "range-slider": "range",      # JS-only widget that uses connectRange
+}
+
+# Widgets that don't follow the normal widget layout. Skipped by --gaps.
+SPECIAL: dict[str, str] = {
+    "instantsearch": (
+        "Root provider widget. Lives in core packages and bootstraps the app — "
+        "not a normal widget to port."
+    ),
+    "dynamic-widgets": (
+        "React component lives in `react-instantsearch-core/src/components/DynamicWidgets.tsx`, "
+        "not in `react-instantsearch/src/widgets/`."
+    ),
+}
+
+# Vue placeholder names that don't match `PascalCase(widget)`.
+# Map widget kebab name -> placeholder string used in
+# `packages/vue-instantsearch/src/__tests__/common-widgets.test.js`.
+VUE_WIDGET_PLACEHOLDER_NAMES: dict[str, str] = {
+    "related-products": "RelatedProduct",  # singular in the placeholder
+}
+
+# Vue widgets known to ship as `.js` render-function wrappers around a shared
+# UI factory rather than `.vue` SFCs. Useful as precedents when porting newer
+# recommendation/chat widgets.
+VUE_RENDER_FUNCTION_PRECEDENTS = ("Hits.js", "Highlighter.js", "DynamicWidgets.js", "Feeds.js")
+
+
 def pascal_case(widget: str) -> str:
     return "".join(part.capitalize() for part in widget.split("-"))
 
 
+def camel_case(widget: str) -> str:
+    pascal = pascal_case(widget)
+    return pascal[0].lower() + pascal[1:]
+
+
 def detect_repo_root(start: Path, explicit_repo: str | None) -> Path:
     if explicit_repo:
         root = Path(explicit_repo).expanduser().resolve()
@@ -58,6 +105,13 @@ def file_contains(path: Path, needle: str) -> bool:
     return needle in path.read_text()
 
 
+def file_matches(path: Path, pattern: re.Pattern[str]) -> bool:
+    if not path.exists():
+        return False
+
+    return bool(pattern.search(path.read_text()))
+
+
 def rel(root: Path, value: str) -> str:
     if " | " in value:
         return " | ".join(rel(root, item) for item in value.split(" | "))
@@ -69,84 +123,58 @@ def rel(root: Path, value: str) -> str:
         return value
 
 
+def js_widget_paths(root: Path, widget: str) -> list[Path]:
+    """JS widgets can be either .tsx (most) or .ts (dynamic-widgets)."""
+    base = root / "packages" / "instantsearch.js" / "src" / "widgets" / widget
+    return [base / f"{widget}.tsx", base / f"{widget}.ts"]
+
+
+def vue_component_paths(root: Path, widget: str) -> list[Path]:
+    base = root / "packages" / "vue-instantsearch" / "src" / "components"
+    pascal = pascal_case(widget)
+    return [base / f"{pascal}.vue", base / f"{pascal}.js"]
+
+
 def build_rows(
     root: Path, widget: str
 ) -> tuple[str, list[tuple[str, bool, str]], list[str]]:
     pascal = pascal_case(widget)
-    camel = pascal[0].lower() + pascal[1:]
+    camel = camel_case(widget)
+    variant_of = VARIANTS.get(widget)
+
+    if variant_of:
+        connector_owner = variant_of
+        hook_owner = variant_of
+    else:
+        connector_owner = widget
+        hook_owner = widget
 
-    vue_component_paths = [
+    connector_pascal = pascal_case(connector_owner)
+    connector_path = (
         root
         / "packages"
-        / "vue-instantsearch"
+        / "instantsearch.js"
         / "src"
-        / "components"
-        / f"{pascal}.vue",
-        root / "packages" / "vue-instantsearch" / "src" / "components" / f"{pascal}.js",
-    ]
+        / "connectors"
+        / connector_owner
+        / f"connect{connector_pascal}.ts"
+    )
+    hook_path = (
+        root
+        / "packages"
+        / "react-instantsearch-core"
+        / "src"
+        / "connectors"
+        / f"use{connector_pascal}.ts"
+    )
+
+    js_present, js_path = exists_any(js_widget_paths(root, widget))
+    vue_present, vue_path = exists_any(vue_component_paths(root, widget))
 
     rows: list[tuple[str, bool, str]] = [
-        (
-            "connector",
-            (
-                root
-                / "packages"
-                / "instantsearch.js"
-                / "src"
-                / "connectors"
-                / widget
-                / f"connect{pascal}.ts"
-            ).exists(),
-            str(
-                root
-                / "packages"
-                / "instantsearch.js"
-                / "src"
-                / "connectors"
-                / widget
-                / f"connect{pascal}.ts"
-            ),
-        ),
-        (
-            "js widget",
-            (
-                root
-                / "packages"
-                / "instantsearch.js"
-                / "src"
-                / "widgets"
-                / widget
-                / f"{widget}.tsx"
-            ).exists(),
-            str(
-                root
-                / "packages"
-                / "instantsearch.js"
-                / "src"
-                / "widgets"
-                / widget
-                / f"{widget}.tsx"
-            ),
-        ),
-        (
-            "react hook",
-            (
-                root
-                / "packages"
-                / "react-instantsearch-core"
-                / "src"
-                / "connectors"
-                / f"use{pascal}.ts"
-            ).exists(),
-            str(
-                root
-                / "packages"
-                / "react-instantsearch-core"
-                / "src"
-                / "connectors"
-                / f"use{pascal}.ts"
-            ),
-        ),
+        ("connector", connector_path.exists(), str(connector_path)),
+        ("js widget", js_present, js_path),
+        ("react hook", hook_path.exists(), str(hook_path)),
         (
             "react widget",
             (
@@ -185,7 +213,7 @@ def build_rows(
                 / f"{pascal}.tsx"
             ),
         ),
-        ("vue component", *exists_any(vue_component_paths)),
+        ("vue component", vue_present, vue_path),
         (
             "common widget tests",
             (root / "tests" / "common" / "widgets" / widget / "index.ts").exists(),
@@ -199,13 +227,8 @@ def build_rows(
         (
             "js connector export",
             file_contains(
-                root
-                / "packages"
-                / "instantsearch.js"
-                / "src"
-                / "connectors"
-                / "index.ts",
-                f"connect{pascal}",
+                root / "packages" / "instantsearch.js" / "src" / "connectors" / "index.ts",
+                f"connect{connector_pascal}",
             ),
             "packages/instantsearch.js/src/connectors/index.ts",
         ),
@@ -221,20 +244,15 @@ def build_rows(
             "react core export",
             file_contains(
                 root / "packages" / "react-instantsearch-core" / "src" / "index.ts",
-                f"./connectors/use{pascal}",
+                f"./connectors/use{connector_pascal}",
             ),
             "packages/react-instantsearch-core/src/index.ts",
         ),
         (
             "react widget export",
-            file_contains(
-                root
-                / "packages"
-                / "react-instantsearch"
-                / "src"
-                / "widgets"
-                / "index.ts",
-                f"./{pascal}",
+            file_matches(
+                root / "packages" / "react-instantsearch" / "src" / "widgets" / "index.ts",
+                re.compile(rf"['\"]\./{pascal}['\"]"),
             ),
             "packages/react-instantsearch/src/widgets/index.ts",
         ),
@@ -249,6 +267,17 @@ def build_rows(
     ]
 
     notes: list[str] = []
+
+    if variant_of:
+        notes.append(
+            f"Variant of `{variant_of}`: reuses `connect{connector_pascal}` and "
+            f"`use{connector_pascal}`. Skip connector/hook creation and set "
+            f"`$$widgetType: 'ais.{camel}'`."
+        )
+
+    if widget in SPECIAL:
+        notes.append(f"Special widget: {SPECIAL[widget]}")
+
     vue_widget_tests = (
         root
         / "packages"
@@ -257,9 +286,13 @@ def build_rows(
         / "__tests__"
         / "common-widgets.test.js"
     )
-    unsupported_text = f"{pascal} is not supported in Vue InstantSearch"
-    if file_contains(vue_widget_tests, unsupported_text):
-        notes.append("Vue common widget tests still mark this widget as unsupported.")
+    placeholder_name = VUE_WIDGET_PLACEHOLDER_NAMES.get(widget, pascal)
+    placeholder_text = f"{placeholder_name} is not supported in Vue InstantSearch"
+    if file_contains(vue_widget_tests, placeholder_text):
+        notes.append(
+            f"Vue common widget tests still throw `\"{placeholder_text}\"`. "
+            "Replace the placeholder with real setup code."
+        )
 
     vue_connector_tests = (
         root
@@ -269,9 +302,10 @@ def build_rows(
         / "__tests__"
         / "common-connectors.test.js"
     )
-    if file_contains(vue_connector_tests, f"create{pascal}ConnectorTests: () => {{}}"):
+    connector_placeholder = f"create{pascal}ConnectorTests: () => {{}}"
+    if file_contains(vue_connector_tests, connector_placeholder):
         notes.append(
-            "Vue common connector tests still use a placeholder setup for this connector."
+            f"Vue common connector tests still stub `{connector_placeholder}`."
         )
 
     if widget == "autocomplete":
@@ -282,12 +316,15 @@ def build_rows(
         "related-products",
         "frequently-bought-together",
         "trending-items",
+        "trending-facets",
         "looking-similar",
         "filter-suggestions",
         "chat",
     }:
         notes.append(
-            "Check getting-started and query-suggestions examples before adding this widget to the e-commerce apps."
+            "Recommendation/chat family — when porting to Vue, follow the "
+            "`Hits.js` render-function precedent rather than a `.vue` SFC. "
+            "Check getting-started and query-suggestions examples before adding to e-commerce apps."
         )
 
     return camel, rows, notes
@@ -308,6 +345,141 @@ def print_report(root: Path, widget: str) -> None:
             print(f"  - {note}")
 
 
+def gap_summary(root: Path, widget: str) -> dict | None:
+    """Return a dict describing this widget's gaps, or None if fully covered.
+
+    Suppresses gaps that are expected: variant widgets (connector/hook live
+    elsewhere), special widgets that don't follow the layout, and missing
+    `react ui` files (only required for some widgets, not all).
+    """
+    if widget in SPECIAL:
+        return None
+
+    _, rows, notes = build_rows(root, widget)
+    row_map = {label: present for label, present, _ in rows}
+    is_variant = widget in VARIANTS
+
+    # Ignored rows: optional or layout-dependent
+    optional_rows = {"react ui"}
+
+    # Variants intentionally skip these rows
+    if is_variant:
+        optional_rows |= {
+            "connector",
+            "react hook",
+            "common connector tests",
+            "js connector export",
+            "react core export",
+        }
+
+    missing_flavors = {}
+    if not row_map["js widget"] or not row_map["js widget export"]:
+        missing_flavors["js"] = []
+        if not row_map["js widget"]:
+            missing_flavors["js"].append("widget file")
+        if not row_map["js widget export"]:
+            missing_flavors["js"].append("widget export")
+        if not is_variant and not row_map["connector"]:
+            missing_flavors["js"].append("connector file")
+        if not is_variant and not row_map["js connector export"]:
+            missing_flavors["js"].append("connector export")
+
+    react_missing = []
+    if not is_variant and not row_map["react hook"]:
+        react_missing.append("hook")
+    if not is_variant and not row_map["react core export"]:
+        react_missing.append("hook export")
+    if not row_map["react widget"]:
+        react_missing.append("widget")
+    if not row_map["react widget export"]:
+        react_missing.append("widget export")
+    if react_missing:
+        missing_flavors["react"] = react_missing
+
+    vue_missing = []
+    if not row_map["vue component"]:
+        vue_missing.append("component")
+    if not row_map["vue widget export"]:
+        vue_missing.append("export")
+    if any("common widget tests still throw" in note for note in notes):
+        vue_missing.append("widget test placeholder")
+    if any("common connector tests still stub" in note for note in notes):
+        vue_missing.append("connector test placeholder")
+    if vue_missing:
+        missing_flavors["vue"] = vue_missing
+
+    common_tests_missing = []
+    if not row_map["common widget tests"]:
+        common_tests_missing.append("widget suite")
+    if "common connector tests" not in optional_rows and not row_map["common connector tests"]:
+        common_tests_missing.append("connector suite")
+    if common_tests_missing:
+        missing_flavors["tests/common"] = common_tests_missing
+
+    if not missing_flavors:
+        return None
+
+    return {
+        "widget": widget,
+        "variant_of": VARIANTS.get(widget),
+        "missing": missing_flavors,
+        "notes": notes,
+    }
+
+
+def print_gaps(root: Path, widgets: list[str]) -> None:
+    summaries = [g for g in (gap_summary(root, w) for w in widgets) if g]
+
+    if not summaries:
+        print("No gaps found — every audited widget is fully covered.")
+        return
+
+    # A widget can have implementation gaps (js/react/vue) and/or test-suite
+    # gaps (tests/common). Sort into porting work vs test-only follow-ups.
+    react_only = []
+    vue_only = []
+    js_only = []
+    multi_impl = []
+    tests_only = []
+    for s in summaries:
+        impl_flavors = set(s["missing"].keys()) - {"tests/common"}
+        if not impl_flavors:
+            tests_only.append(s)
+            continue
+        if impl_flavors == {"react"}:
+            react_only.append(s)
+        elif impl_flavors == {"vue"}:
+            vue_only.append(s)
+        elif impl_flavors == {"js"}:
+            js_only.append(s)
+        else:
+            multi_impl.append(s)
+
+    def section(title: str, group: list[dict]) -> None:
+        if not group:
+            return
+        header = f"{title} ({len(group)})"
+        print(f"\n{header}")
+        print("-" * len(header))
+        for s in group:
+            variant = f" [variant of {s['variant_of']}]" if s["variant_of"] else ""
+            print(f"  {s['widget']}{variant}")
+            for flavor, items in s["missing"].items():
+                print(f"    {flavor}: {', '.join(items)}")
+
+    impl_count = len(react_only) + len(vue_only) + len(js_only) + len(multi_impl)
+    print(f"Gaps found in {len(summaries)} widget(s) ({impl_count} need porting work).")
+    section("React gaps", react_only)
+    section("Vue gaps", vue_only)
+    section("JS gaps", js_only)
+    section("Multi-flavor gaps", multi_impl)
+    section("Test-suite-only gaps (low priority)", tests_only)
+
+    print("\nNext steps:")
+    print("  - Run `audit_widget_coverage.py <widget>` for the full per-widget report.")
+    print("  - Open `.claude/skills/port-widget/SKILL.md` for the porting workflow.")
+
+
 def discover_widgets(root: Path) -> list[str]:
     widgets_dir = root / "tests" / "common" / "widgets"
     return sorted(path.name for path in widgets_dir.iterdir() if path.is_dir())
@@ -326,6 +498,11 @@ def parse_args() -> argparse.Namespace:
         action="store_true",
         help="Audit every widget that has a shared widget test folder",
     )
+    parser.add_argument(
+        "--gaps",
+        action="store_true",
+        help="Only report widgets with missing artifacts. Implies --all when no widgets are given.",
+    )
     return parser.parse_args()
 
 
@@ -334,11 +511,15 @@ def main() -> int:
     root = detect_repo_root(Path.cwd(), args.repo)
 
     widgets = args.widgets
-    if args.all:
+    if args.all or (args.gaps and not widgets):
         widgets = discover_widgets(root)
 
     if not widgets:
-        raise SystemExit("Pass a widget name or use --all.")
+        raise SystemExit("Pass a widget name, --all, or --gaps.")
+
+    if args.gaps:
+        print_gaps(root, widgets)
+        return 0
 
     for index, widget in enumerate(widgets):
         if index:
diff --git a/packages/react-instantsearch-core/src/connectors/useRatingMenu.ts b/packages/react-instantsearch-core/src/connectors/useRatingMenu.ts
new file mode 100644
index 00000000000..a7c5c548b43
--- /dev/null
+++ b/packages/react-instantsearch-core/src/connectors/useRatingMenu.ts
@@ -0,0 +1,22 @@
+import connectRatingMenu from 'instantsearch.js/es/connectors/rating-menu/connectRatingMenu';
+
+import { useConnector } from '../hooks/useConnector';
+
+import type { AdditionalWidgetProperties } from '../hooks/useConnector';
+import type {
+  RatingMenuConnectorParams,
+  RatingMenuWidgetDescription,
+} from 'instantsearch.js/es/connectors/rating-menu/connectRatingMenu';
+
+export type UseRatingMenuProps = RatingMenuConnectorParams;
+
+export function useRatingMenu(
+  props: UseRatingMenuProps,
+  additionalWidgetProperties?: AdditionalWidgetProperties
+) {
+  return useConnector<RatingMenuConnectorParams, RatingMenuWidgetDescription>(
+    connectRatingMenu,
+    props,
+    additionalWidgetProperties
+  );
+}
diff --git a/packages/react-instantsearch-core/src/index.ts b/packages/react-instantsearch-core/src/index.ts
index bb96081d093..32dba731905 100644
--- a/packages/react-instantsearch-core/src/index.ts
+++ b/packages/react-instantsearch-core/src/index.ts
@@ -26,6 +26,7 @@ export * from './connectors/usePagination';
 export * from './connectors/usePoweredBy';
 export * from './connectors/useQueryRules';
 export * from './connectors/useRange';
+export * from './connectors/useRatingMenu';
 export * from './connectors/useRefinementList';
 export * from './connectors/useRelatedProducts';
 export * from './connectors/useSearchBox';
diff --git a/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx b/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx
index 836217e428c..658a53dff7a 100644
--- a/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx
+++ b/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx
@@ -12,6 +12,8 @@ import {
   HierarchicalMenu,
   Breadcrumb,
   Menu,
+  MenuSelect,
+  NumericMenu,
   Pagination,
   InfiniteHits,
   SearchBox,
@@ -19,6 +21,7 @@ import {
   Hits,
   Index,
   RangeInput,
+  RatingMenu,
   HitsPerPage,
   ClearRefinements,
   CurrentRefinements,
@@ -282,11 +285,21 @@ const testSetups: TestSetupsMap<TestSuites, 'react'> = {
       </form>
     );
   },
-  createRatingMenuWidgetTests() {
-    throw new Error('RatingMenu is not supported in React InstantSearch');
+  createRatingMenuWidgetTests({ instantSearchOptions, widgetParams }) {
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <RatingMenu {...widgetParams} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
   },
-  createNumericMenuWidgetTests() {
-    throw new Error('NumericMenu is not supported in React InstantSearch');
+  createNumericMenuWidgetTests({ instantSearchOptions, widgetParams }) {
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <NumericMenu {...widgetParams} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
   },
   createToggleRefinementWidgetTests({ instantSearchOptions, widgetParams }) {
     render(
@@ -382,8 +395,13 @@ const testSetups: TestSetupsMap<TestSuites, 'react'> = {
       flavor: 'react-instantsearch',
     };
   },
-  createMenuSelectWidgetTests() {
-    throw new Error('MenuSelect is not supported in React InstantSearch');
+  createMenuSelectWidgetTests({ instantSearchOptions, widgetParams }) {
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <MenuSelect {...widgetParams} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
   },
   createDynamicWidgetsWidgetTests({ instantSearchOptions, widgetParams }) {
     render(
@@ -454,12 +472,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createInfiniteHitsWidgetTests: { act },
   createHitsWidgetTests: { act },
   createRangeInputWidgetTests: { act },
-  createRatingMenuWidgetTests: {
-    act,
-    skippedTests: {
-      'RatingMenu widget common tests': true,
-    },
-  },
+  createRatingMenuWidgetTests: { act },
   createInstantSearchWidgetTests: { act },
   createHitsPerPageWidgetTests: { act },
   createClearRefinementsWidgetTests: { act },
@@ -468,24 +481,14 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createSearchBoxWidgetTests: { act },
   createSortByWidgetTests: { act },
   createStatsWidgetTests: { act },
-  createNumericMenuWidgetTests: {
-    act,
-    skippedTests: {
-      'NumericMenu widget common tests': true,
-    },
-  },
+  createNumericMenuWidgetTests: { act },
   createRelatedProductsWidgetTests: { act },
   createFrequentlyBoughtTogetherWidgetTests: { act },
   createTrendingItemsWidgetTests: { act },
   createTrendingFacetsWidgetTests: { act },
   createLookingSimilarWidgetTests: { act },
   createPoweredByWidgetTests: { act },
-  createMenuSelectWidgetTests: {
-    act,
-    skippedTests: {
-      'MenuSelect widget common tests': true,
-    },
-  },
+  createMenuSelectWidgetTests: { act },
   createDynamicWidgetsWidgetTests: { act },
   createChatWidgetTests: {
     act,
diff --git a/packages/react-instantsearch/src/ui/MenuSelect.tsx b/packages/react-instantsearch/src/ui/MenuSelect.tsx
new file mode 100644
index 00000000000..a218fb9d549
--- /dev/null
+++ b/packages/react-instantsearch/src/ui/MenuSelect.tsx
@@ -0,0 +1,80 @@
+import { cx } from 'instantsearch-ui-components';
+import React from 'react';
+
+import type { MenuItem } from 'instantsearch.js/es/connectors/menu/connectMenu';
+
+export type MenuSelectProps = Omit<
+  React.ComponentProps<'div'>,
+  'onChange' | 'defaultValue'
+> & {
+  items: MenuItem[];
+  value: string;
+  onChange?: (value: string) => void;
+  classNames?: Partial<MenuSelectClassNames>;
+  defaultOptionLabel?: string;
+  itemLabel?: (item: MenuItem) => React.ReactNode;
+};
+
+export type MenuSelectClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string;
+  /**
+   * Class names to apply to the root element when there are no refinements possible
+   */
+  noRefinementRoot: string;
+  /**
+   * Class names to apply to the select element
+   */
+  select: string;
+  /**
+   * Class names to apply to the option element
+   */
+  option: string;
+};
+
+export function MenuSelect({
+  items,
+  value,
+  onChange = () => {},
+  classNames = {},
+  defaultOptionLabel = 'See all',
+  itemLabel = (item) => `${item.label} (${item.count})`,
+  ...props
+}: MenuSelectProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        'ais-MenuSelect',
+        classNames.root,
+        items.length === 0 &&
+          cx('ais-MenuSelect--noRefinement', classNames.noRefinementRoot),
+        props.className
+      )}
+    >
+      <select
+        className={cx('ais-MenuSelect-select', classNames.select)}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        <option
+          className={cx('ais-MenuSelect-option', classNames.option)}
+          value=""
+        >
+          {defaultOptionLabel}
+        </option>
+        {items.map((item) => (
+          <option
+            key={item.value}
+            className={cx('ais-MenuSelect-option', classNames.option)}
+            value={item.value}
+          >
+            {itemLabel(item)}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/packages/react-instantsearch/src/ui/NumericMenu.tsx b/packages/react-instantsearch/src/ui/NumericMenu.tsx
new file mode 100644
index 00000000000..7fbf0e5c9bc
--- /dev/null
+++ b/packages/react-instantsearch/src/ui/NumericMenu.tsx
@@ -0,0 +1,100 @@
+import { cx } from 'instantsearch-ui-components';
+import React from 'react';
+
+import type { NumericMenuRenderStateItem } from 'instantsearch.js/es/connectors/numeric-menu/connectNumericMenu';
+
+export type NumericMenuProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
+  items: NumericMenuRenderStateItem[];
+  attribute: string;
+  onRefine: (value: string) => void;
+  classNames?: Partial<NumericMenuClassNames>;
+};
+
+export type NumericMenuClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string;
+  /**
+   * Class names to apply to the root element when there are no refinements possible
+   */
+  noRefinementRoot: string;
+  /**
+   * Class names to apply to the list element
+   */
+  list: string;
+  /**
+   * Class names to apply to each item element
+   */
+  item: string;
+  /**
+   * Class names to apply to each selected item element
+   */
+  selectedItem: string;
+  /**
+   * Class names to apply to each label element
+   */
+  label: string;
+  /**
+   * Class names to apply to each radio input element
+   */
+  radio: string;
+  /**
+   * Class names to apply to each label text element
+   */
+  labelText: string;
+};
+
+export function NumericMenu({
+  items,
+  attribute,
+  onRefine,
+  classNames = {},
+  ...props
+}: NumericMenuProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        'ais-NumericMenu',
+        classNames.root,
+        items.length === 0 &&
+          cx('ais-NumericMenu--noRefinement', classNames.noRefinementRoot),
+        props.className
+      )}
+    >
+      <ul className={cx('ais-NumericMenu-list', classNames.list)}>
+        {items.map((item) => (
+          <li
+            key={item.value}
+            className={cx(
+              'ais-NumericMenu-item',
+              classNames.item,
+              item.isRefined &&
+                cx('ais-NumericMenu-item--selected', classNames.selectedItem)
+            )}
+          >
+            <label className={cx('ais-NumericMenu-label', classNames.label)}>
+              <input
+                className={cx('ais-NumericMenu-radio', classNames.radio)}
+                type="radio"
+                name={attribute}
+                value={item.value}
+                checked={item.isRefined}
+                onChange={(event) => onRefine(event.target.value)}
+              />
+              <span
+                className={cx(
+                  'ais-NumericMenu-labelText',
+                  classNames.labelText
+                )}
+              >
+                {item.label}
+              </span>
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/react-instantsearch/src/ui/RatingMenu.tsx b/packages/react-instantsearch/src/ui/RatingMenu.tsx
new file mode 100644
index 00000000000..9f8ca17e471
--- /dev/null
+++ b/packages/react-instantsearch/src/ui/RatingMenu.tsx
@@ -0,0 +1,180 @@
+import { cx } from 'instantsearch-ui-components';
+import React from 'react';
+
+import { isModifierClick } from './lib/isModifierClick';
+
+import type { RatingMenuRenderState } from 'instantsearch.js/es/connectors/rating-menu/connectRatingMenu';
+
+export type RatingMenuProps = React.ComponentProps<'div'> & {
+  items: RatingMenuRenderState['items'];
+  createURL: RatingMenuRenderState['createURL'];
+  onRefine: (value: string) => void;
+  classNames?: Partial<RatingMenuClassNames>;
+  translations?: Partial<RatingMenuTranslations>;
+};
+
+export type RatingMenuClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string;
+  /**
+   * Class names to apply to the root element when there are no refinements possible
+   */
+  noRefinementRoot: string;
+  /**
+   * Class names to apply to the list element
+   */
+  list: string;
+  /**
+   * Class names to apply to each item element
+   */
+  item: string;
+  /**
+   * Class names to apply to each selected item element
+   */
+  selectedItem: string;
+  /**
+   * Class names to apply to each disabled item element
+   */
+  disabledItem: string;
+  /**
+   * Class names to apply to each link element
+   */
+  link: string;
+  /**
+   * Class names to apply to each star icon element
+   */
+  starIcon: string;
+  /**
+   * Class names to apply to each full star icon element
+   */
+  fullStarIcon: string;
+  /**
+   * Class names to apply to each empty star icon element
+   */
+  emptyStarIcon: string;
+  /**
+   * Class names to apply to each label element
+   */
+  label: string;
+  /**
+   * Class names to apply to each count element
+   */
+  count: string;
+};
+
+export type RatingMenuTranslations = {
+  /**
+   * The text that follows the rating in each link's accessible label.
+   * Receives the rating value as input.
+   */
+  ariaUp: (value: string) => string;
+  /**
+   * The text that follows the rating stars.
+   */
+  andUp: () => React.ReactNode;
+};
+
+export function RatingMenu({
+  items,
+  createURL,
+  onRefine,
+  classNames = {},
+  translations,
+  ...props
+}: RatingMenuProps) {
+  const ariaUp = translations?.ariaUp ?? ((value) => `${value} & up`);
+  const andUp = translations?.andUp ?? (() => <>&amp; Up</>);
+
+  return (
+    <div
+      {...props}
+      className={cx(
+        'ais-RatingMenu',
+        classNames.root,
+        items.length === 0 &&
+          cx('ais-RatingMenu--noRefinement', classNames.noRefinementRoot),
+        props.className
+      )}
+    >
+      <svg style={{ display: 'none' }}>
+        <symbol id="ais-RatingMenu-starSymbol" viewBox="0 0 24 24">
+          <path d="M12 .288l2.833 8.718h9.167l-7.417 5.389 2.833 8.718-7.416-5.388-7.417 5.388 2.833-8.718-7.416-5.389h9.167z" />
+        </symbol>
+        <symbol id="ais-RatingMenu-starEmptySymbol" viewBox="0 0 24 24">
+          <path d="M12 6.76l1.379 4.246h4.465l-3.612 2.625 1.379 4.246-3.611-2.625-3.612 2.625 1.379-4.246-3.612-2.625h4.465l1.38-4.246zm0-6.472l-2.833 8.718h-9.167l7.416 5.389-2.833 8.718 7.417-5.388 7.416 5.388-2.833-8.718 7.417-5.389h-9.167l-2.833-8.718z" />
+        </symbol>
+      </svg>
+      <ul className={cx('ais-RatingMenu-list', classNames.list)}>
+        {items.map((item) => (
+          <li
+            key={item.value}
+            className={cx(
+              'ais-RatingMenu-item',
+              classNames.item,
+              item.isRefined &&
+                cx('ais-RatingMenu-item--selected', classNames.selectedItem),
+              item.count === 0 &&
+                cx('ais-RatingMenu-item--disabled', classNames.disabledItem)
+            )}
+          >
+            <div>
+              <a
+                aria-label={ariaUp(item.value)}
+                className={cx('ais-RatingMenu-link', classNames.link)}
+                href={createURL(item.value)}
+                onClick={(event) => {
+                  if (isModifierClick(event)) {
+                    return;
+                  }
+                  event.preventDefault();
+                  onRefine(item.value);
+                }}
+              >
+                {item.stars.map((isFull, index) => (
+                  <svg
+                    key={index}
+                    aria-hidden="true"
+                    className={cx(
+                      'ais-RatingMenu-starIcon',
+                      classNames.starIcon,
+                      isFull
+                        ? cx(
+                            'ais-RatingMenu-starIcon--full',
+                            classNames.fullStarIcon
+                          )
+                        : cx(
+                            'ais-RatingMenu-starIcon--empty',
+                            classNames.emptyStarIcon
+                          )
+                    )}
+                    width="24"
+                    height="24"
+                  >
+                    <use
+                      href={
+                        isFull
+                          ? '#ais-RatingMenu-starSymbol'
+                          : '#ais-RatingMenu-starEmptySymbol'
+                      }
+                    />
+                  </svg>
+                ))}
+                <span
+                  aria-hidden="true"
+                  className={cx('ais-RatingMenu-label', classNames.label)}
+                >
+                  {andUp()}
+                </span>
+                <span className={cx('ais-RatingMenu-count', classNames.count)}>
+                  {item.count.toLocaleString()}
+                </span>
+              </a>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/react-instantsearch/src/widgets/MenuSelect.tsx b/packages/react-instantsearch/src/widgets/MenuSelect.tsx
new file mode 100644
index 00000000000..8f57bc068d1
--- /dev/null
+++ b/packages/react-instantsearch/src/widgets/MenuSelect.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useMenu } from 'react-instantsearch-core';
+
+import { MenuSelect as MenuSelectUiComponent } from '../ui/MenuSelect';
+
+import type { MenuSelectProps as MenuSelectUiComponentProps } from '../ui/MenuSelect';
+import type { UseMenuProps } from 'react-instantsearch-core';
+
+type UiProps = Pick<MenuSelectUiComponentProps, 'items' | 'value' | 'onChange'>;
+
+export type MenuSelectProps = Omit<MenuSelectUiComponentProps, keyof UiProps> &
+  Omit<UseMenuProps, 'showMore' | 'showMoreLimit'>;
+
+export function MenuSelect({
+  attribute,
+  limit,
+  sortBy,
+  transformItems,
+  ...props
+}: MenuSelectProps) {
+  const { items, refine } = useMenu(
+    {
+      attribute,
+      limit,
+      sortBy,
+      transformItems,
+    },
+    {
+      $$widgetType: 'ais.menuSelect',
+    }
+  );
+
+  const selected = items.find((item) => item.isRefined);
+
+  const uiProps: UiProps = {
+    items,
+    value: selected ? selected.value : '',
+    onChange: refine,
+  };
+
+  return <MenuSelectUiComponent {...props} {...uiProps} />;
+}
diff --git a/packages/react-instantsearch/src/widgets/NumericMenu.tsx b/packages/react-instantsearch/src/widgets/NumericMenu.tsx
new file mode 100644
index 00000000000..30ce409be55
--- /dev/null
+++ b/packages/react-instantsearch/src/widgets/NumericMenu.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useNumericMenu } from 'react-instantsearch-core';
+
+import { NumericMenu as NumericMenuUiComponent } from '../ui/NumericMenu';
+
+import type { NumericMenuProps as NumericMenuUiComponentProps } from '../ui/NumericMenu';
+import type { UseNumericMenuProps } from 'react-instantsearch-core';
+
+type UiProps = Pick<
+  NumericMenuUiComponentProps,
+  'items' | 'attribute' | 'onRefine'
+>;
+
+export type NumericMenuProps = Omit<NumericMenuUiComponentProps, keyof UiProps> &
+  UseNumericMenuProps;
+
+export function NumericMenu({
+  attribute,
+  items,
+  transformItems,
+  ...props
+}: NumericMenuProps) {
+  const { items: refinementItems, refine } = useNumericMenu(
+    {
+      attribute,
+      items,
+      transformItems,
+    },
+    {
+      $$widgetType: 'ais.numericMenu',
+    }
+  );
+
+  const uiProps: UiProps = {
+    items: refinementItems,
+    attribute,
+    onRefine: refine,
+  };
+
+  return <NumericMenuUiComponent {...props} {...uiProps} />;
+}
diff --git a/packages/react-instantsearch/src/widgets/RatingMenu.tsx b/packages/react-instantsearch/src/widgets/RatingMenu.tsx
new file mode 100644
index 00000000000..c12be28f7c9
--- /dev/null
+++ b/packages/react-instantsearch/src/widgets/RatingMenu.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useRatingMenu } from 'react-instantsearch-core';
+
+import { RatingMenu as RatingMenuUiComponent } from '../ui/RatingMenu';
+
+import type { RatingMenuProps as RatingMenuUiComponentProps } from '../ui/RatingMenu';
+import type { UseRatingMenuProps } from 'react-instantsearch-core';
+
+type UiProps = Pick<
+  RatingMenuUiComponentProps,
+  'items' | 'createURL' | 'onRefine'
+>;
+
+export type RatingMenuProps = Omit<RatingMenuUiComponentProps, keyof UiProps> &
+  UseRatingMenuProps;
+
+export function RatingMenu({ attribute, max, ...props }: RatingMenuProps) {
+  const { items, refine, createURL } = useRatingMenu(
+    {
+      attribute,
+      max,
+    },
+    {
+      $$widgetType: 'ais.ratingMenu',
+    }
+  );
+
+  const uiProps: UiProps = {
+    items,
+    createURL,
+    onRefine: refine,
+  };
+
+  return <RatingMenuUiComponent {...props} {...uiProps} />;
+}
diff --git a/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx b/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx
index bfca035da2c..2d00fd6015e 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx
@@ -113,9 +113,18 @@ function Widget<TWidget extends SingleWidget>({
     case 'ToggleRefinement':
     case 'RangeInput':
     case 'RefinementList':
-    case 'Menu': {
+    case 'Menu':
+    case 'MenuSelect': {
       return <widget.Component attribute="brand" {...props} />;
     }
+    case 'NumericMenu': {
+      return (
+        <widget.Component attribute="price" items={[{ label: 'All' }]} {...props} />
+      );
+    }
+    case 'RatingMenu': {
+      return <widget.Component attribute="rating" {...props} />;
+    }
     case 'SearchBox': {
       return <widget.Component onSubmit={undefined} {...props} />;
     }
diff --git a/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx
index a4d05be3bb9..8f91c252e6d 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx
@@ -118,6 +118,16 @@ describe('widgets', () => {
           "$$widgetType": "ais.menu",
           "name": "Menu",
         },
+        {
+          "$$type": "ais.menu",
+          "$$widgetType": "ais.menuSelect",
+          "name": "MenuSelect",
+        },
+        {
+          "$$type": "ais.numericMenu",
+          "$$widgetType": "ais.numericMenu",
+          "name": "NumericMenu",
+        },
         {
           "$$type": "ais.pagination",
           "$$widgetType": "ais.pagination",
@@ -128,6 +138,11 @@ describe('widgets', () => {
           "$$widgetType": "ais.rangeInput",
           "name": "RangeInput",
         },
+        {
+          "$$type": "ais.ratingMenu",
+          "$$widgetType": "ais.ratingMenu",
+          "name": "RatingMenu",
+        },
         {
           "$$type": "ais.refinementList",
           "$$widgetType": "ais.refinementList",
diff --git a/packages/react-instantsearch/src/widgets/index.ts b/packages/react-instantsearch/src/widgets/index.ts
index a3c8bb36f80..aaba9befe34 100644
--- a/packages/react-instantsearch/src/widgets/index.ts
+++ b/packages/react-instantsearch/src/widgets/index.ts
@@ -11,9 +11,12 @@ export * from './HitsPerPage';
 export * from './InfiniteHits';
 export * from './LookingSimilar';
 export * from './Menu';
+export * from './MenuSelect';
+export * from './NumericMenu';
 export * from './Pagination';
 export * from './PoweredBy';
 export * from './RangeInput';
+export * from './RatingMenu';
 export * from './RefinementList';
 export * from './RelatedProducts';
 export * from './ReverseHighlight';
diff --git a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
index 89753a8ccf4..b7da8d61f80 100644
--- a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
+++ b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
@@ -29,6 +29,12 @@ import {
   AisPoweredBy,
   AisMenuSelect,
   AisDynamicWidgets,
+  AisRelatedProducts,
+  AisTrendingItems,
+  AisTrendingFacets,
+  AisLookingSimilar,
+  AisFrequentlyBoughtTogether,
+  AisFilterSuggestions,
 } from '../instantsearch';
 import { renderCompat } from '../util/vue-compat';
 
@@ -509,22 +515,105 @@ const testSetups = {
 
     await nextTick();
   },
-  createRelatedProductsWidgetTests() {
-    throw new Error('RelatedProduct is not supported in Vue InstantSearch');
+  async createRelatedProductsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisRelatedProducts, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createFrequentlyBoughtTogetherWidgetTests() {
-    throw new Error(
-      'FrequentlyBoughtTogether is not supported in Vue InstantSearch'
+  async createFrequentlyBoughtTogetherWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisFrequentlyBoughtTogether, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
     );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createTrendingItemsWidgetTests() {
-    throw new Error('TrendingItems is not supported in Vue InstantSearch');
+  async createTrendingItemsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisTrendingItems, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createTrendingFacetsWidgetTests() {
-    throw new Error('TrendingFacets is not supported in Vue InstantSearch');
+  async createTrendingFacetsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisTrendingFacets, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createLookingSimilarWidgetTests() {
-    throw new Error('LookingSimilar is not supported in Vue InstantSearch');
+  async createLookingSimilarWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisLookingSimilar, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
   createPoweredByWidgetTests({ instantSearchOptions, widgetParams }) {
     mountApp(
@@ -590,8 +679,25 @@ const testSetups = {
   createAutocompleteWidgetTests() {
     throw new Error('Autocomplete is not supported in Vue InstantSearch');
   },
-  createFilterSuggestionsWidgetTests() {
-    throw new Error('FilterSuggestions is not supported in Vue InstantSearch');
+  async createFilterSuggestionsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisFilterSuggestions, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
 };
 
@@ -619,23 +725,11 @@ const testOptions = {
   },
   createSortByWidgetTests: undefined,
   createStatsWidgetTests: undefined,
-  createRelatedProductsWidgetTests: {
-    skippedTests: {
-      'RelatedProducts widget common tests': true,
-    },
-  },
-  createFrequentlyBoughtTogetherWidgetTests: {
-    skippedTests: { 'FrequentlyBoughtTogether widget common tests': true },
-  },
-  createTrendingItemsWidgetTests: {
-    skippedTests: { 'TrendingItems widget common tests': true },
-  },
-  createTrendingFacetsWidgetTests: {
-    skippedTests: { 'TrendingFacets widget common tests': true },
-  },
-  createLookingSimilarWidgetTests: {
-    skippedTests: { 'LookingSimilar widget common tests': true },
-  },
+  createRelatedProductsWidgetTests: undefined,
+  createFrequentlyBoughtTogetherWidgetTests: undefined,
+  createTrendingItemsWidgetTests: undefined,
+  createTrendingFacetsWidgetTests: undefined,
+  createLookingSimilarWidgetTests: undefined,
   createPoweredByWidgetTests: undefined,
   createDynamicWidgetsWidgetTests: undefined,
   createChatWidgetTests: {
@@ -645,7 +739,12 @@ const testOptions = {
     skippedTests: { 'Autocomplete widget common tests': true },
   },
   createFilterSuggestionsWidgetTests: {
-    skippedTests: { 'FilterSuggestions widget common tests': true },
+    skippedTests: {
+      // React/JS pass UI factories that Vue cannot apply directly.
+      templates: true,
+      // Vue's `created` hook swallows the connector's synchronous throw.
+      'throws without agentId': true,
+    },
   },
 };
 
diff --git a/packages/vue-instantsearch/src/__tests__/index.js b/packages/vue-instantsearch/src/__tests__/index.js
index 0fc7bb76e1d..375d217149d 100644
--- a/packages/vue-instantsearch/src/__tests__/index.js
+++ b/packages/vue-instantsearch/src/__tests__/index.js
@@ -80,6 +80,18 @@ function getAllComponents() {
         props.indexName = 'indexName';
       } else if (name === 'AisFeeds') {
         props.isolated = false;
+      } else if (
+        name === 'AisRelatedProducts' ||
+        name === 'AisFrequentlyBoughtTogether' ||
+        name === 'AisLookingSimilar'
+      ) {
+        props.objectIDs = ['1'];
+      } else if (name === 'AisTrendingFacets') {
+        props.facetName = 'brand';
+      } else if (name === 'AisTrendingItems') {
+        // no required props
+      } else if (name === 'AisFilterSuggestions') {
+        props.agentId = 'test-agent-id';
       } else {
         props.attribute = 'attr';
       }
diff --git a/packages/vue-instantsearch/src/components/FilterSuggestions.js b/packages/vue-instantsearch/src/components/FilterSuggestions.js
new file mode 100644
index 00000000000..0c840af5a93
--- /dev/null
+++ b/packages/vue-instantsearch/src/components/FilterSuggestions.js
@@ -0,0 +1,76 @@
+import { createFilterSuggestionsComponent } from 'instantsearch-ui-components';
+import { connectFilterSuggestions } from 'instantsearch.js/es/connectors/index';
+
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisFilterSuggestions',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectFilterSuggestions },
+      { $$widgetType: 'ais.filterSuggestions' }
+    ),
+    createSuitMixin({ name: 'FilterSuggestions' }),
+  ],
+  props: {
+    agentId: {
+      type: String,
+      default: undefined,
+    },
+    attributes: {
+      type: Array,
+      default: undefined,
+    },
+    maxSuggestions: {
+      type: Number,
+      default: undefined,
+    },
+    debounceMs: {
+      type: Number,
+      default: undefined,
+    },
+    hitsToSample: {
+      type: Number,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+    transport: {
+      type: Object,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      return {
+        agentId: this.agentId,
+        attributes: this.attributes,
+        maxSuggestions: this.maxSuggestions,
+        debounceMs: this.debounceMs,
+        hitsToSample: this.hitsToSample,
+        transformItems: this.transformItems,
+        transport: this.transport,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    return h(createFilterSuggestionsComponent({ createElement: h, Fragment }), {
+      suggestions: this.state.suggestions,
+      isLoading: this.state.isLoading,
+      refine: this.state.refine,
+      skeletonCount: this.maxSuggestions,
+      itemComponent: getScopedSlot(this, 'item'),
+      headerComponent: getScopedSlot(this, 'header'),
+      emptyComponent: getScopedSlot(this, 'empty'),
+      classNames: this.classNames,
+    });
+  }),
+};
diff --git a/packages/vue-instantsearch/src/components/FrequentlyBoughtTogether.js b/packages/vue-instantsearch/src/components/FrequentlyBoughtTogether.js
new file mode 100644
index 00000000000..542ce074bad
--- /dev/null
+++ b/packages/vue-instantsearch/src/components/FrequentlyBoughtTogether.js
@@ -0,0 +1,81 @@
+import { createFrequentlyBoughtTogetherComponent } from 'instantsearch-ui-components';
+import { connectFrequentlyBoughtTogether } from 'instantsearch.js/es/connectors/index';
+
+import { createRecommendMixin } from '../mixins/recommend';
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisFrequentlyBoughtTogether',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectFrequentlyBoughtTogether },
+      { $$widgetType: 'ais.frequentlyBoughtTogether' }
+    ),
+    createSuitMixin({ name: 'FrequentlyBoughtTogether' }),
+    createRecommendMixin(),
+  ],
+  props: {
+    objectIDs: {
+      type: Array,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    threshold: {
+      type: Number,
+      default: undefined,
+    },
+    fallbackParameters: {
+      type: Object,
+      default: undefined,
+    },
+    queryParameters: {
+      type: Object,
+      default: undefined,
+    },
+    escapeHTML: {
+      type: Boolean,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      return {
+        objectIDs: this.objectIDs,
+        limit: this.limit,
+        threshold: this.threshold,
+        fallbackParameters: this.fallbackParameters,
+        queryParameters: this.queryParameters,
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    return h(
+      createFrequentlyBoughtTogetherComponent({ createElement: h, Fragment }),
+      {
+        items: this.state.items,
+        status: this.status,
+        sendEvent: this.state.sendEvent,
+        itemComponent: getScopedSlot(this, 'item'),
+        headerComponent: getScopedSlot(this, 'header'),
+        emptyComponent: getScopedSlot(this, 'empty'),
+        layout: getScopedSlot(this, 'layout'),
+        classNames: this.classNames,
+      }
+    );
+  }),
+};
diff --git a/packages/vue-instantsearch/src/components/LookingSimilar.js b/packages/vue-instantsearch/src/components/LookingSimilar.js
new file mode 100644
index 00000000000..d4f52ce4a9c
--- /dev/null
+++ b/packages/vue-instantsearch/src/components/LookingSimilar.js
@@ -0,0 +1,78 @@
+import { createLookingSimilarComponent } from 'instantsearch-ui-components';
+import { connectLookingSimilar } from 'instantsearch.js/es/connectors/index';
+
+import { createRecommendMixin } from '../mixins/recommend';
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisLookingSimilar',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectLookingSimilar },
+      { $$widgetType: 'ais.lookingSimilar' }
+    ),
+    createSuitMixin({ name: 'LookingSimilar' }),
+    createRecommendMixin(),
+  ],
+  props: {
+    objectIDs: {
+      type: Array,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    threshold: {
+      type: Number,
+      default: undefined,
+    },
+    fallbackParameters: {
+      type: Object,
+      default: undefined,
+    },
+    queryParameters: {
+      type: Object,
+      default: undefined,
+    },
+    escapeHTML: {
+      type: Boolean,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      return {
+        objectIDs: this.objectIDs,
+        limit: this.limit,
+        threshold: this.threshold,
+        fallbackParameters: this.fallbackParameters,
+        queryParameters: this.queryParameters,
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    return h(createLookingSimilarComponent({ createElement: h, Fragment }), {
+      items: this.state.items,
+      status: this.status,
+      sendEvent: this.state.sendEvent,
+      itemComponent: getScopedSlot(this, 'item'),
+      headerComponent: getScopedSlot(this, 'header'),
+      emptyComponent: getScopedSlot(this, 'empty'),
+      layout: getScopedSlot(this, 'layout'),
+      classNames: this.classNames,
+    });
+  }),
+};
diff --git a/packages/vue-instantsearch/src/components/RelatedProducts.js b/packages/vue-instantsearch/src/components/RelatedProducts.js
new file mode 100644
index 00000000000..1fd8cb601fa
--- /dev/null
+++ b/packages/vue-instantsearch/src/components/RelatedProducts.js
@@ -0,0 +1,83 @@
+import { createRelatedProductsComponent } from 'instantsearch-ui-components';
+import { connectRelatedProducts } from 'instantsearch.js/es/connectors/index';
+
+import { createRecommendMixin } from '../mixins/recommend';
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisRelatedProducts',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectRelatedProducts },
+      { $$widgetType: 'ais.relatedProducts' }
+    ),
+    createSuitMixin({ name: 'RelatedProducts' }),
+    createRecommendMixin(),
+  ],
+  props: {
+    objectIDs: {
+      type: Array,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    threshold: {
+      type: Number,
+      default: undefined,
+    },
+    fallbackParameters: {
+      type: Object,
+      default: undefined,
+    },
+    queryParameters: {
+      type: Object,
+      default: undefined,
+    },
+    escapeHTML: {
+      type: Boolean,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      return {
+        objectIDs: this.objectIDs,
+        limit: this.limit,
+        threshold: this.threshold,
+        fallbackParameters: this.fallbackParameters,
+        queryParameters: this.queryParameters,
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    const itemSlot = getScopedSlot(this, 'item');
+    const headerSlot = getScopedSlot(this, 'header');
+    const emptySlot = getScopedSlot(this, 'empty');
+    const layoutSlot = getScopedSlot(this, 'layout');
+
+    return h(createRelatedProductsComponent({ createElement: h, Fragment }), {
+      items: this.state.items,
+      status: this.status,
+      sendEvent: this.state.sendEvent,
+      itemComponent: itemSlot,
+      headerComponent: headerSlot,
+      emptyComponent: emptySlot,
+      layout: layoutSlot,
+      classNames: this.classNames,
+    });
+  }),
+};
diff --git a/packages/vue-instantsearch/src/components/TrendingFacets.js b/packages/vue-instantsearch/src/components/TrendingFacets.js
new file mode 100644
index 00000000000..9f612434b8b
--- /dev/null
+++ b/packages/vue-instantsearch/src/components/TrendingFacets.js
@@ -0,0 +1,76 @@
+import { createTrendingFacetsComponent } from 'instantsearch-ui-components';
+import { connectTrendingFacets } from 'instantsearch.js/es/connectors/index';
+
+import { createRecommendMixin } from '../mixins/recommend';
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisTrendingFacets',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectTrendingFacets },
+      { $$widgetType: 'ais.trendingFacets' }
+    ),
+    createSuitMixin({ name: 'TrendingFacets' }),
+    createRecommendMixin(),
+  ],
+  props: {
+    facetName: {
+      type: String,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    threshold: {
+      type: Number,
+      default: undefined,
+    },
+    fallbackParameters: {
+      type: Object,
+      default: undefined,
+    },
+    queryParameters: {
+      type: Object,
+      default: undefined,
+    },
+    escapeHTML: {
+      type: Boolean,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      return {
+        facetName: this.facetName,
+        limit: this.limit,
+        threshold: this.threshold,
+        fallbackParameters: this.fallbackParameters,
+        queryParameters: this.queryParameters,
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    return h(createTrendingFacetsComponent({ createElement: h, Fragment }), {
+      items: this.state.items,
+      status: this.status,
+      itemComponent: getScopedSlot(this, 'item'),
+      headerComponent: getScopedSlot(this, 'header'),
+      emptyComponent: getScopedSlot(this, 'empty'),
+      classNames: this.classNames,
+    });
+  }),
+};
diff --git a/packages/vue-instantsearch/src/components/TrendingItems.js b/packages/vue-instantsearch/src/components/TrendingItems.js
new file mode 100644
index 00000000000..ebd08d69a35
--- /dev/null
+++ b/packages/vue-instantsearch/src/components/TrendingItems.js
@@ -0,0 +1,86 @@
+import { createTrendingItemsComponent } from 'instantsearch-ui-components';
+import { connectTrendingItems } from 'instantsearch.js/es/connectors/index';
+
+import { createRecommendMixin } from '../mixins/recommend';
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisTrendingItems',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectTrendingItems },
+      { $$widgetType: 'ais.trendingItems' }
+    ),
+    createSuitMixin({ name: 'TrendingItems' }),
+    createRecommendMixin(),
+  ],
+  props: {
+    facetName: {
+      type: String,
+      default: undefined,
+    },
+    facetValue: {
+      type: String,
+      default: undefined,
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    threshold: {
+      type: Number,
+      default: undefined,
+    },
+    fallbackParameters: {
+      type: Object,
+      default: undefined,
+    },
+    queryParameters: {
+      type: Object,
+      default: undefined,
+    },
+    escapeHTML: {
+      type: Boolean,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      const facetParameters =
+        this.facetName && this.facetValue
+          ? { facetName: this.facetName, facetValue: this.facetValue }
+          : {};
+      return {
+        ...facetParameters,
+        limit: this.limit,
+        threshold: this.threshold,
+        fallbackParameters: this.fallbackParameters,
+        queryParameters: this.queryParameters,
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    return h(createTrendingItemsComponent({ createElement: h, Fragment }), {
+      items: this.state.items,
+      status: this.status,
+      sendEvent: this.state.sendEvent,
+      itemComponent: getScopedSlot(this, 'item'),
+      headerComponent: getScopedSlot(this, 'header'),
+      emptyComponent: getScopedSlot(this, 'empty'),
+      layout: getScopedSlot(this, 'layout'),
+      classNames: this.classNames,
+    });
+  }),
+};
diff --git a/packages/vue-instantsearch/src/mixins/recommend.js b/packages/vue-instantsearch/src/mixins/recommend.js
new file mode 100644
index 00000000000..f288f2d969a
--- /dev/null
+++ b/packages/vue-instantsearch/src/mixins/recommend.js
@@ -0,0 +1,29 @@
+import { isVue3 } from '../util/vue-compat';
+
+/**
+ * Mixin for recommendation widgets that wrap shared `createXxxComponent`
+ * factories from `instantsearch-ui-components`. Tracks
+ * `instantSearchInstance.status` reactively so the shared component can show
+ * its empty state once the search settles.
+ */
+export const createRecommendMixin = () => ({
+  data() {
+    return {
+      status: this.instantSearchInstance.status || 'idle',
+    };
+  },
+  created() {
+    if (typeof this.instantSearchInstance.addListener !== 'function') {
+      return;
+    }
+    this.updateStatus = () => {
+      this.status = this.instantSearchInstance.status;
+    };
+    this.instantSearchInstance.addListener('render', this.updateStatus);
+  },
+  [isVue3 ? 'beforeUnmount' : 'beforeDestroy']() {
+    if (this.updateStatus) {
+      this.instantSearchInstance.removeListener('render', this.updateStatus);
+    }
+  },
+});
diff --git a/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js b/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js
index 6177a8eca6a..1cf8dd6ce09 100644
--- a/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js
+++ b/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js
@@ -9,8 +9,8 @@ export { Vue, Vue2, isVue2, isVue3, version };
 
 const augmentCreateElement =
   (createElement) =>
-  (tag, propsWithClassName = {}, ...children) => {
-    const { className, ...props } = propsWithClassName;
+  (tag, propsWithClassName, ...children) => {
+    const { className, ...props } = propsWithClassName || {};
 
     if (typeof tag === 'function') {
       return tag(
@@ -23,12 +23,33 @@ const augmentCreateElement =
 
     if (typeof tag === 'string') {
       const { on, style, attrs, domProps, nativeOn, key, ...rest } = props;
+      // React-style `onClick` / `onAuxClick` props (e.g. from shared
+      // `instantsearch-ui-components` JSX) need to be remapped to Vue 2's
+      // `on: { click, auxclick }` event API so they don't fall through to
+      // `attrs` and end up rendered as literal HTML attributes.
+      const reactStyleHandlers = {};
+      const remainingAttrs = {};
+      Object.keys(rest).forEach((prop) => {
+        if (
+          prop.length > 2 &&
+          prop[0] === 'o' &&
+          prop[1] === 'n' &&
+          prop[2] === prop[2].toUpperCase() &&
+          typeof rest[prop] === 'function'
+        ) {
+          reactStyleHandlers[prop.slice(2).toLowerCase()] = rest[prop];
+        } else {
+          remainingAttrs[prop] = rest[prop];
+        }
+      });
       return createElement(
         tag,
         {
           class: className || props.class,
-          attrs: attrs || rest,
-          on,
+          attrs: attrs || remainingAttrs,
+          on: Object.keys(reactStyleHandlers).length
+            ? Object.assign({}, reactStyleHandlers, on)
+            : on,
           nativeOn,
           style,
           domProps,
@@ -51,6 +72,17 @@ export function renderCompat(fn) {
   };
 }
 
+/**
+ * Fragment shim for the augmented JSX renderer used by `renderCompat`.
+ * Functional pragmas in `instantsearch-ui-components` use
+ * `<Fragment>{children}</Fragment>` to skip wrapping markup; Vue 2 has no
+ * native fragment, so we return the children array directly and let Vue 2
+ * flatten it into the surrounding vnode.
+ */
+export const Fragment = function Fragment(props) {
+  return props && props.children !== undefined ? props.children : null;
+};
+
 export function getDefaultSlot(component) {
   return component.$slots.default;
 }
diff --git a/packages/vue-instantsearch/src/util/vue-compat/index-vue3.js b/packages/vue-instantsearch/src/util/vue-compat/index-vue3.js
index 8d8ee1e7007..fbc55d810c0 100644
--- a/packages/vue-instantsearch/src/util/vue-compat/index-vue3.js
+++ b/packages/vue-instantsearch/src/util/vue-compat/index-vue3.js
@@ -4,7 +4,7 @@ const isVue2 = false;
 const isVue3 = true;
 const Vue2 = undefined;
 
-export { createApp, createSSRApp, h, version, nextTick } from 'vue';
+export { createApp, createSSRApp, h, version, nextTick, Fragment } from 'vue';
 export { Vue, Vue2, isVue2, isVue3 };
 
 export function renderCompat(fn) {
diff --git a/packages/vue-instantsearch/src/widgets.js b/packages/vue-instantsearch/src/widgets.js
index 188431344b2..77bba3a647b 100644
--- a/packages/vue-instantsearch/src/widgets.js
+++ b/packages/vue-instantsearch/src/widgets.js
@@ -23,6 +23,12 @@ export { default as AisQueryRuleCustomData } from './components/QueryRuleCustomD
 export { default as AisRangeInput } from './components/RangeInput.vue';
 export { default as AisRatingMenu } from './components/RatingMenu.vue';
 export { default as AisRefinementList } from './components/RefinementList.vue';
+export { default as AisRelatedProducts } from './components/RelatedProducts';
+export { default as AisTrendingItems } from './components/TrendingItems';
+export { default as AisTrendingFacets } from './components/TrendingFacets';
+export { default as AisLookingSimilar } from './components/LookingSimilar';
+export { default as AisFrequentlyBoughtTogether } from './components/FrequentlyBoughtTogether';
+export { default as AisFilterSuggestions } from './components/FilterSuggestions';
 export { default as AisStateResults } from './components/StateResults.vue';
 export { default as AisSearchBox } from './components/SearchBox.vue';
 export { default as AisSnippet } from './components/Snippet.vue';
diff --git a/tests/common/widgets/filter-suggestions/index.ts b/tests/common/widgets/filter-suggestions/index.ts
index 3a70d474dd2..0a50c660fd1 100644
--- a/tests/common/widgets/filter-suggestions/index.ts
+++ b/tests/common/widgets/filter-suggestions/index.ts
@@ -15,11 +15,12 @@ export type JSFilterSuggestionsWidgetParams = Omit<
 > &
   FilterSuggestionsConnectorParams;
 export type ReactFilterSuggestionsWidgetParams = FilterSuggestionsProps;
+export type VueFilterSuggestionsWidgetParams = FilterSuggestionsConnectorParams;
 
 type FilterSuggestionsWidgetParams = {
   javascript: JSFilterSuggestionsWidgetParams;
   react: ReactFilterSuggestionsWidgetParams;
-  vue: Record<string, never>;
+  vue: VueFilterSuggestionsWidgetParams;
 };
 
 declare module '../../common' {
diff --git a/tests/common/widgets/filter-suggestions/options.ts b/tests/common/widgets/filter-suggestions/options.ts
index bcf051300e0..9919a03f853 100644
--- a/tests/common/widgets/filter-suggestions/options.ts
+++ b/tests/common/widgets/filter-suggestions/options.ts
@@ -1,6 +1,8 @@
 import { createSearchClient } from '@instantsearch/mocks';
 import { wait } from '@instantsearch/testutils';
 
+import { skippableTest } from '../../common';
+
 import type { FilterSuggestionsWidgetSetup } from '.';
 import type { TestOptions } from '../../common';
 import type { SearchResponse } from 'instantsearch.js';
@@ -10,10 +12,10 @@ const MIN_LOADING_DURATION_MS = 300;
 
 export function createOptionsTests(
   setup: FilterSuggestionsWidgetSetup,
-  { act }: Required<TestOptions>
+  { act, skippedTests = {} }: Required<TestOptions>
 ) {
   describe('options', () => {
-    test('throws without agentId', () => {
+    skippableTest('throws without agentId', skippedTests, () => {
       const searchClient = createSearchClient({});
 
       expect(() =>
@@ -93,7 +95,7 @@ export function createOptionsTests(
         widgetParams: {
           javascript: { agentId: 'test-agent-id', debounceMs: 0 },
           react: { agentId: 'test-agent-id', debounceMs: 0 },
-          vue: {},
+          vue: { agentId: 'test-agent-id', debounceMs: 0 },
         },
       });
 
@@ -144,7 +146,7 @@ export function createOptionsTests(
         widgetParams: {
           javascript: { agentId: 'test-agent-id' },
           react: { agentId: 'test-agent-id' },
-          vue: {},
+          vue: { agentId: 'test-agent-id' },
         },
       });
 
@@ -227,7 +229,11 @@ export function createOptionsTests(
             attributes: ['brand'],
             debounceMs: 0,
           },
-          vue: {},
+          vue: {
+            agentId: 'test-agent-id',
+            attributes: ['brand'],
+            debounceMs: 0,
+          },
         },
       });
 
@@ -308,7 +314,11 @@ export function createOptionsTests(
             transformItems,
             debounceMs: 0,
           },
-          vue: {},
+          vue: {
+            agentId: 'test-agent-id',
+            transformItems,
+            debounceMs: 0,
+          },
         },
       });
 
diff --git a/tests/common/widgets/filter-suggestions/templates.tsx b/tests/common/widgets/filter-suggestions/templates.tsx
index 7c1ebe67241..acf0c7a86fe 100644
--- a/tests/common/widgets/filter-suggestions/templates.tsx
+++ b/tests/common/widgets/filter-suggestions/templates.tsx
@@ -2,6 +2,8 @@ import { createSearchClient } from '@instantsearch/mocks';
 import { wait } from '@instantsearch/testutils';
 import React from 'react';
 
+import { skippableDescribe } from '../../common';
+
 import type { FilterSuggestionsWidgetSetup } from '.';
 import type { TestOptions } from '../../common';
 
@@ -10,9 +12,9 @@ const MIN_LOADING_DURATION_MS = 300;
 
 export function createTemplatesTests(
   setup: FilterSuggestionsWidgetSetup,
-  { act }: Required<TestOptions>
+  { act, skippedTests = {} }: Required<TestOptions>
 ) {
-  describe('templates', () => {
+  skippableDescribe('templates', skippedTests, () => {
     test('renders with custom header template', async () => {
       const searchClient = createSearchClient({
         search: jest.fn(() =>
@@ -80,7 +82,7 @@ export function createTemplatesTests(
               <div className="custom-header">Custom Header</div>
             ),
           },
-          vue: {},
+          vue: { agentId: 'test-agent-id', debounceMs: 0 },
         },
       });
 
@@ -168,7 +170,7 @@ export function createTemplatesTests(
               <div className="custom-item">{suggestion.label}</div>
             ),
           },
-          vue: {},
+          vue: { agentId: 'test-agent-id', debounceMs: 0 },
         },
       });
 
@@ -227,7 +229,7 @@ export function createTemplatesTests(
               <div className="custom-empty">No suggestions</div>
             ),
           },
-          vue: {},
+          vue: { agentId: 'test-agent-id' },
         },
       });