https://github.com/tarkhov/vue-string-directives
Vue string directives.
https://github.com/tarkhov/vue-string-directives
directive es5 javascript js library node nodejs npm nuxt nuxtjs string vue vuejs
Last synced: 4 months ago
JSON representation
Vue string directives.
- Host: GitHub
- URL: https://github.com/tarkhov/vue-string-directives
- Owner: tarkhov
- License: mit
- Created: 2020-08-01T10:39:19.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-04-21T06:49:01.000Z (about 3 years ago)
- Last Synced: 2025-03-15T04:49:00.215Z (over 1 year ago)
- Topics: directive, es5, javascript, js, library, node, nodejs, npm, nuxt, nuxtjs, string, vue, vuejs
- Language: JavaScript
- Homepage: https://tarkhov.github.io/vue-string-directives/
- Size: 1.44 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue String Directives
Vue string directives library can change form input value dynamically. All languages are supported.
### Contents
1. [Compatibility](#compatibility)
2. [Installation](#installation)
1. [NPM](#npm)
2. [Manually](#manually)
3. [Usage](#usage)
1. [Camel case](#camel-case)
2. [Capitalize](#capitalize)
3. [Flat case](#flat-case)
4. [Kebab case](#kebab-case)
5. [Lower case](#lower-case)
6. [Pad](#pad)
7. [Pascal case](#pascal-case)
8. [Repeat](#repeat)
9. [Replace](#replace)
10. [Snake case](#snake-case)
11. [Title case](#title-case)
12. [Train case](#train-case)
13. [Truncate](#truncate)
14. [Upper case](#upper-case)
4. [Author](#author)
5. [License](#license)
## Compatibility
Library | Version
------- | -------
Vue | >= 3.5
## Installation
### NPM
```bash
npm install vue-string-directives
```
### Manually
[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:
```bash
wget https://github.com/tarkhov/vue-string-directives/releases/download/v1.2.1/vue-string-directives.zip
unzip vue-string-directives.zip
```
## Usage
Add following code to your `main.js` file created by Vue CLI:
```js
import { createApp } from 'vue'
import { VueStringDirectives } from 'vue-string-directives'
import App from './App.vue'
const app = createApp(App)
app.use(VueStringDirectives)
app.mount('#app')
```
Alternatively you can use a specific directive to import it into a specific component:
```js
import { upper, lower } from 'vue-string-directives'
export default {
directives: {
upper,
lower
}
}
```
Also you can import all directives to component:
```js
import { StringDirectivesMixin } from 'vue-string-directives'
export default {
mixins: [StringDirectivesMixin]
}
```
### Camel case
```js
const camel = defineModel('camel')
```
```html
```
### Capitalize
```js
const capitalize = defineModel('capitalize')
```
```html
```
### Flat case
```js
const flat = defineModel('flat')
```
```html
```
### Kebab case
```js
const kebab = defineModel('kebab')
```
```html
```
### Lower case
```js
const lower = defineModel('lower')
```
```html
```
### Pad
```js
const lower = defineModel('plowerd')
```
```html
```
### Pascal case
```js
const pascal = defineModel('pascal')
```
```html
```
### Repeat
```js
const repeat = defineModel('repeat')
```
```html
```
### Replace
```js
const replace = defineModel('replace')
```
```html
```
### Snake case
```js
const snake = defineModel('snake')
```
```html
```
### Title case
```js
const title = defineModel('title')
```
```html
```
### Train case
```js
const train = defineModel('train')
```
```html
```
### Truncate
```js
const truncate = defineModel('truncate')
```
```html
```
### Upper case
```js
const upper = defineModel('upper')
```
```html
```
## Author
* [Twitter](https://x.com/tarkhovich)
* [Medium](https://medium.com/@tarkhov)
## License
This project is licensed under the **MIT License** - see the `LICENSE` file for details.