Setting the skill. One moment.
Frameworks · Clerk…
References
ComposablesAssets
IndexAlso bundled
EvalsCredited skills
22 skills · 82 min
Frameworks
Skill 17 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
Install
npx skills add clerk/skills --skill clerk-vue-patternsnpx skills add clerk/skills/plugin marketplace add clerk/skillsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
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 organizationsVue 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 23 September 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.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 skill 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 skill 17.
Documentation the agent loads on demand, rather than up front.
Templates, schemas and fixtures the skill draws on.
Everything else published alongside the skill.