āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/getting-started/quickstart.nuxt ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<TutorialHero exampleRepo={[ { title: "Nuxt Quickstart Repo", link: "https://github.com/clerk/clerk-nuxt-quickstart", } ]} beforeYouStart={[ { title: "Set up a Clerk application", link: "/docs/getting-started/quickstart/setup-clerk", icon: "clerk", }, { title: "Create a Nuxt application", link: "https://nuxt.com/docs/getting-started/installation", icon: "nuxt" } ]} />
<Steps> ## Install `@clerk/nuxt`The Clerk Nuxt SDK gives you access to prebuilt components, Vue composables, and helpers to make user authentication easier.
Run the following command to install the SDK:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm install @clerk/nuxt
```bash {{ filename: 'terminal' }}
yarn add @clerk/nuxt
```
```bash {{ filename: 'terminal' }}
pnpm add @clerk/nuxt
```
```bash {{ filename: 'terminal' }}
bun add @clerk/nuxt
```
The final result should resemble the following:
NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}}
NUXT_CLERK_SECRET_KEY={{secret}}
nuxt.config.tsTo enable Clerk in your Nuxt app, add @clerk/nuxt to your modules array in nuxt.config.ts. This automatically configures Clerk's middleware and plugins and imports Clerk's components.
export default defineNuxtConfig({
modules: ['@clerk/nuxt'],
})
Nuxt 3 automatically imports and makes all components in the components/ directory globally available without requiring explicit imports. See the Nuxt docs for details.
You can control which content signed-in and signed-out users can see with Clerk's prebuilt control components.
The following example creates a header using the following components:
<SignedIn>: Children of this component can only be seen while signed in.<SignedOut>: Children of this component can only be seen while signed out.<UserButton />: Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.<SignInButton />: An unstyled component that links to the sign-in page or displays the sign-in modal. In this example, since no props or environment variables are set for the sign-in URL, this component links to the Account Portal sign-in page.<script setup lang="ts">
// Components are automatically imported
</script>
<template>
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<main>
<NuxtPage />
</main>
</template>
Run your project with the following command:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm run dev
```bash {{ filename: 'terminal' }}
yarn dev
```
```bash {{ filename: 'terminal' }}
pnpm dev
```
```bash {{ filename: 'terminal' }}
bun dev
```
Visit your app's homepage at http://localhost:3000. Sign up to create your first user.
</Steps>
Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides.
<Cards> - [Protect API routes using clerkMiddleware()](/docs/reference/nuxt/clerk-middleware) - Learn how to protect specific API routes from unauthenticated users.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā