Press "Enter" to skip to content

Vue 2.x Lightweight String Manipulation Filter Library

Vue String Filter is a simple and lightweight Vuejs 2 string processing filter.

vue filters, vue filters are deprecated, vue use filter in method, vue built in filters, vue 3 filters are deprecated, vue filter example, vue js search filter multiple

Available Filter

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

How to make use of it:

Install & Download:

# Yarn
$ yarn add vue-string-filter

$ npm install vue-string-filter --save


import VueStringFilter from 'vue-string-filter'
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)
<span>{{ stringWillFormatted | uppercase }}</span>
<span>{{ stringWillFormatted | lowercase }}</span>
<span>{{ stringWillFormatted | capitalize }}</span>
<span>{{ stringWillFormatted | titlecase }}</span>
<span>{{ stringWillFormatted | slug }}</span>
<span>{{ stringWillFormatted | truncate(10) }}</span>
<span>{{ stringWillFormatted | cut(10) }}</span>
<span>{{ stringWillFormatted | remove('stringToRemove') }}</span>
<span>{{ stringWillFormatted | remove_first('stringToRemove') }}</span>
<span>{{ stringWillFormatted | replace('stringToReplace') }}</span>
<span>{{ stringWillFormatted | replace_first('stringToReplace') }}</span>
<span>{{ stringWillFormatted | append('stringToAppend') }}</span>

string manipulation filter, vue string filter Plugin/Github

See Demo And Download

Official Website(mazipan): Click Here

This superior jQuery/javascript plugin is developed by mazipan. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.