nuxt-clerk-utils

Clerk module that builds on top of vue-clerk

Features

• Server middleware based on h3-clerk
• Utilities for handling clerk webhooks

Requirements

This module only works with SSR (server-side rendering) enabled as it uses server API routes. You cannot use this module with nuxt generate.

Quick Setup

1. Add nuxt-clerk-utils

1# Using pnpm
2pnpm add -D nuxt-clerk-utils
3
4# Using yarn
5yarn add --dev nuxt-clerk-utils
6
7# Using npm
8npm install --save-dev nuxt-clerk-utils
9

2. Add nuxt-clerk-utils to nuxt.config.ts

1export default defineNuxtConfig({
2  modules: ["nuxt-clerk-utils"],
3});

Configuration

The following environment variables are required in order for this module to function correctly to be defined in your .env:

1NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=".."
2NUXT_CLERK_SECRET_KEY="..."
3
4# Optional: Enable this if you want to handle clerk webhooks
5NUXT_CLERK_WEBHOOK_SIGNING_SECRET=".."

Vue Composables

NOTE: All of the composables and components are re-exported from vue-clerk. See project documentation for usage

Server Utils

The following helpers are auto-imported in your server/ directory.

Session Management

1// Get the current clerk session if it exists, null otherwise
2const clerkSession = await getClerkSession(event);
3
4// Require a clerk session (send back 401 if no `user` session exists)
5const clerkSession = await requireClerkSession(event);

Webhooks

To work with webhooks, first create the webhook on the clerk dashboard, and define a handler for it in your app like so:

Note: You must provide the CLERK_WEBHOOK_SIGNING_SECRET env (see above)

When defining a webhook in this way, you can assume that the webhook is valid as its signature is automatically verified.

1// server/routes/clerk.post.ts
2export default defineClerkWebhook('user.created', ({ payload }) => {
3  console.log('payload', payload)
4})
5
6

Development

1# Install dependencies
2pnpm install
3
4# Generate type stubs
5pnpm run dev:prepare
6
7# Develop with the playground
8pnpm run dev
9
10# Build the playground
11pnpm run dev:build
12
13# Run ESLint
14pnpm run lint
15
16# Run Vitest
17npm run test
18npm run test:watch
19
20# Release new version
21npm run release

Prior art and acknowledgments

• nuxt-clerk
• nuxt-auth-utils