前言

以前使用过Clerk，但没有写过相关内容。这次没用使用Clerk做权限认证，但仍有必要写点东西给自己留点记忆。

Clerk简介

官网

Explore by frontend framework

Next.js

Easily add secure, beautiful, and fast authentication to Next.js with Clerk.

React

Get started installing and initializing Clerk in a new React + Vite app.

Astro

Easily add secure and SSR-friendly authentication to your Astro application with Clerk.

Chrome Extension

Use the Chrome Extension SDK to authenticate users in your Chrome extension.

Expo

Use Clerk with Expo to authenticate users in your React Native application.

iOS

Use the Clerk iOS SDK to authenticate users in your native Apple applications.

JavaScript

The Clerk JavaScript SDK gives you access to prebuilt components and helpers to make user authentication easier.

Nuxt

Easily add secure, beautiful, and fast authentication to Nuxt with Clerk.

React Router

Easily add secure, edge- and SSR-friendly authentication to React Router with Clerk.

Remix

Easily add secure, edge- and SSR-friendly authentication to Remix with Clerk.

TanStack React StartBeta

Easily add secure and SSR-friendly authentication to your TanStack React Start application with Clerk.

Vue

Get started installing and initializing Clerk in a new Vue + Vite app.

Explore by backend framework

JS Backend SDK

The Clerk Backend SDK exposes our Backend API resources and low-level authentication utilities for JavaScript environments.

C#

The Clerk C# SDK is a wrapper around our Backend API to make it easier to integrate Clerk into your backend.

Express

Quickly add authentication and user management to your Express application.

Go

The Clerk Go SDK is a wrapper around the Backend API written in Golang to make it easier to integrate Clerk into your backend.

Fastify

Build secure authentication and user management flows for your Fastify server.

Python

The Clerk Python SDK is a wrapper around the Backend API written in Python to make it easier to integrate Clerk into your backend.

Ruby on Rails

Integrate authentication and user management into your Ruby application.

Explore by feature

Authentication

Clerk supports multiple authentication strategies so you can implement the strategy that makes sense for your users.

User management

Complete user management. Add sign up, sign in, and profile management to your application in minutes.

Database integrations

Enable Clerk-managed users to authenticate and interact directly with your database with Clerk’s integrations.

Customization

Clerk’s components can be customized to match the look and feel of your application.

Organizations

Organizations are shared accounts, useful for project and team leaders. Members with elevated privileges can manage member access to the organization’s data and resources.

SDKs

Clerk’s SDKs allow you to call the Clerk server API without having to implement the calls yourself.

Vue Clerk

Clerk composables and components

Easiest way to add authentication and user management to your Vue application

What is Vue Clerk?

Quickstart

View on GitHub

Pre-built Components

Components for sign up, sign in, user management, and more.

Composables

Composables for working with user, session and more.

Authentication & Users

Passwords, SSO, OTP, MFA and other advanced security features.

Getting Started​

You need to create a Clerk Application in your Clerk Dashboard before you can set up Vue Clerk. For more information, check out our Set up your application guide.

1. Set up a Vue application use Vite​

Scaffold your new Vue application using Vite.

1
2
3
4

npm create vite@latest vue-clerk-quickstart --template vue-ts
cd vue-clerk-quickstart
npm install
npm run dev

2. Install Vue Clerk​

The Vue Clerk SDK gives you access to prebuilt components, composables, and helpers for Vue.

To get started using Clerk with Vue, add the SDK to your project:

1

npm install vue-clerk

3. Set your environment variables​

  1. If you don’t have an .env.local file in the root directory of your Vue project, create one now.
  2. Find your Clerk publishable key. If you’re signed into Clerk, the .env.local snippet below will contain your key. Otherwise:
  • Navigate to the Clerk Dashboard and select your application.
  • In the navigation sidebar, select API Keys.
  • You can copy your key from the Quick Copy section.
  1. Add your key to your .env.local file.

The final result should look like this:

1

VITE_CLERK_PUBLISHABLE_KEY=pk_test_************************

4. Import the Clerk publishable key​

You will need to import your Clerk publishable key into your application. You can add an if statement to check that it is imported and that it exists. This will prevent running the application without the publishable key, and will also prevent TypeScript errors.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { createApp } from 'vue'
import App from './App.vue'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

const app = createApp(App)
app.mount('#app')

5. Add the Clerk plugin to your app​

The plugin provides active session and user context.

To make this data available across your entire app, install the Clerk plugin. You must pass your publishable key as a prop to the plugin.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

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

6. Create a header with Clerk components​

You can control which content signed in and signed out users can see with Clerk’s prebuilt components. To get started, create a header for your users to sign in or out. To do this, you will use:

  • <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 />: A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.
  • <SignInButton />: An unstyled component that links to the sign-in page or displays the sign-in modal.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

<template>
  <SignedOut>
    <SignInButton />
  </SignedOut>
  <SignedIn>
    <UserButton />
  </SignedIn>
</template>

Then, visit your app’s homepage at http://localhost:5173 while signed out to see the sign-in button. Once signed in, your app will render the user button.