# 🔤 vue-case ### Professional Case Transformation Library for Vue 3 [![npm version](https://img.shields.io/npm/v/vue-case.svg?style=flat-square)](https://www.npmjs.com/package/vue-case) [![npm downloads](https://img.shields.io/npm/dm/vue-case.svg?style=flat-square)](https://www.npmjs.com/package/vue-case) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/vue-case?style=flat-square)](https://bundlephobia.com/package/vue-case) [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=flat-square)](https://www.typescriptlang.org/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![Test Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen.svg?style=flat-square)](https://github.com/idimetrix/vue-case)

Transform strings between 19+ case formats with full TypeScript support

[Features](#-features) • [Installation](#-installation) • [Quick Start](#-quick-start) • [API Reference](#-available-methods) • [Examples](#-examples) • [Documentation](#-usage-guide) • [Live Demo](https://github.com/idimetrix/vue-case)

--- ## 🌟 Highlights > **⚠️ Version 2.0** - Complete rewrite for **Vue 3** with full **TypeScript** support and **100% test coverage**. For Vue 2, use version 1.x. ```typescript import { camelCase, pascalCase, snakeCase } from 'vue-case'; camelCase('hello world') // → 'helloWorld' pascalCase('hello world') // → 'HelloWorld' snakeCase('hello world') // → 'hello_world' ``` ## ✨ Features

### 🎯 **Core Features** - ✅ **19+ Case Transformations** - ✅ **100% Test Coverage** - ✅ **Full TypeScript Support** - ✅ **Zero Configuration** - ✅ **Tree Shakeable**

### 🚀 **Vue 3 Integration** - ✅ **Composition API** with `useCase()` - ✅ **Options API** with global `$methods` - ✅ **Direct Imports** for flexibility - ✅ **Plugin System** for global access - ✅ **CDN Support** for quick prototyping

## 📦 Installation

**npm** ```bash npm install vue-case ```

**pnpm** ```bash pnpm add vue-case ```

**yarn** ```bash yarn add vue-case ```

### CDN Usage ```html ``` ## 🚀 Quick Start ### 🔵 Composition API (Recommended) ```vue ``` ### 🟢 Options API ```vue ``` ### 🟣 Direct Imports (Tree-Shakeable) ```typescript import { camelCase, pascalCase, snakeCase, constantCase } from 'vue-case'; // Use anywhere in your code const apiEndpoint = camelCase('user profile'); // 'userProfile' const className = pascalCase('my component'); // 'MyComponent' const dbColumn = snakeCase('user name'); // 'user_name' const envVar = constantCase('api key'); // 'API_KEY' ``` ## 📖 Usage Guide ### 1️⃣ Plugin Installation (Global Access) **Setup in `main.ts`:** ```typescript import { createApp } from 'vue'; import VueCase from 'vue-case'; import App from './App.vue'; const app = createApp(App); // Install plugin globally app.use(VueCase); app.mount('#app'); ``` **Use in any component:** ```vue ``` ### 2️⃣ Composition API with `useCase()` ```vue ``` ### 3️⃣ TypeScript Integration ```typescript import type { CaseMethods, CaseTransformFn, CaseCheckFn, TruncateFn, VueCaseOptions } from 'vue-case'; import { camelCase, pascalCase, useCase } from 'vue-case'; // Type-safe function const transformUserInput: CaseTransformFn = (input: string) => { return camelCase(input); }; // Type-safe composable usage const caseMethods: CaseMethods = useCase(); // Use in classes class StringTransformer { private transform: CaseTransformFn; constructor() { this.transform = pascalCase; } process(input: string): string { return this.transform(input); } } ``` ## 🎨 Available Methods ### 📋 Complete Transformation Reference | Method | Input | Output | Use Case | |--------|-------|--------|----------| | **`camelCase`** | `'hello world'` | `'helloWorld'` | JavaScript variables, object keys | | **`pascalCase`** | `'hello world'` | `'HelloWorld'` | Component names, class names | | **`snakeCase`** | `'hello world'` | `'hello_world'` | Database columns, Python variables | | **`constantCase`** | `'hello world'` | `'HELLO_WORLD'` | Environment variables, constants | | **`paramCase`** | `'hello world'` | `'hello-world'` | URLs, CSS classes, file names | | **`dotCase`** | `'hello world'` | `'hello.world'` | Object paths, configuration keys | | **`pathCase`** | `'hello world'` | `'hello/world'` | File paths, routes | | **`headerCase`** | `'hello world'` | `'Hello-World'` | HTTP headers | | **`capitalCase`** | `'hello world'` | `'Hello World'` | Titles, display names | | **`titleCase`** | `'hello world'` | `'Hello World'` | Book titles, headings | | **`sentenceCase`** | `'HELLO WORLD'` | `'Hello world'` | Sentences, descriptions | | **`noCase`** | `'helloWorld'` | `'hello world'` | Remove formatting | | **`lowerCase`** | `'HELLO WORLD'` | `'hello world'` | Normalize to lowercase | | **`upperCase`** | `'hello world'` | `'HELLO WORLD'` | Normalize to uppercase | | **`lowerCaseFirst`** | `'Hello'` | `'hello'` | Lowercase first letter | | **`upperCaseFirst`** | `'hello'` | `'Hello'` | Capitalize first letter | | **`swapCase`** | `'Hello World'` | `'hELLO wORLD'` | Toggle case | ### 🛠️ Utility Methods | Method | Signature | Description | Example | |--------|-----------|-------------|---------| | **`truncate`** | `(text: string, length?: number)` | Truncate text with "..." | `truncate('Hello World', 5)` → `'Hello...'` | | **`isLowerCase`** | `(text: string): boolean` | Check if lowercase | `isLowerCase('hello')` → `true` | | **`isUpperCase`** | `(text: string): boolean` | Check if uppercase | `isUpperCase('HELLO')` → `true` | ## 💡 Real-World Examples ### 🔹 Example 1: API Request/Response Transformer ```typescript import { camelCase, snakeCase } from 'vue-case'; // Transform snake_case API responses to camelCase function transformResponse>(data: T): Record { return Object.entries(data).reduce((acc, [key, value]) => { acc[camelCase(key)] = value; return acc; }, {} as Record); } // Transform camelCase to snake_case for API requests function transformRequest>(data: T): Record { return Object.entries(data).reduce((acc, [key, value]) => { acc[snakeCase(key)] = value; return acc; }, {} as Record); } // Usage with Axios import axios from 'axios'; const api = axios.create({ baseURL: 'https://api.example.com', transformResponse: [(data) => { const parsed = JSON.parse(data); return transformResponse(parsed); }], transformRequest: [(data) => { return JSON.stringify(transformRequest(data)); }] }); // Now your API calls work seamlessly: const response = await api.get('/user_profile'); // API returns user_name console.log(response.data.userName); // Access as userName ``` ### 🔹 Example 2: Dynamic Component Generator ```vue ``` ### 🔹 Example 3: Form Field Generator ```vue ``` ### 🔹 Example 4: URL Slug Generator ```vue ``` ### 🔹 Example 5: Environment Variable Manager ```typescript import { constantCase, camelCase } from 'vue-case'; class EnvironmentConfig { private config: Record = {}; // Load from process.env loadFromEnv() { this.config = { [camelCase('API_KEY')]: process.env.API_KEY || '', [camelCase('DATABASE_URL')]: process.env.DATABASE_URL || '', [camelCase('APP_NAME')]: process.env.APP_NAME || '', }; return this.config; } // Generate .env content generateEnvFile(config: Record): string { return Object.entries(config) .map(([key, value]) => `${constantCase(key)}=${value}`) .join('\n'); } } // Usage const env = new EnvironmentConfig(); const config = { apiKey: 'secret123', databaseUrl: 'postgresql://...', appName: 'My App' }; console.log(env.generateEnvFile(config)); // Output: // API_KEY=secret123 // DATABASE_URL=postgresql://... // APP_NAME=My App ``` ### 🔹 Example 6: CSS Class Generator ```vue ``` ### 🔹 Example 7: Database Query Builder ```typescript import { snakeCase } from 'vue-case'; interface QueryFilters { [key: string]: any; } class QueryBuilder { private tableName: string; private filters: Record = {}; constructor(tableName: string) { this.tableName = snakeCase(tableName); } where(filters: QueryFilters) { this.filters = Object.entries(filters).reduce((acc, [key, value]) => { acc[snakeCase(key)] = value; return acc; }, {} as Record); return this; } build(): string { const conditions = Object.entries(this.filters) .map(([key, value]) => `${key} = '${value}'`) .join(' AND '); return `SELECT * FROM ${this.tableName} WHERE ${conditions}`; } } // Usage const query = new QueryBuilder('UserProfile') .where({ firstName: 'John', emailAddress: 'john@example.com' }) .build(); console.log(query); // SELECT * FROM user_profile WHERE first_name = 'John' AND email_address = 'john@example.com' ``` ### 🔹 Example 8: Internationalization Key Generator ```typescript import { dotCase } from 'vue-case'; interface TranslationKeys { [key: string]: string | TranslationKeys; } function generateI18nKeys(prefix: string, keys: string[]): TranslationKeys { return keys.reduce((acc, key) => { const i18nKey = dotCase(`${prefix} ${key}`); acc[i18nKey] = `${prefix}.${key}`; return acc; }, {} as TranslationKeys); } // Generate translation keys const userKeys = generateI18nKeys('user', [ 'profile settings', 'account details', 'privacy settings' ]); console.log(userKeys); // { // 'user.profile.settings': 'user.profile settings', // 'user.account.details': 'user.account details', // 'user.privacy.settings': 'user.privacy settings' // } // Use in Vue components import { useI18n } from 'vue-i18n'; const { t } = useI18n(); const title = t(userKeys['user.profile.settings']); ``` ## 🧪 Testing Full support for all major testing frameworks: ```typescript import { describe, it, expect } from 'vitest'; // or jest import { camelCase, pascalCase, snakeCase } from 'vue-case'; describe('vue-case transformations', () => { it('transforms to camelCase', () => { expect(camelCase('hello world')).toBe('helloWorld'); expect(camelCase('hello-world')).toBe('helloWorld'); expect(camelCase('hello_world')).toBe('helloWorld'); }); it('transforms to PascalCase', () => { expect(pascalCase('hello world')).toBe('HelloWorld'); }); it('handles edge cases', () => { expect(camelCase('')).toBe(''); expect(camelCase('a')).toBe('a'); expect(camelCase('hello@world')).toBe('helloWorld'); }); }); ``` ## 📊 Performance - ⚡ **Minimal Bundle Size**: ~22KB minified - 🚀 **Tree Shakeable**: Import only what you need - 🎯 **Zero Dependencies**: Built on lightweight `text-case` library - 💨 **Fast Execution**: Optimized for performance - 📦 **Efficient**: No runtime overhead ## 🌐 Browser Support | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | |:---:|:---:|:---:|:---:| | Latest ✅ | Latest ✅ | Latest ✅ | Latest ✅ | ## 🔧 Advanced Configuration ### Custom Plugin Options ```typescript import { createApp } from 'vue'; import VueCase from 'vue-case'; import type { VueCaseOptions } from 'vue-case'; const app = createApp(App); // Custom options (currently all methods are included by default) const options: VueCaseOptions = { // Future: Configure which methods to include }; app.use(VueCase, options); ``` ### Method Chaining ```typescript import { camelCase, upperCaseFirst, lowerCase } from 'vue-case'; // Create custom transformations const customTransform = (text: string) => { return upperCaseFirst(camelCase(lowerCase(text))); }; customTransform('HELLO WORLD'); // 'HelloWorld' ``` ## 📚 Type Definitions ```typescript // All available types exported export type CaseTransformFn = (value: string) => string; export type TruncateFn = (value: string, length?: number) => string; export type CaseCheckFn = (value: string) => boolean; export interface CaseMethods { camelCase: CaseTransformFn; pascalCase: CaseTransformFn; capitalCase: CaseTransformFn; headerCase: CaseTransformFn; titleCase: CaseTransformFn; pathCase: CaseTransformFn; paramCase: CaseTransformFn; dotCase: CaseTransformFn; snakeCase: CaseTransformFn; constantCase: CaseTransformFn; lowerCase: CaseTransformFn; lowerCaseFirst: CaseTransformFn; upperCase: CaseTransformFn; upperCaseFirst: CaseTransformFn; swapCase: CaseTransformFn; sentenceCase: CaseTransformFn; noCase: CaseTransformFn; isLowerCase: CaseCheckFn; isUpperCase: CaseCheckFn; truncate: TruncateFn; } export interface VueCaseOptions { // Plugin configuration options } // Global property types for Options API declare module 'vue' { interface ComponentCustomProperties { $case: CaseMethods; $camelCase: CaseTransformFn; $pascalCase: CaseTransformFn; // ... all other methods } } ``` ## ❓ FAQ

Q: Can I use this with Vue 2?

A: No, version 2.0+ is for Vue 3 only. For Vue 2, use version 1.x: ```bash npm install vue-case@1 ```

Q: Does this work with Nuxt 3?

A: Yes! Just install and use it like any other Vue 3 plugin: ```typescript // plugins/vue-case.ts import VueCase from 'vue-case'; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VueCase); }); ```

Q: Can I use this without Vue?

A: Yes! Use direct imports: ```typescript import { camelCase, snakeCase } from 'vue-case'; // Works in any JavaScript/TypeScript project ```

Q: Is this tree-shakeable?

A: Yes! When you use direct imports, only the methods you import will be included in your bundle.

Q: What's the difference between paramCase and kebab-case?

A: They're the same! `paramCase` produces kebab-case format (`hello-world`).

## 🤝 Contributing We welcome contributions! Here's how you can help: 1. 🍴 **Fork** the repository 2. 🔧 **Create** your feature branch (`git checkout -b feature/AmazingFeature`) 3. ✅ **Test** your changes (`pnpm test`) 4. 💾 **Commit** your changes (`git commit -m 'Add some AmazingFeature'`) 5. 📤 **Push** to the branch (`git push origin feature/AmazingFeature`) 6. 🎉 **Open** a Pull Request ### Development Setup ```bash # Clone the repository git clone https://github.com/idimetrix/vue-case.git cd vue-case # Install dependencies pnpm install # Run tests pnpm test # Run tests with coverage pnpm test --coverage # Build library pnpm run build # Type check pnpm run typecheck # Run dev server pnpm serve ``` ## 📝 Changelog See [CHANGELOG.md](./CHANGELOG.md) for detailed release notes. ## 📄 License [MIT](LICENSE) © [Dmitry Selikhov](https://www.linkedin.com/in/dimetrix) ## 🔗 Links

### 📦 Package [npm](https://www.npmjs.com/package/vue-case)

### 💻 Repository [GitHub](https://github.com/idimetrix/vue-case)

### 🐛 Issues [Report Bug](https://github.com/idimetrix/vue-case/issues)

### 💡 Discussions [Ideas & Questions](https://github.com/idimetrix/vue-case/discussions)

## 💝 Support the Project If you find **vue-case** helpful, please consider: - ⭐ **Star** the repository on GitHub - 🐛 **Report** any bugs you find - 📝 **Contribute** to documentation - 💡 **Suggest** new features - 📢 **Share** with the community - 💖 **Sponsor** the development ## 🏆 Credits Built with ❤️ using: - [Vue 3](https://vuejs.org/) - The Progressive JavaScript Framework - [TypeScript](https://www.typescriptlang.org/) - JavaScript with syntax for types - [text-case](https://www.npmjs.com/package/text-case) - Text transformation utilities ## 📊 Stats ![Alt](https://repobeats.axiom.co/api/embed/yourstatshere.svg "Repobeats analytics image") ---

**Made with ❤️ for the Vue.js community** [⬆ Back to Top](#-vue-case)