Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mazipan/vue-string-filter

✂️ Vue 2.x lightweight string manipulation filter
https://github.com/mazipan/vue-string-filter

vue vue-filter vue-string vue-string-filter vue2

Last synced: about 2 months ago
JSON representation

✂️ Vue 2.x lightweight string manipulation filter

Awesome Lists containing this project

README

        

# :scissors: Vue String Filter

> Lightweight Vue filter for string manipulation

[![License](https://img.shields.io/github/license/mazipan/vue-string-filter.svg?maxAge=3600)](https://github.com/mazipan/vue-string-filter) ![minified](https://badgen.net/bundlephobia/minzip/vue-string-filter) [![version](https://img.shields.io/npm/v/vue-string-filter.svg)](https://www.npmjs.com/package/vue-string-filter) [![downloads](https://img.shields.io/npm/dt/vue-string-filter.svg)](https://www.npmjs.com/package/vue-string-filter) [![Travis](https://img.shields.io/travis/mazipan/vue-string-filter.svg)](https://travis-ci.org/mazipan/vue-string-filter) [![codecov](https://codecov.io/gh/mazipan/vue-string-filter/branch/master/graph/badge.svg)](https://codecov.io/gh/mazipan/vue-string-filter)

## Demo

[https://mazipan.github.io/vue-string-filter/](https://mazipan.github.io/vue-string-filter/)

## Available Filter

+ `uppercase`
+ `lowercase`
+ `capitalize`
+ `titlecase`
+ `slug`
+ `truncate`
+ `cut`
+ `remove`
+ `remove_first`
+ `replace`
+ `replace_first`
+ `append`

## Download

```bash
# NPM
npm install vue-string-filter

# Yarn
yarn add vue-string-filter
```

## Sample Usage

### Use Plugins

```javascript
import VueStringFilter from 'vue-string-filter'
Vue.use(VueStringFilter)
```

#### Import Individual Filters

```javascript
import Vue from 'vue'

// using named exports
import { append, capitalize, cut... } from 'vue-string-filter'

// directly
import append from 'vue-string-filter/dist/append'
import capitalize from 'vue-string-filter/dist/capitalize'
import cut from 'vue-string-filter/dist/cut'
import lowercase from 'vue-string-filter/dist/lowercase'
import remove_first from 'vue-string-filter/dist/remove-first'
import remove from 'vue-string-filter/dist/remove'
import replace_first from 'vue-string-filter/dist/replace-first'
import replace from 'vue-string-filter/dist/replace'
import slug from 'vue-string-filter/dist/slug'
import titlecase from 'vue-string-filter/dist/titlecase'
import truncate from 'vue-string-filter/dist/truncate'
import uppercase from 'vue-string-filter/dist/uppercase'

Vue.filter('append', append)
Vue.filter('capitalize', capitalize)
Vue.filter('cut', cut)
Vue.filter('lowercase', lowercase)
Vue.filter('remove_first', remove_first)
Vue.filter('remove', remove)
Vue.filter('replace_first', replace_first)
Vue.filter('replace', replace)
Vue.filter('slug', slug)
Vue.filter('titlecase', titlecase)
Vue.filter('truncate', truncate)
Vue.filter('uppercase', uppercase)
```

### Use in View

```html
{{ stringWillFormatted | uppercase }}
{{ stringWillFormatted | lowercase }}
{{ stringWillFormatted | capitalize }}
{{ stringWillFormatted | titlecase }}
{{ stringWillFormatted | slug }}
{{ stringWillFormatted | truncate(10) }}
{{ stringWillFormatted | cut(10) }}
{{ stringWillFormatted | remove('stringToRemove') }}
{{ stringWillFormatted | remove_first('stringToRemove') }}
{{ stringWillFormatted | replace('stringToReplace') }}
{{ stringWillFormatted | replace_first('stringToReplace') }}
{{ stringWillFormatted | append('stringToAppend') }}
```

## Support me

- Via [trakteer](https://trakteer.id/mazipan)
- Direct support, [send me an email](mailto:[email protected])

## Contributing

If you'd like to contribute, head to the [contributing guidelines](/CONTRIBUTING.md). Inside you'll find directions for opening issues, coding standards, and notes on development.

------

Copyright © 2019 Built with ❤️ by Irfan Maulana