feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
116
skills/vueuse-functions/references/useVModel.md
Normal file
116
skills/vueuse-functions/references/useVModel.md
Normal file
@@ -0,0 +1,116 @@
|
||||
---
|
||||
category: Component
|
||||
---
|
||||
|
||||
# useVModel
|
||||
|
||||
Shorthand for v-model binding, props + emit -> ref
|
||||
|
||||
> We encourage you to use Vue's [`defineModel`](https://vuejs.org/api/sfc-script-setup.html#definemodel) over this composable, however there are some edge-cases like using `TSX` or the `deep: true` option that `defineModel` doesn't support.
|
||||
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const data = useVModel(props, 'modelValue', emit)
|
||||
```
|
||||
|
||||
### Options API
|
||||
|
||||
```ts
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
export default {
|
||||
setup(props, { emit }) {
|
||||
const data = useVModel(props, 'data', emit)
|
||||
|
||||
console.log(data.value) // props.data
|
||||
data.value = 'foo' // emit('update:data', 'foo')
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface UseVModelOptions<T, Passive extends boolean = false> {
|
||||
/**
|
||||
* When passive is set to `true`, it will use `watch` to sync with props and ref.
|
||||
* Instead of relying on the `v-model` or `.sync` to work.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
passive?: Passive
|
||||
/**
|
||||
* When eventName is set, it's value will be used to overwrite the emit event name.
|
||||
*
|
||||
* @default undefined
|
||||
*/
|
||||
eventName?: string
|
||||
/**
|
||||
* Attempting to check for changes of properties in a deeply nested object or array.
|
||||
* Apply only when `passive` option is set to `true`
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
deep?: boolean
|
||||
/**
|
||||
* Defining default value for return ref when no value is passed.
|
||||
*
|
||||
* @default undefined
|
||||
*/
|
||||
defaultValue?: T
|
||||
/**
|
||||
* Clone the props.
|
||||
* Accepts a custom clone function.
|
||||
* When setting to `true`, it will use `JSON.parse(JSON.stringify(value))` to clone.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
clone?: boolean | CloneFn<T>
|
||||
/**
|
||||
* The hook before triggering the emit event can be used for form validation.
|
||||
* if false is returned, the emit event will not be triggered.
|
||||
*
|
||||
* @default undefined
|
||||
*/
|
||||
shouldEmit?: (v: T) => boolean
|
||||
}
|
||||
/**
|
||||
* Shorthand for v-model binding, props + emit -> ref
|
||||
*
|
||||
* @see https://vueuse.org/useVModel
|
||||
* @param props
|
||||
* @param key (default 'modelValue')
|
||||
* @param emit
|
||||
* @param options
|
||||
*
|
||||
* @__NO_SIDE_EFFECTS__
|
||||
*/
|
||||
export declare function useVModel<
|
||||
P extends object,
|
||||
K extends keyof P,
|
||||
Name extends string,
|
||||
>(
|
||||
props: P,
|
||||
key?: K,
|
||||
emit?: (name: Name, ...args: any[]) => void,
|
||||
options?: UseVModelOptions<P[K], false>,
|
||||
): WritableComputedRef<P[K]>
|
||||
export declare function useVModel<
|
||||
P extends object,
|
||||
K extends keyof P,
|
||||
Name extends string,
|
||||
>(
|
||||
props: P,
|
||||
key?: K,
|
||||
emit?: (name: Name, ...args: any[]) => void,
|
||||
options?: UseVModelOptions<P[K], true>,
|
||||
): Ref<UnwrapRef<P[K]>>
|
||||
```
|
||||
Reference in New Issue
Block a user