app-bridge without using react (using vue.js instead)

jaddison
Tourist
4 0 0

As the title says, I'm using vue.js for my embedded app's frontend. I plan to use vue-router to enable client side routing.

How do I ensure AppBridge doesn't perform full iframe page loads when navigation occurs?

Is there a non-React way to enable the functionality from the AppBridge ClientRouter (which appears to be React-specific)?

Ignore the above; as usual, posting publicly leads to the information I needed: https://shopify.dev/tools/app-bridge/actions/navigation:

By default, App Bridge applies URL changes from outside your app, such as from a navigation item being clicked, by changing the iframe URL. If your app uses client-side routing, such as React Router, then you need to override this behaviour to avoid unnecessary full-page reloads.

To override the default behaviour, subscribe to the Redirect.ActionType.APP action:

 

import {Redirect} from '@shopify/app-bridge/actions';

app.subscribe(Redirect.ActionType.APP, function(redirectData) {
  console.log(redirectData.path); // For example, '/settings'
});

 

 

0 Likes