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>
80 lines
1.9 KiB
Markdown
80 lines
1.9 KiB
Markdown
---
|
|
category: '@Integrations'
|
|
---
|
|
|
|
# useChangeCase
|
|
|
|
Reactive wrapper for [`change-case`](https://github.com/blakeembrey/change-case).
|
|
|
|
Subsitutes `useCamelCase`, `usePascalCase`, `useSnakeCase`, `useSentenceCase`, `useCapitalize`, etc.
|
|
|
|
## Install
|
|
|
|
```bash
|
|
npm i change-case@^5
|
|
```
|
|
|
|
## Usage
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
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>
|
|
```
|