║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '<ClerkLoaded>' description: The <ClerkLoaded> component guarantees that the Clerk object has loaded and will be available under window.Clerk. This allows you to wrap child components to access the Clerk object without the need to check it exists. sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend

The <ClerkLoaded> component guarantees that the Clerk object has loaded (the status is 'ready' or 'degraded') and will be available under window.Clerk. This allows you to wrap child components to access the Clerk object without the need to check it exists.

<If sdk={["astro", "chrome-extension", "expo", "nextjs", "nuxt", "react", "react-router", "remix", "tanstack-react-start", "vue"]}

Example

It's not recommended to wrap the entire app in the <ClerkLoaded> component; instead, only wrap the components that need access to the Clerk object.

<Include src="_partials/control-components-with-clerkdegraded" /> <If sdk="astro"> > [!NOTE] > Unlike other Clerk components for Astro, `<ClerkLoaded>` must be imported from `@clerk/astro/react`. This requires that your Astro app is set up with React. See [Use Clerk with Astro and React](/docs/reference/astro/react) for guidance.

```astro {{ filename: 'index.astro' }}
---
import { ClerkLoaded } from '@clerk/astro/react'
---

<ClerkLoaded client:load>
  <p>Clerk has loaded</p>
</ClerkLoaded>
```

</If> <If sdk="expo"> ```tsx {{ filename: 'app/index.tsx' }} import { ClerkLoaded } from '@clerk/clerk-expo' import { Text, View } from 'react-native'

export default function Screen() {
  return (
    <View>
      <ClerkLoaded>
        <Text>Clerk has loaded</Text>
      </ClerkLoaded>
    </View>
  )
}
```

</If> <If sdk="vue"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> import { ClerkLoaded } from '@clerk/vue' </script>

<template>
  <ClerkLoaded>
    <p>Clerk has loaded</p>
  </ClerkLoaded>
</template>
```

</If> <If sdk="nuxt"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> // Components are automatically imported </script>

<template>
  <ClerkLoaded>
    <p>Clerk has loaded</p>
  </ClerkLoaded>
</template>
```

</If> </If> <If sdk="js-frontend"> ## Usage with JavaScript

The following methods available on an instance of the Clerk class is used to render and control the <ClerkLoaded /> component:

• load()

The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.

load()

Render the <ClerkLoaded> component to an HTML <div> element.

function load(options?: ClerkOptions): Promise<void>

ClerkOptions

<Include src="_partials/javascript/clerk-options" />

load() usage

import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()

</If>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║