Skip to content

Latest commit

 

History

History

nuxt


@clerk/nuxt

Clerk is the easiest way to add authentication and user management to your Vue application. Add sign up, sign in, and profile management to your application in minutes.

Prerequisites

Installation

Add @clerk/nuxt as a dependency

npm install @clerk/nuxt

Build

To build the package locally with the TypeScript compiler, run:

npm run build

Usage

Make sure the following environment variables are set in a .env file in your Nuxt project:

NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=[publishable-key]
NUXT_CLERK_SECRET_KEY=[secret-key]

Then, add @clerk/nuxt to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
});

You can now start using Clerk's components. Here's a basic example showing a header component:

<template>
  <header>
    <h1>My App</h1>
    <SignedIn>
      <UserButton />
    </SignedIn>
    <SignedOut>
      <SignInButton mode="modal" />
    </SignedOut>
  </header>
</template>

To protect an API route, you can access the event.context.auth object and check the value of userId to determine if the user is authenticated:

export default eventHandler(event => {
  const { userId } = event.context.auth;

  if (!userId) {
    throw createError({
      statusCode: 401,
      message: 'Unauthorized',
    });
  }

  return { userId };
});

Support

You can get in touch with us in any of the following ways:

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines and code of conduct.

Security

@clerk/nuxt follows good practices of security, but 100% security cannot be assured.

@clerk/nuxt is provided "as is" without any warranty. Use at your own risk.

For more information and to report security issues, please refer to our security documentation.

License

This project is licensed under the MIT license.

See LICENSE for more information.