clerk-vue-patterns — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited clerk-vue-patterns (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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:
isSignedIn, userId, signOutuser objectorganization, 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 organizations~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.