How to delay page rendering until all feature flags have loaded in Vue for JavaScript

Affected: Vue client-side SDK

Overview

Awaiting LDClient.identify() and LDClient.allFlags() does not seem to delay rendering the page in Vue.

Example:

<template v-if="$launchDarkly.variation('test-display-banner', false)">
<h1>test-display-banner feature flag reached</h1>
</template>

If a user clicks on a navigation link to a different page, then returns to the homepage, the homepage correctly displays the content behind the “test-display-banner” feature flag.

Solution

After awaiting the promise returned from identify() to resolve in the highest level component of the application, update a key property on the router view. This forces the page to re-render with the new flag set’s values available.