f5792c40be
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>
1.9 KiB
1.9 KiB
category
| category |
|---|
| @Integrations |
useChangeCase
Reactive wrapper for change-case.
Subsitutes useCamelCase, usePascalCase, useSnakeCase, useSentenceCase, useCapitalize, etc.
Install
npm i change-case@^5
Usage
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
// `changeCase` will be a computed
const changeCase = useChangeCase('hello world', 'camelCase')
changeCase.value // helloWorld
changeCase.value = 'vue use'
changeCase.value // vueUse
// Supported methods
// export {
// camelCase,
// capitalCase,
// constantCase,
// dotCase,
// headerCase,
// noCase,
// paramCase,
// pascalCase,
// pathCase,
// sentenceCase,
// snakeCase,
// } from 'change-case'
or passing a ref to it, the returned computed will change along with the source ref's changes.
Can be passed into options for customization
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
import { shallowRef } from 'vue'
const input = shallowRef('helloWorld')
const changeCase = useChangeCase(input, 'camelCase', {
delimiter: '-',
})
changeCase.value // hello-World
input.value = 'vue use'
changeCase.value // vue-Use
Type Declarations
type EndsWithCase<T> = T extends `${infer _}Case` ? T : never
type FilterKeys<T> = {
[K in keyof T as K extends string ? K : never]: EndsWithCase<K>
}
type ChangeCaseKeys = FilterKeys<typeof changeCase>
export type ChangeCaseType = ChangeCaseKeys[keyof ChangeCaseKeys]
export declare function useChangeCase(
input: MaybeRef<string>,
type: MaybeRefOrGetter<ChangeCaseType>,
options?: MaybeRefOrGetter<Options> | undefined,
): WritableComputedRef<string>
export declare function useChangeCase(
input: MaybeRefOrGetter<string>,
type: MaybeRefOrGetter<ChangeCaseType>,
options?: MaybeRefOrGetter<Options> | undefined,
): ComputedRef<string>