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:
- <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. 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 the sign-in and sign-up buttons when the user is signed out -->
<SignedOut>
<SignInButton />
<SignUpButton />
</SignedOut>
<!-- Show the user button when the user is signed in -->
<SignedIn>
<UserButton />
</SignedIn>
</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
Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides.
Protect API routes using clerkMiddleware()
Learn how to protect specific API routes from unauthenticated users.
Protect content and read user data
Learn how to use Clerk's composables and helpers to access the session and user data in your Nuxt app.
Client-side helpers
Learn more about Nuxt client-side helpers and how to use them.
Customization & localization
Learn how to customize and localize Clerk components.
Prebuilt components
Learn more about Clerk's suite of components that let you quickly add authentication to your app.
Feedback
Last updated on
Edit on GitHub