OpenClaw Skills for Vue.js Developers: Must-Have Skills for 2026

Vue 3 has matured into a framework with a distinct identity: approachable on the surface, deeply capable underneath. The Composition API, Pinia for state management, Nuxt 3 for full-stack applications, and a testing ecosystem built around Vitest — these tools reward developers who understand their idioms. Your AI agent should understand them too.

The OpenClaw skills listed here teach your agent Vue-specific patterns so it generates code that follows Vue conventions rather than defaulting to generic JavaScript or borrowing patterns from other frameworks. These are the top Vue skills on the OpenClaw Bazaar, sorted by install count and community rating.

Composition API

vue-composition-api-patterns

Installs: 12,600 | Author: vue-craft

This is the most installed Vue skill on the Bazaar, and it addresses the most common problem with AI-generated Vue code: agents that still write Options API by default or mix Options and Composition syntax in ways that confuse both developers and tooling.

With this skill installed, your agent:

• Defaults to <script setup> syntax for single-file components
• Uses ref for primitive values and reactive for objects, following the Vue team's recommendations
• Extracts reusable logic into composables (the Vue equivalent of React's custom hooks)
• Handles computed properties correctly — using them for derived state instead of watchers
• Uses watch and watchEffect appropriately, understanding the difference between eager and lazy execution
• Implements provide/inject for dependency injection across component trees

The skill also covers the newer features from Vue 3.4 and 3.5, including defineModel for simplified two-way binding and the improved useTemplateRef API.

openclaw skill install vue-composition-api-patterns

vue-composables-library

Installs: 7,400 | Author: composable-vue

Where vue-composition-api-patterns teaches general Composition API usage, this skill focuses specifically on writing and organizing composables. It teaches your agent the conventions that the VueUse library established: consistent naming (use prefix), return value patterns (single ref vs object of refs), and cleanup registration.

Key patterns this skill enables:

• Composables that accept both ref and plain value arguments using toValue
• Proper SSR-safe composable patterns that check for browser APIs
• Composable testing strategies using Vue Test Utils
• Organizing composables in a composables/ directory with clear export patterns

Pinia State Management

vue-pinia-patterns

Installs: 10,800 | Author: pinia-guild

Pinia is the official state management solution for Vue, and this skill teaches your agent to use it idiomatically. Without it, agents tend to generate Vuex-style code (mutations, actions, getters with the old API) or create Pinia stores that miss the library's design advantages.

This skill covers:

• Setup stores using the function syntax, which aligns naturally with the Composition API
• Option stores for teams that prefer the more structured format
• Store composition — calling one store from another using useOtherStore() inside actions
• The storeToRefs pattern for destructuring store state without losing reactivity
• Pinia plugins for persistence, logging, and undo/redo functionality
• Proper TypeScript typing for stores, including generic store factories

The skill also teaches your agent when not to use Pinia. Local component state and composables handle most cases. Pinia stores are best reserved for state that genuinely needs to be shared across multiple component trees or persisted across navigation.

openclaw skill install vue-pinia-patterns

vue-pinia-colada

Installs: 4,200 | Author: data-vue

Pinia Colada is the emerging standard for async state management in Vue — think of it as Vue's answer to TanStack Query. This skill teaches your agent to use Pinia Colada for data fetching with caching, deduplication, and automatic revalidation.

The skill covers query key design, mutation patterns with optimistic updates, and cache invalidation strategies. It pairs well with vue-pinia-patterns for applications that combine synchronous and asynchronous shared state.

Nuxt 3

nuxt3-full-stack

Installs: 11,500 | Author: nuxt-mastery

Nuxt 3 is a full-stack framework built on Vue 3, and it introduces concepts that pure Vue developers may not encounter: server routes, auto-imports, hybrid rendering strategies, and the Nitro server engine. This skill is essential for any agent working on a Nuxt project.

The skill teaches your agent:

• Auto-imports: understanding which composables, components, and utilities are available without explicit imports
• Server routes: creating API endpoints in the server/ directory with proper TypeScript types
• Data fetching: using useFetch and useAsyncData correctly, including key management and error handling
• Rendering modes: choosing between universal, client-only, and static rendering per route
• Middleware: implementing route middleware for authentication and authorization
• Nuxt modules: leveraging the module ecosystem for common functionality (auth, i18n, image optimization)

Without this skill, agents treat Nuxt projects like plain Vue apps and miss the framework-level features that make Nuxt productive. They will import things that are auto-imported, create manual API wrappers instead of using server routes, and mishandle the server-client boundary.

openclaw skill install nuxt3-full-stack

nuxt3-server-patterns

Installs: 6,300 | Author: nuxt-mastery

A companion to nuxt3-full-stack that goes deeper on server-side patterns. It covers Nitro event handlers, server middleware, database integration with Drizzle ORM, session management, and deployment configuration for various platforms (Vercel, Cloudflare Workers, Node.js).

This skill is particularly useful for teams building full-stack applications where the Nuxt server handles business logic, not just page rendering.

Vitest and Testing

vue-vitest-testing

Installs: 9,700 | Author: test-vue

Vitest has become the default test runner for Vue projects, and this skill teaches your agent to write Vue component tests that follow community best practices.

Core behaviors this skill enables:

• Mounting components with @vue/test-utils and the correct plugins (Pinia, Vue Router) registered
• Testing composables in isolation using renderHook patterns
• Writing assertions against rendered output rather than internal component state
• Handling async component behavior with flushPromises and nextTick
• Mocking Nuxt-specific auto-imports in test environments
• Structuring test files alongside their components with the .spec.ts convention

The skill also covers snapshot testing guidelines for Vue — when to use inline snapshots for template output and when to prefer explicit assertions.

openclaw skill install vue-vitest-testing

vue-e2e-playwright

Installs: 5,100 | Author: e2e-patterns

End-to-end testing with Playwright for Vue and Nuxt applications. The skill covers page object patterns, fixture management, and strategies for testing server-rendered content, client-side hydration, and navigation transitions.

Vue Router

vue-router-advanced

Installs: 8,200 | Author: router-guild

Vue Router is deceptively simple for basic use cases and surprisingly deep for complex ones. This skill covers the patterns that go beyond <RouterLink> and <RouterView>:

• Navigation guards: implementing auth checks, data prefetching, and unsaved-changes warnings with beforeRouteEnter, beforeRouteUpdate, and global guards
• Dynamic routing: generating routes from data, nested route structures, and named views for complex layouts
• Route meta fields: typing and using meta fields for layout selection, permission requirements, and transition effects
• Scroll behavior: customizing scroll restoration for different navigation types
• Lazy loading: route-level code splitting with dynamic imports and loading states

The skill also covers the Composition API integration — using useRoute and useRouter in composables, and reacting to route changes with watchers.

openclaw skill install vue-router-advanced

Recommended Stack

For a well-rounded Vue agent, install these skills together:

1. vue-composition-api-patterns — foundation for all Vue 3 code
2. vue-pinia-patterns — state management
3. vue-vitest-testing — testing
4. nuxt3-full-stack — if you use Nuxt
5. vue-router-advanced — routing patterns

These five skills cover the core of modern Vue development. Your agent will generate code that a senior Vue developer would recognize as idiomatic — using the right API for each situation and following the conventions that the Vue ecosystem has established.

Browse the Skills Directory

Find the right skill for your workflow. The OpenClaw Bazaar skills directory has over 2,300 community-rated skills — searchable, sortable, and free to install.

Browse Skills →

Built a Skill? List It on the Bazaar

If you have built a skill that others would find useful, publish it on the Bazaar. Reach thousands of developers and get feedback from the community.

Learn how to publish →