References
ComposablesAssets
IndexAlso bundled
Evals22 chapters · 80 min
Skills
Chapter 19 of 22
Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration.
1 minute · 107 words · 11 sections
SDK: @clerk/vue v2+ (Vue 3). For Nuxt, use clerk-nuxt-patterns.
| Task | Reference |
|---|---|
| Composables: useAuth, useUser, useOrganization | references/composables.md |
| Vue Router navigation guards | references/vue-router-guards.md |
| Pinia store with auth state | references/pinia-integration.md |
Vue uses composables from @clerk/vue:
useAuth() — reactive isSignedIn, userId, signOutuseUser() — reactive user objectuseClerk() — full Clerk instance for advanced operationsuseOrganization() — reactive organization, membership// 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'<script setup lang="ts">
import { useAuth, useUser } from '@clerk/vue'
const { isSignedIn, userId, signOut } = useAuth()
const { user } = useUser()
</script>
<template
<script setup lang="ts">
import { useOrganizationList } from '@clerk/vue'
const { userMemberships, setActive } = useOrganizationList()
</script>
<template>
<button
v-for="mem in userMemberships.data ?? []"
:key
| Symptom | Cause | Fix |
|---|---|---|
Composables return undefined | Not inside ClerkProvider tree | Ensure app.use(clerkPlugin, { publishableKey }) is called |
userId reactive but not updating | Destructuring loses reactivity | Use const { userId } = useAuth() (toRefs-style composable, reactive) |
| What | Import |
|---|---|
| Composables | @clerk/vue |
| Plugin setup | @clerk/vue |
| Components | @clerk/vue |
clerk-setup - Initial Clerk installclerk-custom-ui - Custom flows & appearanceclerk-orgs - B2B organizationsInstall this repository
npx skills add clerk/skills/plugin marketplace add clerk/skillsSkills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.
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 verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
WebFetchskills/frameworks/clerk-vue-patterns/SKILL.mdmain, last pushed 6 August 2026.SKILL.md, not by matching a directory convention. 5 distinct layouts observed: .agents/skills/*/SKILL.md, skills/core/*/SKILL.md, skills/features/*/SKILL.md, skills/frameworks/*/SKILL.md, skills/mobile/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by Clerk, declaring 4 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree./clerk/skills.md, and each chapter at its own .md URL.10 files · 9 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of chapter 19.
Documentation the agent loads on demand, rather than up front.
Templates, schemas and fixtures the skill draws on.
Everything else published alongside the skill.