Nuxt Quickstart
You will learn the following:
- Install
@clerk/nuxt - Set your Clerk API keys
- Configure
nuxt.config.ts - Create a header with Clerk components
- Protect your API routes
Before you start
Example repository
Install @clerk/nuxt
Clerk's 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/nuxtyarn add @clerk/nuxtpnpm add @clerk/nuxtAdd the following keys to your .env file. These keys can always be retrieved from the API keys page in your Clerk Dashboard.
- In the Clerk Dashboard, navigate to the API Keys page.
- In the Quick Copy section, copy your Clerk publishable and secret key.
- Paste your key 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 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>Create your first user
Run your project with the following command:
npm run devyarn devpnpm devVisit your app's homepage at http://localhost:3000. Sign up to create your first user.
More resources
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
Learn how to protect specific API routes from unauthenticated users.
Read session and user data
Learn how to use Clerk's composables and helpers to access the active session and user data in your Nuxt app.
Client-side helpers
Learn more about Nuxt client-side helpers and how to use them.
Clerk + Nuxt Quickstart Repo
The official companion repo for Clerk's Nuxt Quickstart.
Feedback
Last updated on