AutoGineer
Generated banner for Clerk Vue Patterns
Generated logo for Clerk Vue Patterns

Clerk Vue Patterns

ClerkOfficialCreated by clerk

  • Skill
  • Tool integration
  • Software development
  • MIT
  • Low risk
  • Has scripts
Download ZIP

From the author

Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.
— the description by clerk

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides essential patterns for integrating Clerk authentication into Vue 3 applications. It covers the usage of core composables like useAuth, useUser, and useOrganization, demonstrates how to integrate Clerk state into Pinia stores for global access, and provides guidance on setting up Vue Router navigation guards. It is designed for developers using the @clerk/vue SDK to manage user sessions, organization switching, and protected routes.

What it does

  • Provides patterns for using Clerk composables in Vue 3 components.
  • Demonstrates how to wrap Clerk authentication state in Pinia stores.
  • Explains how to implement navigation guards for route protection.
  • Shows how to manage organization switching and membership data.
  • Offers troubleshooting tips for common reactivity and initialization issues.

When to use it

  • When setting up Clerk authentication in a new Vue 3 project.
  • When you need to access user or session state globally via Pinia.
  • When implementing protected routes that require authenticated users.
  • When building multi-tenant applications using Clerk organizations.
  • When debugging issues with reactive Clerk composables.

Advantages

  • Ensures consistent implementation of authentication across the application.
  • Reduces prop drilling by leveraging Pinia for auth state management.
  • Provides clear guidance on maintaining reactivity with Vue composables.
  • Includes specific patterns for complex features like organization switching.

Usage examples

“How do I access the current user's information in a Vue component?”
The skill provides a pattern using the useUser composable to access reactive user properties like firstName and imageUrl.
“How can I make Clerk auth state available globally in my Pinia store?”
It provides a code template for a Pinia store that wraps useAuth and useUser, ensuring state remains reactive and synchronized.
“How do I switch organizations in my Vue app?”
It demonstrates using the useOrganizationList composable to list memberships and the setActive function to switch the active organization.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/clerk/clerk-vue-patterns/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip clerk-vue-patterns.zip -d .agents/skills

Documentation by clerk

Vue Patterns

SDK: @clerk/vue v2+ (Vue 3). For Nuxt, use clerk-nuxt-patterns.

What Do You Need?

TaskReference
Composables: useAuth, useUser, useOrganizationreferences/composables.md
Vue Router navigation guardsreferences/vue-router-guards.md
Pinia store with auth statereferences/pinia-integration.md

Mental Model

Vue uses composables from @clerk/vue:

  • useAuth() — reactive isSignedIn, userId, signOut

  • useUser() — reactive user object

  • useClerk() — full Clerk instance for advanced operations

  • useOrganization() — reactive organization, membership

Setup

Vue (Plain)
// main.ts
import { clerkPlugin } from '@clerk/vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(clerkPlugin, {
  publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,
})
app.mount('#app')

Composables Usage

<script setup lang="ts">
import { useAuth, useUser } from '@clerk/vue'

const { isSignedIn, userId, signOut } = useAuth()
const { user } = useUser()
</script>

<template>
  <div v-if="isSignedIn">
    <p>Hello {{ user?.firstName }}</p>
    <button @click="signOut()">Sign Out</button>
  </div>
  <SignInButton v-else />
</template>

Org Switching

<script setup lang="ts">
import { useOrganizationList } from '@clerk/vue'

const { userMemberships, setActive } = useOrganizationList()
</script>

<template>
  <button
    v-for="mem in userMemberships.data ?? []"
    :key="mem.organization.id"
    @click="setActive({ organization: mem.organization.id })"
  >
    {{ mem.organization.name }}
  </button>
</template>

Common Pitfalls

SymptomCauseFix
Composables return undefinedNot inside ClerkProvider treeEnsure app.use(clerkPlugin, { publishableKey }) is called
userId reactive but not updatingDestructuring loses reactivityUse const { userId } = useAuth() (toRefs-style composable, reactive)

Import Map

WhatImport
Composables@clerk/vue
Plugin setup@clerk/vue
Components@clerk/vue

See Also

  • clerk-setup - Initial Clerk install

  • clerk-custom-ui - Custom flows & appearance

  • clerk-orgs - B2B organizations

Docs

Files

references/composables.md

Composables

All composables come from @clerk/vue.

useAuth

import { useAuth } from '@clerk/vue'

const { isSignedIn, isLoaded, userId, sessionId, signOut, getToken } = useAuth()
PropertyTypeDescription
isSignedInRef<boolean>True when user is authenticated
isLoadedRef<boolean>True when Clerk has initialized
userIdRef<string | null>Current user ID
sessionIdRef<string | null>Current session ID
signOut()functionSign out and clear session
getToken()async functionGet JWT for external APIs

useUser

import { useUser } from '@clerk/vue'

const { user, isLoaded } = useUser()

user is Ref<UserResource | null> with .firstName, .lastName, .fullName, .imageUrl, .primaryEmailAddress, etc.

useClerk

import { useClerk } from '@clerk/vue'

const clerk = useClerk()
await clerk.value.openSignIn()
await clerk.value.openUserProfile()

Use for programmatic UI control (open modals, redirect, etc.).

useOrganization

import { useOrganization } from '@clerk/vue'

const { organization, membership, isLoaded } = useOrganization()

organization is Ref<Organization | null>. membership includes role.

useOrganizationList

import { useOrganizationList } from '@clerk/vue'

const { userMemberships, setActive } = useOrganizationList()

userMemberships.data is an array of memberships. Call setActive({ organization: id }) to switch.

useSignIn / useSignUp

import { useSignIn } from '@clerk/vue'

const { signIn, setActive, isLoaded } = useSignIn()

async function submit(email: string, password: string) {
  const result = await signIn.value!.create({
    identifier: email,
    password,
  })
  if (result.status === 'complete') {
    await setActive.value!({ session: result.createdSessionId })
  }
}

CRITICAL

  • All composables return refs — access values with .value outside of templates

  • Check isLoaded before rendering auth-gated UI to prevent flashes

  • useOrganizationList returns userMemberships as a paginated resource — access .data for the array

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Declares allowed tools, Needs Node.js

Security

What our scanner noticed· Low risk

  • Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
clerk
Publisher
Clerk (Official)
Source
clerk/skills · skills/clerk-vue-patterns · commit c5d2c0d
Licence
MIT License (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by clerk.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download clerk-vue-patterns.zip