From features
Vue 3 patterns with Clerk authentication: composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, and Pinia auth store integration. For plain Vue (not Nuxt).
How this skill is triggered — by the user, by Claude, or both
Slash command
/features:clerk-vue-patternsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
SDK: `@clerk/vue` v2+ (Vue 3). For Nuxt, use `clerk-nuxt-patterns`.
evals/evals.jsonreferences/composables.mdreferences/pinia-integration.mdreferences/vue-router-guards.mdtemplates/vue-basic-auth/index.htmltemplates/vue-basic-auth/package.jsontemplates/vue-basic-auth/src/App.vuetemplates/vue-basic-auth/src/main.tstemplates/vue-basic-auth/src/style.csstemplates/vue-basic-auth/vite.config.tsSDK: @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>
<div v-if="isSignedIn">
<p>Hello {{ user?.firstName }}</p>
<button @click="signOut()">Sign Out</button>
</div>
<SignInButton v-else />
</template>
<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>
| 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 organizationsnpx claudepluginhub clerk/skills --plugin mobileProvides Nuxt 3 auth patterns using @clerk/nuxt: middleware, composables, server API routes, and SSR-safe approaches. Good when implementing Clerk authentication in Nuxt apps.
Adds Auth0 authentication (login, logout, user sessions, protected routes) to Vue.js 3 SPAs using @auth0/auth0-vue SDK with Vite or Vue CLI.
Guides Vue.js 3 Composition API patterns, component architecture, reactivity, Pinia state management, Vue Router, and Nuxt SSR. Activates for Vue, Nuxt, Vite, or Pinia projects.