feat(frequentlyBoughtTogether): add FrequentlyBoughtTogether to Vue

[Haroenv]

Stacked on #7127 (base = feat/vue-related-products) — review/merge that one first.

What

Ports the FrequentlyBoughtTogether recommend widget to vue-instantsearch, reusing the hook-based UI infrastructure + Carousel layout introduced in #7127. It's a near-mirror of AisRelatedProducts, which validates that the shared infra generalizes cleanly to a second recommend widget.

• AisFrequentlyBoughtTogether wraps connectFrequentlyBoughtTogether, renders the shared UI component. Default list layout passes the common suite; opt-in layout="carousel".
• Enables the FrequentlyBoughtTogether common suite for Vue; adds component-level tests (list + carousel).

Test plan

• FrequentlyBoughtTogether common suite unskipped and passing (Vue 2 + Vue 3).
• New component tests (list + carousel).
• Full vue-instantsearch suite green; oxlint + prettier clean.

Notes

• Only new code here is the widget + its tests + registration — no infra changes (all in feat(relatedProducts): add RelatedProducts to Vue + hook-based UI infra #7127).
• Remaining recommend widgets (LookingSimilar, TrendingItems, TrendingFacets) can follow the same pattern in subsequent PRs.

Draft, stacked on the infra PR.

🤖 Generated with Claude Code

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 16 complexity

Metric	Results
Complexity	16

View in Codacy

_{TIP This summary will be updated as you push new changes.}

[pkg-pr-new]

More templates

• example-instantsearch-getting-started
• example-react-instantsearch-getting-started
• example-react-instantsearch-next-app-dir-example
• example-react-instantsearch-next-routing-example
• example-vue-instantsearch-getting-started

algoliasearch-helper

npm i https://pkg.pr.new/algolia/instantsearch/algoliasearch-helper@7128

instantsearch-ui-components

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch-ui-components@7128

instantsearch.css

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.css@7128

instantsearch.js

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.js@7128

react-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch@7128

react-instantsearch-core

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-core@7128

react-instantsearch-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-nextjs@7128

react-instantsearch-router-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-router-nextjs@7128

vue-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/vue-instantsearch@7128

commit: 8757ba4

[Copilot]

Pull request overview

Ports the FrequentlyBoughtTogether recommend widget into packages/vue-instantsearch, aligning with the hook-based shared UI approach introduced in the stacked infra PR (#7127) and enabling the Vue flavor to run the shared common widget test suite for this widget.

Changes:

• Exposes AisFrequentlyBoughtTogether from the Vue widget exports and registers it for component enumeration/tests.
• Adds the Vue wrapper component for connectFrequentlyBoughtTogether, rendering the shared instantsearch-ui-components UI with optional layout="carousel" via AisCarousel.
• Enables the FrequentlyBoughtTogether common widget suite for Vue and adds Vue component-level tests for list + carousel layouts.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/vue-instantsearch/src/widgets.js	Exports the new AisFrequentlyBoughtTogether widget for public Vue usage.
packages/vue-instantsearch/src/components/FrequentlyBoughtTogether.js	Adds the Vue wrapper around connectFrequentlyBoughtTogether, including list/carousel layout support via shared UI components.
packages/vue-instantsearch/src/components/tests/FrequentlyBoughtTogether.js	Adds component-level rendering tests for list and carousel layouts using a recommend-capable mock client.
packages/vue-instantsearch/src/tests/index.js	Ensures the widget is included in the “all components” test harness with required props (objectIDs).
packages/vue-instantsearch/src/tests/common-widgets.test.js	Implements the Vue setup for the FrequentlyBoughtTogether common widget suite and unskips it.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.