Patrones de Vue 3 con Clerk: composables (useAuth, useUser, useClerk, useOrganization), guardas de Vue Router e integración con un store de Pinia. Para Nuxt, usa clerk-nuxt-patterns.
webfetchen todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
70 tok en reposo
11 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add clerk/skills --skill clerk-vue-patterns --agent claude-codeSe instala solo en este repositorio.
Este skill makes network requests.
Di cualquiera de estas frases y el agente debería cargar este skill.
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>
<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 organizationsReproducido de clerk/skills bajo licencia MIT. Leer esta página en markdown.
11 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Este repo incluye 22 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack skills entero y su comando de instalación
Opera el CLI de Clerk para autenticación, gestión de usuarios, organizaciones y sesiones, suplantación, webhooks locales, despliegue, configuración de instancia y cualquier llamada a su API.
Añade autenticación de Clerk a cualquier proyecto siguiendo las guías oficiales de inicio rápido.
Enrutador de autenticación de Clerk. Úsalo para operaciones del CLI, añadir autenticación, flujos de login a medida, patrones por framework, organizaciones, facturación, testing o webhooks; enruta solo al skill concreto.
Añade autenticación de Clerk a apps de Expo y React Native con @clerk/expo: componentes nativos, flujos a medida, OAuth/SSO, login nativo de Google y Apple, rutas de Expo Router y biometría.
Facturación de Clerk para gestionar suscripciones: PricingTable, checkout en la app, planes, límite de asientos para B2B, permisos por funcionalidad con has() y webhooks de facturación.
Organizaciones de Clerk para SaaS B2B: apps multi-tenant con cambio de organización, acceso por rol, dominios verificados y SSO empresarial. Úsalo para espacios de equipo, RBAC y gestión de miembros.
Barreras de seguridad para comandos destructivos (gstack).
Modo Chief Security Officer: auditoría de seguridad centrada en infraestructura, con OWASP Top 10, modelado de amenazas STRIDE y verificación activa.
Modo de máxima seguridad: avisos ante comandos destructivos más restricción de ediciones a un directorio concreto (gstack).
