Nuxt SSR issue with vue SDK

[scottcarlton]

SSR causes document is not defined within a nuxt application using the @descope/vue-sdk

Reproduce

1. Create a basic nuxt application using pnpm dlx nuxi@latest init <project-name>

2. Then setup your nuxt.config.ts file

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  }
})

3. Create your plugin in the app/plugins directory as descope.client.js

import descope, { getSdk } from "@descope/vue-sdk";
import { defineNuxtPlugin, useRuntimeConfig } from '#imports'

export default defineNuxtPlugin({
  name: 'descope',
  async setup ({ vueApp }) {
    vueApp.use(descope, {
      projectId: <ProjectId>,
      baseUrl: <BaseURL>
    });

    const sdk = getSdk();
    sdk?.onSessionTokenChange((newSession) => {
      // here you can implement custom logic when the session is changing
    });
  }
})

4. Then simply try to use one of the composables or the Descope component in a page

# app/pages/index.vue
<script setup>
  import { Descope, useDescope } from "@descope/vue-sdk"; // Causes document not defined from within the BaseDescopeWc.ts 
</script>

<template>
  <div>
     <Descope flowId="sign-in" />
  </div>
</template>

Note: This works but has issues too, though this is not a viable because if you try to use a composable anywhere outside of the client rendered component you still get the document issue.

# app/components/DescopeClient.vue
<script setup>
  import { Descope, useDescope } from "@descope/vue-sdk";
</script>

<template>
  <div>
     <Descope flowId="sign-in" />
  </div>
</template>

# app/components/DescopeClient.vue
<script setup>
  import { Descope, useDescope } from "@descope/vue-sdk";
</script>

<template>
  <div>
     <ClientOnly fallbackTag="span">
       <DescopeClient  />
       <template #fallback>Loading Component<template>
    </ClientOnly>
  </div>
</template>

Issue: The issue here is vue warns component and can't resolve because vue thinks descope-wc is a vue component.

*Why this is an issue: Nuxt and even Vue have SSR capabilities. Not being able to use this feature and descope sdk is a major barrier to using descope as an auth solution. Especially the composables within an SSR application.

[nirgur]

Descope is a client-side component
It renders a custom element that uses browser APIs and cannot be server-side rendered
Therefore, it must be rendered on the client
As you mentioned, wrapping it in a <ClientOnly> tag should achieve this

Regarding the Failed to resolve component: descope-wc warning,
you can resolve it by adding the following configuration to your nuxt.config.ts:

  vue: {
    compilerOptions: {
      isCustomElement: tag => tag === 'descope-wc'
    }
  }