Provides post-training cutoff knowledge on Vue 3.6 Vapor Mode (beta, direct DOM), Pinia 3/Colada, Vue Router 5 file-based routing, reactivity refactor, and data loaders for Vue.js work.
npx claudepluginhub nevaberry/nevaberry-plugins --plugin vuejs-knowledge-patchThis skill uses the workspace's default tool permissions.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Designs, audits, and improves analytics tracking systems using Signal Quality Index for reliable, decision-ready data in marketing, product, and growth.
Enforces A/B test setup with gates for hypothesis locking, metrics definition, sample size calculation, assumptions checks, and execution readiness before implementation.
Supplementary knowledge for Vue.js ecosystem features released after Claude's training cutoff. Covers Vue 3.6 (beta), Pinia 3, Pinia Colada, Vue Router 5, and Data Loaders.
A new opt-in compilation mode that bypasses the virtual DOM entirely, generating direct DOM manipulation code. Delivers Solid.js/Svelte 5-level performance.
Opt in by adding the vapor attribute to the script setup tag:
<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
Two app creation modes:
// 1. Pure Vapor app (no VDOM runtime, smallest bundle)
import { createVaporApp } from 'vue'
createVaporApp(App).mount('#app')
// 2. Mixed VDOM + Vapor (incremental adoption)
import { createApp, vaporInteropPlugin } from 'vue'
createApp(App)
.use(vaporInteropPlugin)
.mount('#app')
Not supported in Vapor Mode: Options API, app.config.globalProperties, getCurrentInstance() (returns null), @vue:xxx per-element lifecycle events.
Custom directives have a different interface in Vapor — value is a reactive getter, return a cleanup function:
const vHighlight: VaporDirective = (el, color) => {
watchEffect(() => {
;(el as HTMLElement).style.backgroundColor = color?.() ?? 'yellow'
})
return () => { /* cleanup */ }
}
For full Vapor directive API, VDOM interop details, and feature matrix, see references/vapor-mode.md.
Vue 3.6 refactors @vue/reactivity based on alien-signals. Same API surface, significantly improved performance and memory usage. No code changes required.
Transition release — merges unplugin-vue-router (file-based routing) into core. No breaking changes for Vue Router 4 users without unplugin-vue-router.
pnpm update vue-router@5
| Old import | New import |
|---|---|
unplugin-vue-router/vite | vue-router/vite |
unplugin-vue-router/data-loaders/basic | vue-router/experimental |
unplugin-vue-router/data-loaders/pinia-colada | vue-router/experimental/pinia-colada |
unplugin-vue-router (utilities) | vue-router/unplugin |
unplugin-vue-router/volar/* | vue-router/volar/* |
| Export | Purpose |
|---|---|
vue-router | Main API (unchanged) |
vue-router/vite | Vite plugin for file-based routing |
vue-router/auto-routes | Generated routes |
vue-router/unplugin | Webpack/Rollup/esbuild + utilities |
vue-router/experimental | Data loaders (defineBasicLoader, DataLoaderPlugin) |
vue-router/experimental/pinia-colada | Pinia Colada loader (defineColadaLoader) |
next() callback deprecated in navigation guards — prepare for removal in Vue Router 6:
// Deprecated
router.beforeEach((to, from, next) => {
if (isAuthenticated) next()
else next('/login')
})
// Recommended (works since v4)
router.beforeEach((to) => {
if (!isAuthenticated) return '/login'
})
New in v5.0.3: reroute() replaces NavigationResult, _parent folders for non-matchable layout routes.
For full migration checklist, see references/vue-router-5.md.
Extract async data fetching outside the component setup, running it in a navigation guard. Data is ready before the component renders.
// Setup
import { DataLoaderPlugin } from 'vue-router/experimental'
app.use(DataLoaderPlugin, { router })
app.use(router)
<script lang="ts">
import { defineBasicLoader } from 'vue-router/experimental'
import { getUserById } from '../api'
export const useUserData = defineBasicLoader('/users/[id]', async (route) => {
return getUserById(route.params.id)
})
</script>
<script setup lang="ts">
const { data: user, isLoading, error, reload } = useUserData()
</script>
Two loader implementations: defineBasicLoader (always re-runs) and defineColadaLoader (uses @pinia/colada for caching). For details, see references/data-loaders.md.
A "boring" major with no new features — drops deprecated APIs. For most users, no code changes required.
| Change | Migration |
|---|---|
| Vue 2 support dropped | Vue 3 only |
| TypeScript 5+ required | Update TS |
PiniaStorePlugin removed | Use PiniaPlugin |
defineStore({ id: 'name' }) removed | Use defineStore('name', { ... }) |
Published as type: module | CJS dist files still provided |
| Devtools API upgraded to v7 | IIFE build no longer includes devtools |
@pinia/colada)Official data-fetching layer for Vue — comparable to TanStack Query but Vue/Pinia-native.
import { PiniaColada } from '@pinia/colada'
app.use(PiniaColada)
import { useQuery } from '@pinia/colada'
const { data, isLoading, error, status, refresh, refetch } = useQuery({
key: ['todos'],
query: () => fetch('/api/todos').then(r => r.json()),
staleTime: 5_000,
gcTime: 300_000,
})
import { useMutation } from '@pinia/colada'
const { mutate, isLoading } = useMutation({
mutation: (todo) => fetch('/api/todos', {
method: 'POST',
body: JSON.stringify(todo),
}),
onSuccess: ({ queryCache }) => {
queryCache.invalidateQueries({ key: ['todos'] })
},
})
Array-based hierarchical keys. Invalidating a prefix invalidates all descendants:
// These are related — invalidating ['todos'] also invalidates ['todos', 1]
useQuery({ key: ['todos'], ... })
useQuery({ key: ['todos', 1], ... })
// Reactive keys
const id = ref(1)
useQuery({ key: () => ['todos', id.value], query: () => fetchTodo(id.value) })
import { useQueryCache } from '@pinia/colada'
const queryCache = useQueryCache()
queryCache.invalidateQueries({ key: ['todos'] }) // prefix match
queryCache.invalidateQueries({ key: ['todos'], exact: true }) // exact match
queryCache.setQueryData(['todos'], newData) // set directly
import { defineQueryOptions } from '@pinia/colada'
const todosQuery = defineQueryOptions({
key: ['todos'],
query: () => fetchTodos(),
})
// In components:
const { data } = useQuery(todosQuery)
// Outside components:
queryCache.fetch(todosQuery)
| Plugin | Package | Purpose |
|---|---|---|
| Auto Refetch | @pinia/colada-plugin-auto-refetch | Refetch on interval/stale time |
| Retry | @pinia/colada-plugin-retry | Retry failed queries |
| Cache Persister | @pinia/colada-plugin-cache-persister | Persist cache to storage |
| Delay | @pinia/colada-plugin-delay | Delay loading state (avoid flash) |
| Query Hooks | Built-in (PiniaColadaQueryHooksPlugin) | Global lifecycle hooks |
For useInfiniteQuery, optimistic updates, plugin configuration, and full API reference, see references/pinia-colada.md.
references/vapor-mode.md — Custom directives, VDOM interop, feature restrictions, supported APIsreferences/vue-router-5.md — Full migration checklist, _parent routes, reroute(), deprecationsreferences/data-loaders.md — defineBasicLoader, defineColadaLoader, parallel loading, SSRreferences/pinia-colada.md — Full API: queries, mutations, infinite queries, cache management, plugins, optimistic updates