Vue Router issue when using Vue Stripe package with Vue 3

[danielbirch]

Describe the bug
Hi there,

I understand that Vue 3 is not officially supported yet, however for the most part I've successfully been able to use Vue Stripe in my app. The only issue is an anomaly occurring between Vue Router and Vue Stripe. When trying to navigate back:

router.go(-1)

...the URL updates to the correct path, the page refreshes, however the user remains on the same page.

This error is present in the console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')

I "solved" the issue for my application by using anchor tags.

The issue appears to be based on the checkoutRef here:

    <stripe-checkout
    ref="checkoutRef"
    mode="payment"
    :pk="publishableKey"
    :line-items="lineItems"
    :success-url="successURL"
    :cancel-url="cancelURL"
    @loading="v => loading = v"
    />

To Reproduce
Steps to reproduce the behaviour:

1. Use Vue 3
2. Use the configuration above
3. Use router.go(-1)
4. If needed, use async/await on the function that initiates the checkout

Expected behaviour
Navigating to the previous route is expected.

Screenshots

Desktop (please complete the following information):

• OS: MacOS 14.1.2
• Browser: Chrome
• Version: 122.0.6261.94

Smartphone (please complete the following information):
N/A

Additional context
Seems to be related to the:

ref="checkoutRef"

When I remove the async/await from the function that initiates the checkout, it works fine.

[jofftiquez]

Hello, it's currently not yet compatible with Vue 3. However you can check the current development here, you can try to fork the dev branch and see what you can immediately use. I will keep you guys posted. Thanks.

Dev branch: https://github.com/vue-stripe/vue-stripe/tree/refactor/next