vue-filters-collection :boom:

codesandbox example: vuejs-filters.

vue-filters-collection is a collection of filters that help transform/convert strings in a more convenient way. the following is a list of all the available filters (For now)

• camelcasToReadable - Will converts a camelcase string to a readable string JamesMay will be James May

• capitalize - takes an argument, first capitalizies the first character/s in a string. eg james may will be James May if no argument is passed the whole string will be converted to uppercase e.g james may will be JAMES MAY

• decapitalize - converts the whole string to small letters.

• htmlEntities - substitutes " htmlentity with a double quote.

• replaceAll - finds and replace all occurrences for a single string.

To install

npm install vue-filters-collection
or
yarn add vue-filters-collection

Load the plugin to your project

import Vue from 'vue';
import vueFiltersCollection from 'vue-filters-collection';

Vue.use(vueFiltersCollection);

Examples

<template>
  <div id="app">
    <div>{{ pCapitalize | capitalize }}</div>
    //JAMES MAY
    <div>{{ pCapitalize | capitalize("first") }}</div>
    //Jame May

    <div>{{ pDecapitalize | decapitalize }}</div>
    //james may
    <div>{{ pEntities | htmlEntities }}</div>
    //Hello "james" may
    <div>{{ pCamelcase | camelcase }}</div>
    //Asta Lavista Baby

    <div>
      {{ pReplaceAll }} :{{ pReplaceAll | replaceAll("this", "that") }} -
      replace all
    </div>
    //that is not a thattle, that is a cactus

    <div v-for="key in entities" :key="key">
      <h3>
        {{ key }} --------------
        <span class="ent">{{ key | htmlEntities }}</span>
      </h3>
    </div>
    {{ pEntities }} :{{ pEntities | htmlEntities }} - htmlEntities
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      pCapitalize: "james may",
      pDecapitalize: "JAMES MAY",
      pEntities: "Hello &quot;james&quot; may",
      pCamelcase: "astaLavistaBaby",
      pReplaceAll: "This is not a thistle, THIS is a cactus",

      //new html entities
      entities: {
        quo: "&quot; or &#34;",
        excla: "&excl; or &#33;",
        hash: "&num; or &#35;",
        dolle: "&dollar; or &#36;",
        perc: "&percnt; or &#37;",
        amp: "&amp; or &#38;",
        apo: "&apos; or &#39;",
        lpar: "&lpar; or &#40;",
        rpar: "&rpar; or &#41;",
        ast: "&ast; or &#42;",
        commat: "&&commat; or &#64;",
        space: "&nbsp; or &#160;",
        copy: "&copy; or &#169;",
        pound: "&pound; or &#163;",
        euro: "&euro; or &#8364;",
        micro: "&micro; or &#181;",
      },
    };
  },
};
</script>

How to use these vuejs filters in your script (code)

doTheBoogie(){
     console.log(this.$options.filters.capitalize(this.pCapitalize)); //JAMES MAY
     //or
     console.log(this.$capitalize("james"));
     // ......
}

Note!

• Need to add more html entities See ASCII Characters (Printable).
• Need to add more filters
• Add tests