Launch darkly won't initialize inside a router-view

[gwenf]

Describe the bug If I call the ldInit method inside of a component that is rendered inside of a <router-view />, then it doesn't call the method in the setup() function. If I move that logic to the App.vue component, it works fine though. I'm using the logic inside of onMounted(), but I tried doing it outside of that and it's the same.

Expected behavior Initialization should work inside of any component or this should be documented.

SDK version 1.0.2

[XieX]

Thanks for the bug report!

I may need to learn a little more about your use case/implementation. I couldn't easily reproduce, though I admit I am new to Vue Router. Here's my very naive example that appears to work as expected:

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'
import Login from './Login.vue'
import Home from './Home.vue'
import { LDPlugin } from 'launchdarkly-vue-client-sdk'

const routes = [
  { path: '/', component: Login },
  { path: '/home', component: Home },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

const app = createApp(App)
app.use(LDPlugin, { clientSideID:  'cafecafecafecafecafe', deferInitialization: true })
app.use(router)
app.mount('#app')

// App.vue
<template>
  <router-view></router-view>
</template>

// Login.vue
<template>
  <router-link to="/home">Login</router-link>
</template>

// Home.vue
<script setup lang="ts">
import { ldInit, useLDFlag } from 'launchdarkly-vue-client-sdk'
const [$ldReady] = ldInit({})
const flagValue = useLDFlag<boolean>('dev-test-flag')
</script>

<template>
  <div v-if="!$ldReady">
    Loading...
  </div>
  <div v-else>
    Flag is {{flagValue}}
  </div>
</template>