Spot Bugs from Spotflow Vue SDK using Nuxt.js

Description

We need to specifically test the Vue SDK's functionality when integrated into a server-side rendered (SSR) or statically generated Nuxt.js application. Component lifecycle differences in SSR environments often cause issues with third-party libraries.

Steps to Reproduce

• Scaffold a new Nuxt 3 project (or Nuxt 2, if applicable).

• Install the latest version of the Spotflow Vue SDK.

• Integrate the SDK into a Nuxt component.

• Crucially: Test the SDK within a component that is rendered client-side (e.g., inside a tag or component mounted after the SSR phase).

• Attempt a full checkout flow.

• Test a hard refresh on the page containing the checkout component.

Expected Behavior

• The Vue SDK should mount and function correctly in the client-side context of a Nuxt application without any hydration errors, window is not defined errors, or other SSR-related failures.

Proposed Solution

• Document the successful integration steps and any necessary workarounds (e.g., using process.client).

• For any bugs or issues found, open a new, detailed issue. Please use the issue template in the repository as a guide and include steps to reproduce, screenshots, and relevant logs.

To Test

To test payments in Vue SDK, you'll need a secret key and/or encryption key (needed only for card payments). You can test in either live or test mode. For test mode, you'll interact with our test cards here and for live mode, you have to use a real card and transfer actual money to the bank displayed. We advise to use a small amount for tests e.g 100 NGN, 1 GHS etc.

Live Secret key: sk_live_6f446ad7d9854b0b8f2db0807eb2e5ab

Test Secret key: sk_test_3500ece212364e11abd01984afdd67b3

Live Encryption key: HziLxqxa+9QgMyb0kqk1xYqjn1P23f4McHaqHJph41A=

Test Encryption key: 47qqVD15YhEbmF8EhY/3F9aICG/Hn96NMz4AbLb1cRk=

Contribution Guidelines

• Pull the latest changes from our hacktoberfest branch.

• Create your own branch from hacktoberfest (e.g., git checkout -b your-name/vue-hacktoberfest).

• Ensure you add the "hacktoberfest-accepted" label to your PRs.

• Once you have submitted one or more PRs, feel free to share your contribution with screenshots on Twitter or LinkedIn! Please tag our official handle @spotflow_one and include the hashtags #Hacktoberfest and #Opensource.

Helpful resources/links:

• https://docs.spotflow.one/

• https://www.npmjs.com/package/@spot-flow/vue-spotflow-checkout