Nuxt Quickstart
Before you start
Example repository
Create a new Nuxt app
If you don't already have a Nuxt app, run the following commands to create a new one.
npm create nuxt@latest clerk-nuxt
cd clerk-nuxt
npm installpnpm create nuxt clerk-nuxt
cd clerk-nuxt
pnpm installyarn create nuxt clerk-nuxt
cd clerk-nuxt
yarn installbunx create-nuxt clerk-nuxt
cd clerk-nuxt
bun installInstall @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:
npm install @clerk/nuxtpnpm add @clerk/nuxtyarn add @clerk/nuxtbun add @clerk/nuxtAdd the following keys to your .env file. These keys can always be retrieved from the API keys page in the Clerk Dashboard.
- In the Clerk Dashboard, navigate to the API keys page.
- In the Quick Copy section, copy your Clerk and .
- Paste your keys into your
.envfile.
The final result should resemble the following:
NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
NUXT_CLERK_SECRET_KEY=YOUR_SECRET_KEYConfigure nuxt.config.ts
To 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'],
})Create a header with Clerk components
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:
- <Show when="signed-in">: Children of this component can only be seen while signed in.
- <Show when="signed-out">: 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. 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.
- <SignUpButton />: An unstyled component that links to the sign-up page. In this example, since no props or environment variables are set for the sign-up URL, this component links to the Account Portal sign-up page.
<script setup lang="ts">
// Components are automatically imported
</script>
<template>
<header>
<Show when="signed-out">
<SignInButton />
<SignUpButton />
</Show>
<Show when="signed-in">
<UserButton />
</Show>
</header>
<main>
<NuxtPage />
</main>
</template>Run your project
Run your project with the following command:
npm run devpnpm run devyarn devbun run devCreate your first user
- Visit your app's homepage at http://localhost:3000.
- Select "Sign up" on the page and authenticate to create your first user.
Next steps
Explore the most relevant next steps for your SDK using the following guides.
Prebuilt components
Learn how to add Clerk's prebuilt authentication and user-management UI to your app.
Build custom flows
Learn how to build custom user interfaces entirely from scratch using the Clerk API.
Protect content and read user data
Learn how to use Clerk's helpers to protect content and read user data in your app.
Protect routes using clerkMiddleware()
Learn how to protect specific routes from unauthenticated users.
More to explore
Explore additional Clerk features that help you build, manage, and grow your application.
- Organizations - Organizations are shared accounts that let teams collaborate, manage members and roles, and control access to shared resources.
- Billing - Billing enables you to manage subscriptions, free trials, payments, plans, and billing-related webhook events for B2C and B2B applications.
- Waitlist - Waitlist lets you collect signups and control access to new products or features before launch through a simple, integrated workflow.
Feedback
Last updated on