@clerk/vue

Changelog · Report a Bug · Request a Feature · Get help

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

• Vue 3.2 or later
• Node.js >=18.17.0 or later
• An existing Clerk application. Create your account for free.

Installation

Add @clerk/vue as a dependency

npm install @clerk/vue

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.local file in your Vite project:

VITE_CLERK_PUBLISHABLE_KEY=[publishable-key]

Then, install the Clerk plugin in your main Vue application:

import { createApp } from 'vue';
import App from './App.vue';
import { clerkPlugin } from '@clerk/vue';

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

const app = createApp(App);
app.use(clerkPlugin, {
  publishableKey: PUBLISHABLE_KEY,
});
app.mount('#app');

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

<script setup>
import { SignedIn, SignedOut, UserButton } from '@clerk/vue';
</script>

<template>
  <header>
    <h1>My App</h1>
    <SignedIn>
      <UserButton />
    </SignedIn>
    <SignedOut>
      <a href="/sign-in">Sign in</a>
    </SignedOut>
  </header>
</template>

Support

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

• Join our official community Discord server
• On our support page

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/vue follows good practices of security, but 100% security cannot be assured.

@clerk/vue 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.