{"id":16954616,"url":"https://github.com/tarkhov/vue-string-directives","last_synced_at":"2026-02-18T01:06:34.623Z","repository":{"id":44225479,"uuid":"284239721","full_name":"tarkhov/vue-string-directives","owner":"tarkhov","description":"Vue string directives.","archived":false,"fork":false,"pushed_at":"2023-04-21T06:49:01.000Z","size":1505,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T04:49:00.215Z","etag":null,"topics":["directive","es5","javascript","js","library","node","nodejs","npm","nuxt","nuxtjs","string","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://tarkhov.github.io/vue-string-directives/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tarkhov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-01T10:39:19.000Z","updated_at":"2021-10-12T22:47:38.000Z","dependencies_parsed_at":"2022-09-09T16:01:17.904Z","dependency_job_id":null,"html_url":"https://github.com/tarkhov/vue-string-directives","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarkhov%2Fvue-string-directives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarkhov%2Fvue-string-directives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarkhov%2Fvue-string-directives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarkhov%2Fvue-string-directives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tarkhov","download_url":"https://codeload.github.com/tarkhov/vue-string-directives/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247355120,"owners_count":20925558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directive","es5","javascript","js","library","node","nodejs","npm","nuxt","nuxtjs","string","vue","vuejs"],"created_at":"2024-10-13T22:10:09.109Z","updated_at":"2026-02-18T01:06:34.617Z","avatar_url":"https://github.com/tarkhov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue String Directives\n\nVue string directives library can change form input value dynamically. All languages are supported.\n\n### Contents\n\n1. [Compatibility](#compatibility)\n2. [Installation](#installation)\n   1. [NPM](#npm)\n   2. [Manually](#manually)\n3. [Usage](#usage)\n   1. [Camel case](#camel-case)\n   2. [Capitalize](#capitalize)\n   3. [Flat case](#flat-case)\n   4. [Kebab case](#kebab-case)\n   5. [Lower case](#lower-case)\n   6. [Pad](#pad)\n   7. [Pascal case](#pascal-case)\n   8. [Repeat](#repeat)\n   9. [Replace](#replace)\n   10. [Snake case](#snake-case)\n   11. [Title case](#title-case)\n   12. [Train case](#train-case)\n   13. [Truncate](#truncate)\n   14. [Upper case](#upper-case)\n4. [Author](#author)\n5. [License](#license)\n\n## Compatibility\n\nLibrary | Version\n------- | -------\nVue | \u003e= 3.5\n\n## Installation\n\n### NPM\n\n```bash\nnpm install vue-string-directives\n```\n\n### Manually\n\n[Download](https://github.com/tarkhov/vue-string-directives/releases/download/v1.2.1/vue-string-directives.zip) package and unpack it or use following commands:\n\n```bash\nwget https://github.com/tarkhov/vue-string-directives/releases/download/v1.2.1/vue-string-directives.zip\nunzip vue-string-directives.zip\n```\n\n## Usage\n\nAdd following code to your `main.js` file created by Vue CLI:\n\n```js\nimport { createApp } from 'vue'\nimport { VueStringDirectives } from 'vue-string-directives'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(VueStringDirectives)\napp.mount('#app')\n```\n\nAlternatively you can use a specific directive to import it into a specific component:\n\n```js\nimport { upper, lower } from 'vue-string-directives'\n\nexport default {\n directives: {\n   upper,\n   lower\n  }\n}\n```\n\nAlso you can import all directives to component:\n\n```js\nimport { StringDirectivesMixin } from 'vue-string-directives'\n\nexport default {\n mixins: [StringDirectivesMixin]\n}\n```\n\n### Camel case\n\n```js\nconst camel = defineModel('camel')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: camel 123 case. Output: camelCase. --\u003e\n  \u003cinput type=\"text\" v-model=\"camel\" v-camel\u003e\n\n  \u003c!-- Input: camel 123 case. Output: camel123Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"camel\" v-camel.numbers\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"camel\" v-camel=\"{ numbers: true }\"\u003e\n\n  \u003c!-- Input: cameL 123 casE. Output: camelCase. --\u003e\n  \u003cinput type=\"text\" v-model=\"camel\" v-camel.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"camel\" v-camel=\"{ lower: true }\"\u003e\n\n  \u003c!-- Input: cameL 123 casE. Output: camel123Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"camel\" v-camel.numbers.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"camel\" v-camel=\"{ numbers: true, lower: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Capitalize\n\n```js\nconst capitalize = defineModel('capitalize')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: capitalize. Output: Capitalize. --\u003e\n  \u003cinput type=\"text\" v-model=\"capitalize\" v-capitalize\u003e\n\n  \u003c!-- Input: cApitalizE. Output: Capitalize. --\u003e\n  \u003cinput type=\"text\" v-model=\"capitalize\" v-capitalize.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"capitalize\" v-capitalize=\"{ lower: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Flat case\n\n```js\nconst flat = defineModel('flat')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: Flat 123 Case. Output: flatcase. --\u003e\n  \u003cinput type=\"text\" v-model=\"flat\" v-flat\u003e\n\n  \u003c!-- Input: Flat 123 Case. Output: flat123case. --\u003e\n  \u003cinput type=\"text\" v-model=\"flat\" v-flat.numbers\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"flat\" v-flat=\"{ numbers: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Kebab case\n\n```js\nconst kebab = defineModel('kebab')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: Kebab 123 Case. Output: kebab-case. --\u003e\n  \u003cinput type=\"text\" v-model=\"kebab\" v-kebab\u003e\n\n  \u003c!-- Input: Kebab 123 Case. Output: kebab-123-case. --\u003e\n  \u003cinput type=\"text\" v-model=\"kebab\" v-kebab.numbers\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"kebab\" v-kebab=\"{ numbers: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Lower case\n\n```js\nconst lower = defineModel('lower')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: LOWERCASE. Output: lowercase. --\u003e\n  \u003cinput type=\"text\" v-model=\"lower\" v-lower\u003e\n\n  \u003c!-- Input: LOWERCASE. Output: lOWERCASE. --\u003e\n  \u003cinput type=\"text\" v-model=\"lower\" v-lower.first\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"lower\" v-lower=\"{ first: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Pad\n\n```js\nconst lower = defineModel('plowerd')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: pad. Output: ___pad____. --\u003e\n  \u003cinput type=\"text\" v-model=\"pad\" v-pad:10=\"_\"\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"pad\" v-pad=\"{ count: 10, chars: '_' }\"\u003e\n\n  \u003c!-- Input: pad. Output: _________pad. --\u003e\n  \u003cinput type=\"text\" v-model=\"pad\" v-pad:10.start=\"_\"\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"pad\" v-pad=\"{ count: 10, chars: '_', start: true }\"\u003e\n\n  \u003c!-- Input: pad. Output: pad_______. --\u003e\n  \u003cinput type=\"text\" v-model=\"pad\" v-pad:10.end=\"_\"\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"pad\" v-pad=\"{ count: 10, chars: '_', end: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Pascal case\n\n```js\nconst pascal = defineModel('pascal')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: pascal 123 case. Output: PascalCase. --\u003e\n  \u003cinput type=\"text\" v-model=\"pascal\" v-pascal\u003e\n\n  \u003c!-- Input: pascal 123 case. Output: Pascal123Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"pascal\" v-pascal.numbers\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"pascal\" v-pascal=\"{ numbers: true }\"\u003e\n\n  \u003c!-- Input: pascaL 123 casE. Output: PascalCase. --\u003e\n  \u003cinput type=\"text\" v-model=\"pascal\" v-pascal.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"pascal\" v-pascal=\"{ lower: true }\"\u003e\n\n  \u003c!-- Input: pascaL 123 casE. Output: Pascal123Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"pascal\" v-pascal.numbers.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"pascal\" v-pascal=\"{ numbers: true, lower: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Repeat\n\n```js\nconst repeat = defineModel('repeat')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: repeat. Output: repeat-----. --\u003e\n  \u003cinput type=\"text\" v-model=\"repeat\" v-repeat:5=\"-\"\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"repeat\" v-repeat=\"{ count: 5, string: '-' }\"\u003e\n\u003c/template\u003e\n```\n\n### Replace\n\n```js\nconst replace = defineModel('replace')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: replace123. Output: replace---. --\u003e\n  \u003cinput type=\"text\" v-model=\"replace\" v-replace=\"{ regexp: '[0-9]', flags: 'g', string: '-' }\"\u003e\n\u003c/template\u003e\n```\n\n### Snake case\n\n```js\nconst snake = defineModel('snake')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: Snake 123 Case. Output: snake_case. --\u003e\n  \u003cinput type=\"text\" v-model=\"snake\" v-snake\u003e\n\n  \u003c!-- Input: Snake 123 Case. Output: snake_123_case. --\u003e\n  \u003cinput type=\"text\" v-model=\"snake\" v-snake.numbers\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"snake\" v-snake=\"{ numbers: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Title case\n\n```js\nconst title = defineModel('title')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: title 123 case. Output: Title Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"title\" v-title\u003e\n\n  \u003c!-- Input: title 123 case. Output: Title 123 Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"title\" v-title.numbers\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"title\" v-title=\"{ numbers: true }\"\u003e\n\n  \u003c!-- Input: titlE 123 casE. Output: Title Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"title\" v-title.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"title\" v-title=\"{ lower: true }\"\u003e\n\n  \u003c!-- Input: titlE 123 casE. Output: Title 123 Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"title\" v-title.numbers.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"title\" v-title=\"{ numbers: true, lower: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Train case\n\n```js\nconst train = defineModel('train')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: train 123 case. Output: Train-Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"train\" v-train\u003e\n\n  \u003c!-- Input: train 123 case. Output: Train-123-Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"train\" v-train.numbers\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"train\" v-train=\"{ numbers: true }\"\u003e\n\n  \u003c!-- Input: traiN 123 casE. Output: Train-Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"train\" v-train.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"train\" v-train=\"{ lower: true }\"\u003e\n\n  \u003c!-- Input: traiN 123 casE. Output: Train-123-Case. --\u003e\n  \u003cinput type=\"text\" v-model=\"train\" v-train.numbers.lower\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"train\" v-train=\"{ numbers: true, lower: true }\"\u003e\n\u003c/template\u003e\n```\n\n### Truncate\n\n```js\nconst truncate = defineModel('truncate')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: truncate. Output: trunc... --\u003e\n  \u003cinput type=\"text\" v-model=\"truncate\" v-truncate:5=\"'...'\"\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"truncate\" v-truncate=\"{ count: 5, omission: '...' }\"\u003e\n\u003c/template\u003e\n```\n\n### Upper case\n\n```js\nconst upper = defineModel('upper')\n```\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Input: uppercase. Output: UPPERCASE. --\u003e\n  \u003cinput type=\"text\" v-model=\"upper\" v-upper\u003e\n\n  \u003c!-- Input: uppercase. Output: Uppercase. --\u003e\n  \u003cinput type=\"text\" v-model=\"upper\" v-upper.first\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"upper\" v-upper=\"{ first: true }\"\u003e\n\n  \u003c!-- Input: uppercase one two three. Output: Uppercase One Two Three. --\u003e\n  \u003cinput type=\"text\" v-model=\"upper\" v-upper.first.every\u003e\n  \u003c!-- Or --\u003e\n  \u003cinput type=\"text\" v-model=\"upper\" v-upper=\"{ first: true, every: true }\"\u003e\n\u003c/template\u003e\n```\n\n## Author\n\n* [Twitter](https://x.com/tarkhovich)\n* [Medium](https://medium.com/@tarkhov)\n\n## License\n\nThis project is licensed under the **MIT License** - see the `LICENSE` file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarkhov%2Fvue-string-directives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarkhov%2Fvue-string-directives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarkhov%2Fvue-string-directives/lists"}