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'
});
