LogoAwesome Skills
  • Search
  • Category
  • Tag
  • Blog
LogoAwesome Skills
LogoAwesome Skills

Discover Open-Source Agent Skills for AI Coding Assistants

Product

  • Search
  • Category
  • Tag
  • Blog

Resources

  • Claude Skill Docs
  • Antigravity Skills Docs

Tools

  • Claude Code
  • OpenCode
  • Cursor
  • Codex
  • Antigravity

Company

  • Privacy Policy
  • Terms of Service
  • Sitemap

©2026 Awesome Skills. All rights reserved.

Privacy PolicyTerms
Back to Skills

clerk-vue-patterns

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.

45stars3forksUpdated 6/5/2026
SecurityDocumentation#authentication#documentation#pinia#clerk#vue-router#vue

Security Assessment

Safe(90/100)

Detected risks:

Sensitive File Access([SKILL.md] .env)
Security Score90/100

About clerk-vue-patterns

The clerk-vue-patterns skill provides implementation guidance for integrating Clerk authentication into Vue 3 applications using the @clerk/vue SDK (v2+). It focuses on common Vue-specific authentication patterns and helps developers correctly use Clerk composables, plugin setup, organization-aware functionality, and state management integrations. The skill is intended to reduce integration complexity by showing recommended approaches for accessing authentication state, user information, and organization context in reactive Vue applications.

Key capabilities include working with Clerk composables such as useAuth(), useUser(), useClerk(), and useOrganization(), configuring the Clerk Vue plugin during application startup, implementing authentication-aware user interfaces, supporting organization switching workflows, and integrating authentication state with Vue application architecture. The skill also references patterns for Vue Router navigation guards and Pinia store integration, and highlights common pitfalls such as missing plugin setup or issues related to reactive state usage.

This skill is useful for Vue 3 developers building authenticated applications with Clerk, including single-page applications that require user sign-in, user profile access, organization management, or protected navigation flows. It is particularly relevant for teams using Vue Router and Pinia alongside Clerk authentication. The content is designed for developers who need practical Vue-focused authentication patterns and guidance on using Clerk's reactive composables within standard Vue application structures.

FAQ

What version of Vue and Clerk does this skill target?

The skill targets Vue 3 applications using the @clerk/vue SDK version 2 or later.

Which Clerk composables are covered?

The skill covers useAuth(), useUser(), useClerk(), and useOrganization(), and also includes an organization switching example using useOrganizationList().

Does this skill include guidance for Vue Router and Pinia?

Yes. The skill references patterns for Vue Router navigation guards and Pinia authentication state integration.

What is required before using Clerk composables?

The Clerk Vue plugin must be installed in the application with app.use(clerkPlugin, { publishableKey }) so the composables can access Clerk context correctly.

Can this skill be used for Nuxt applications?

No. The content specifically states that Nuxt users should use the separate clerk-nuxt-patterns skill instead.

All Files

11 files
evals/evals.json2.0 KB
View
references/vue-router-guards.md1.6 KB
View
templates/vue-basic-auth/src/App.vue0.3 KB
View
references/pinia-integration.md1.4 KB
View
templates/vue-basic-auth/package.json0.3 KB
View
templates/vue-basic-auth/vite.config.ts0.1 KB
View
references/composables.md2.1 KB
View
templates/vue-basic-auth/index.html0.3 KB
View
templates/vue-basic-auth/src/style.css0.0 KB
View
SKILL.md2.8 KB
View
templates/vue-basic-auth/src/main.ts0.4 KB
View

Install clerk-vue-patterns

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill

Repository

clerk/skills

Related Skills

content-pattern-analyzer-sms

513

ai-ui-patterns

249

quick-mockups

7,247

clean-architecture

720