Refactor Vue 3 integration guide to use composables pattern

[sequba]

Context

The Vue 3 integration guide was using an outdated pattern with a plain class wrapper (SpreadsheetProvider) to keep the HyperFormula instance outside Vue's reactivity system. This approach is less idiomatic for modern Vue 3 development.

The guide has been updated to demonstrate the recommended composable pattern, which is the standard way to encapsulate stateful logic in Vue 3. This change also improves the clarity of the troubleshooting section by better explaining when and why markRaw is needed.

How did you test your changes?

Documentation review only. The changes are instructional updates to the integration guide with no functional code changes to the library itself.

Types of changes

• Change to the documentation

Related issues:

None

Checklist:

• I have reviewed the guidelines about Contributing to HyperFormula and I confirm that my code follows the code style of this project.
• My changes require a documentation update.

Summary of changes

• Replaced the class-based SpreadsheetProvider pattern with a composable function useSpreadsheet
• Updated the example component to use the composable with <script setup>
• Improved explanations of Vue 3 reactivity opt-in behavior and shallowRef usage
• Enhanced the troubleshooting section with clearer guidance on when markRaw is needed vs. when it's unnecessary
• Added a code example for Nuxt's <ClientOnly> wrapper with proper context
• Added type="button" attributes to button elements for better HTML semantics

https://claude.ai/code/session_01FBwp6T1sLtGPiWUKHMn8hH

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.18%. Comparing base (d6a316c) to head (443c87b).

Additional details and impacted files

@@                             Coverage Diff                              @@
##           feature/hf-122-framework-integration-guides    #1657   +/-   ##
============================================================================
  Coverage                                        97.18%   97.18%           
============================================================================
  Files                                              174      174           
  Lines                                            15086    15086           
  Branches                                          3223     3223           
============================================================================
  Hits                                             14662    14662           
  Misses                                             424      424           

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Performance comparison of head (443c87b) vs base (d6a316c)

                                     testName |   base |   head | change
------------------------------------------------------------------------
                                      Sheet A | 483.55 | 487.68 | +0.85%
                                      Sheet B | 155.55 |  154.3 | -0.80%
                                      Sheet T | 136.05 |  137.4 | +0.99%
                                Column ranges | 463.97 | 465.12 | +0.25%
Sheet A:  change value, add/remove row/column |  14.54 |  14.65 | +0.76%
 Sheet B: change value, add/remove row/column | 125.74 | 128.58 | +2.26%
                   Column ranges - add column | 139.44 | 146.53 | +5.08%
                Column ranges - without batch | 427.35 | 428.08 | +0.17%
                        Column ranges - batch | 110.61 | 109.46 | -1.04%

[marcin-kordas-hoc]

Picked nothing up from this PR into #1653 — the composables refactor (useSpreadsheet) breaks parity with the Stackblitz Vue 3 demo, which uses the class-wrapper pattern (EmployeesDataProvider). Per the 2026-04-10 Slack ruling on snippet-vs-demo alignment and your 2026-04-20 framing ("przeglądnij to, zmień to co uważasz i po prostu wciągniemy to już, a potem zrobię taski na review tego przez konsultantów specjalistów"), this looks like a v2 task for the Vue specialist consultant.

The bug surfacing in this review (markRaw guidance, reactivity opt-in) was already in #1653 — added in commit b2cb63d6a after the Slack thread on Vue 3 demo's missing markRaw and destroy().

Closing-suggestion: park until the Vue specialist task lands. I'll let you close at your discretion.