4a3ce4cc1d
Add comprehensive reference documentation for: - Vitest: environments, projects/workspaces, type testing, vi utilities - Pinia: HMR, Nuxt integration, SSR setup - Vue: built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
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>
|
|
```
|