Vue Filters and Directives Collection


A collection of standard and custom VueJs filters and directives.

It’s MORPHLING time! *plays power ranger theme song. pun intented 😂






npm install vue-morphling --save


yarn add vue-morphling



import Vue from 'vue';
import { VueMorphling } from 'vue-morphling';

// Use all filters and directives.


import Vue from 'vue';
import { morphDate, vMorphHighlight, morphLowerCase } from 'vue-morphling';

// Import only what you need.


<script src=""></script>
<script src=""></script>

  Vue.use(VueMorphling.VueMorphling); // Use all
  // Or
  Vue.use(VueMorphling.morphDate); // Use morh-date filter only;
  Vue.use(VueMorphling.vMorphHighlight); // Use v-morh-highlight directive only;
  // Vue stuff here

All filters are available in the Vue instance as well, so they can be use as vm.$morphCapitalize or this.$morphCapitalize if you are using single file component.

All directive name should be prepended with v-, v-morph-url like so.

Morphling Filters


import { morphAge } from 'vue-morphling';

<p>{{ new Date(1976,2,20) | morph-age }}</p>
<!-- 42 -->
const birthday = new Date(1976,2,20);
const age = this.$morphAge(birthday);
console.log(age); // 42 (if is still 2018)


import { morphCapitalize } from 'vue-morphling';

<p>{{ 'numb' | morph-capitalize }}</p>
<!-- Numb -->
const msg = this.$morphCapitalize('numb');
console.log(msg); // Numb


import { morphChop } from 'vue-morphling';

This filter chops off a n length of character in a give string using the length option.


morph-chop(length, location)

<p>{{ 'Papercut' | morph-chop(2) }}</p>
<!-- Paperc -->

<p>{{ 'Papercut' | morph-chop(3, 'end') }}</p>
<!-- Paper -->

<p>{{ 'Papercut' | morph-chop(2, 'start') }}</p>
<!-- percut -->

<p>{{ 'Papercut' | morph-chop(3, 'start') }}</p>
<!-- ercut -->
const msg1 = this.$morphChop('Papercut', 2);
const msg2 = this.$morphChop('Papercut', 3, 'end');
const msg3 = this.$morphChop('Papercut', 2, 'start');
const msg4 = this.$morphChop('Papercut', 2, 'start');

console.log(msg1); // Paperc
console.log(msg2); // Paper
console.log(msg3); // percut
console.log(msg4); // ercut


option value default required description
length any number N/A YES Indicates the length of the string to be chopped off.
location 'start', 'end' 'end' NO If NOT specified, morph-chop will chop off the string from the end.


import { morphCurrency } from 'vue-morphling';

Prepend a currency symbol to a value.



<p>{{ 100 | morph-currency('PHP')}}</p>
<!-- ₱100  -->
const msg = this.$morphCurrency(100, 'PHP');
console.log(msg); // ₱100


option description
code Currency code of a country e.g. ‘PHP’, ‘USD’, ‘AUD’, ‘GBP’. Default is $ if not provided.

See currencies.js from lib folder.


morph-date has been removed see morph-date-format for the updated date formatting method. I removed this to give way to future morph-date-[foo] methods such as e.g. morph-date-diff-minutes.


import { morphDateFormat } from 'vue-morphling';

Format any valid date using date-fns’ format() function.



Note - morph-date-format is now using using date-fns@v1.30.1.

<p>{{ new Date() | morph-date-format('MMM DD, YYYY') }}</p>
<!-- Jul 26, 2017 -->

<p>{{ new Date() | morph-date-format('YYYY') }}</p>
<!-- 2017 -->

<p>{{ new Date() | morph-date-format('[Today is a] dddd') }}</p>
<!-- Today is Wednesday -->
const date = new Date('1976-03-20');

const formatted = this.$morphDateFormat(date, 'MMM DD, YYYY');
const year = this.$morphDateFormat(date, 'YYYY');
const time = this.$morphDateFormat(new Date(), 'hh:mm A');

console.log(formatted); // Mar 20, 1976
console.log(year); // 1976
console.log(time); // 11:00 PM


All formats are available of course in the date-fns format documentation, but here are some common examples.


import { morphFileSize } from 'vue-morphling';

Converts any number (as bytes) to it’s equivalent, KB, MB, GB, TB, PB, EB, ZB and YB.


For setting decimal places use { base: number }. More options here.

<code>{{ 1024 | morph-file-size({ base: 0 }) }}</code>
<!-- 1 KB -->

<p>{{ 10000000000 | morph-file-size }}</p>
<!-- 9.30 GB -->
const date = new Date('1976-03-20');

const a = this.$morphFileSize(1024);
const b = this.$morphFileSize(10000000000);

console.log(a); // 1.0 Kb
console.log(b); // 9.3 Gb


import { morphJson } from 'vue-morphling';

Pretty print JSON objects inside the <pre> tag.



<!-- const obj = {"favoriteBand":"Linkin Park"} -->
<pre>{{ obj | morph-json(2) }}</pre>
  "favoriteBand": "Linkin Park"
<pre>{{ obj | morph-json('\t') }}</pre>
    "favoriteBand": "Linkin Park"
const msg = this.$morphJson({"favoriteBand":"Linkin Park", 4})
// {
//    "favoriteBand": "Linkin Park"
// }


option value default required description
indent any number or “\t” N/A Not really The value indicates the number of indent using spaces. If “\t” is used, the json will be indented using tab.


import { morphLowerCase } from 'vue-morphling';

<p>{{ "LOST IN THE ECHO" | morph-lowercase}}</p>
<!-- lost in the echo  -->
const msg = this.$morphLowercase('LOST IN THE ECHO');
console.log(msg); // lost in the echo


import { morphObjectSize } from 'vue-morphling';

Gets the bytes size (number) of any javascript object and converts it to it’s equivalent KB, MB, GB, TB, PB, EB, ZB and YB.


For setting decimal places use { base: number }. More options here.

<code>{{ obj1 | morph-object-size({ base: 0 }) }}</code>
<!-- 18 B -->

<p>{{ `Forget the wrong the i've done.` | morph-object-size({ base: 2 }) }}</p>
<!-- 33.00 B -->
const obj1 = {name:'Chester'};
const obj2 = `Forget the wrong the i've done.`;

const a = this.$morphObjectSize(obj1);
const b = this.$morphObjectSize(obj2);

console.log(a); // 18.0 b
console.log(b); // 33.0 b


import { morphPlaceholder } from 'vue-morphling';

Replaces the value with a give placeholder.



this.$morphPlaceholder(value, placeholder)

<p>{{ "Battle Symphony" | morph-placeholder('New Divide') }}</p>
<!-- New Divide  -->
const msg = this.$morphPlaceholder('Battle Symphony', 'New Divide');
console.log(msg); // New Divide


import { morphReplace } from 'vue-morphling';

Replaces character/s on a string with a given ‘replacer’ string. Accepts RegEx for better matching.


morph-replace(replacee|regex, replacer)

this.$morphReplace(value, replacee|regex, replacer)

<!-- Plain String -->
<p>{{ `I've given uuuuuup!!` | morph-replace('given', 'new word') }}</p>
<!-- I've new word uuuuuup!!  -->

<!-- With Regex -->
<p>{{ `I've given uuuuuup!!` | morph-replace(/i've/i, 'I have') | morph-replace(/uuuuuup!!/i, 'up.') }}</p>
<!-- I have given up.  -->
// replaced the word 'end' with 'start'.
const msg = this.$morphReplace('In the end', /end/i, 'start.');
console.log(msg); // In the start.


import { morphReverse } from 'vue-morphling';

<p>{{ 'Shadow of the day' | morph-reverse}}</p>
<!-- yad eht fo wodahS  -->
const msg = this.$morphReverse('Shadow of the day');
console.log(msg); // yad eht fo wodahS


import { morphSandwich } from 'vue-morphling';

Prepend and append data around a given value.

If only a single argument is given, it is used to surround the sandwiched content by matching open brackets for closed brackets, and so on.


morph-sandwich(start, end)

<p>{{ 'the' | morph-sandwich('In ', ' end!') }}</p>
<!-- In the end!  -->

<p>{{{ 'Numb' | morph-sandwich('<<< ') }}}</p>
<!-- <<< Numb >>> -->
const msg1 = this.$morphSandwich('the', 'In ', ' end!');
console.log(msg1); // In the end!

const msg2 = this.$morphSandwich('Numb', '<<< ');
console.log(msg2); // <<< Numb >>>


import { morphTruncate } from 'vue-morphling';

<p>{{ 'Leave out all the rest' | morph-truncate(11) }}</p>
<!-- Leave out a...  -->
const msg = this.$morphTruncate('Leave out all the rest', 11);
console.log(msg); // Leave out a...


import { morphUpperCase } from 'vue-morphling';

<p>{{ "somewhere i belong" | morph-uppercase}}</p>
const msg = this.$morphUppercase('somewhere i belong');
console.log(msg); // SOMEWHERE I BELONG

Morphling Directives


import { vMorphUrl } from 'vue-morphling';

morph-url is currently on experimental stage. The current version has some limitations:

  1. When a link/url appears twice in the string it will mess up the tags.

morph-url directive converts every link in a given element to an <a> tag.


v-morph-url, prepend v- to any directive name.

Before morphling

  My favorite websites are and

After morphling

<p v-morph-url>
  My favorite websites are <a href="" target="_blank"></a> and <a href="" target="_blank"></a>


import { vMorphHighlight } from 'vue-morphling';

This directive will highlight the any matching string with a color of your choice! Yep, just like a highlighter pen.


v-morph-highlight, prepend v- to any directive name.

Pass the params as string, like, 'cats::#7fad33' use :: as separator for the string to be highlighted and color. Syntax 'string::color' where string is any string and color is any color, hex color, rgb and rgba.

Before morphling

  Cats are the best dogs! I love cats!

After morphling

<p v-morph-highlight="'cats::#7fad33'">
  Cats are the best dogs! I love cats!

Screen Shot


1.0.0 and up - Dec. 20, 2019 PHT

  • morph-date replaced with morph-date-format.
  • Test scripts are now inside it’s respective filter folder.
  • Update build strategy
    • From webpack to rollup
    • Update all babel related dependencies
    • Update date-fns to v1.30.1

0.8.0-alpha.1 - May 17, 2018 PHT

  • Updated the way filters are imported for tree shaking purposes. See usage.

0.7.4 - May 15, 2018 PHT

0.7.x - March 7, 2018 PHT

  • I’m sorry for the trouble. But I had to depricate morphling and rename it to vue-morphling because I am working on a different version of this library. The new mophling.js is pure javascript version of this plugin which you can use in both nodejs or vanilla. See updates here

0.6.0 - Feb 21, 2018 PHT

  • Replaced moment with date-fns. I replaced moment with date-fns because these reasons. There are no breaking changes in terms of using morph-date.

0.5.0 - Oct 26, 2017 PHT

Sept 26, 2017 PHT

  • Replaced webpack with plain babel
  • Changed indetion from 4 spaces to 2 spaces.
  • Fixed export error.
  • Fixed moment import bug.

July 29, 2017 PHT

  • Added v-morph-url directive.
  • morphs folder remaned to filters.

July 28, 2017 PHT


ERROR in build.js from UglifyJs

There is a known error when building a vue cli x webpack project that is using morphling.

ERROR in build.js from UglifyJs

Unexpected token: punc (() […/morphling/index.js:5,4][build.js:15630,10]


  1. Add es2015 and stage-2 presets to the .babelrc
  2. Include morphling to the babel-loader in build/webpack.base.conf.js


module: {
  rules: [
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test'), resolve('node_modules/morphling')]

Helpful links :

“When my time comes, Forget the wrong that I’ve done, Help me leave behind some, Reasons to be missed, Don’t resent me, And when you’re feeling empty, Keep me in your memory, Leave out all the rest…”

In Memory of Chester Bennington (1976-2017)

I used Linkin Park songs as example strings to pay tribute to the death of Chester Bennington. One of my inspirations in music. Depression is very real, we may not fully understand it but it is very, very real. Talk to your love ones, and cherish every moment with them. Happy coding.

Download Details:

Author: jofftiquez


Source Code:

#vue #vuejs #javascript

What is GEEK

Buddha Community

Vue Filters and Directives Collection
Luna  Mosciski

Luna Mosciski


8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Joseph  Murray

Joseph Murray


Collection vs Collections in Java: Difference Between Collection & Collections in Java


This article will be looking into one of the most popular questions in Java Language – What is Collection in Java? Also, what do you mean by Collections in Java? Are Collection and Collections the same or different in Java?

What is Collection?

What is Collections?


#full stack development #collection #collection vs collections in java #collections in java #difference between collection and collections in java

Alfie Kemp

Alfie Kemp


Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

The 10 Vue markdown components below will give you a clear view.

1. Vue Showdown

Use showdown as a Vue component.

Vue Showdown

View Demo

Download Source

2. showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.


View Demo

Download Source

3. markdown-it-vue

The vue lib for markdown-it.


View Demo

Download Source

4. perfect-markdown

perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What’s more, perfect-markdown also extends some features based on mavonEditor.


View Demo

Download Source

5. v-markdown-editor

Vue.js Markdown Editor component.

This is image title

View Demo

Download Source

6. markdown-to-vue-loader

Markdown to Vue component loader for Webpack.


View Demo

Download Source

7. fo-markdown-note Component for Vue.js

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

fo-markdown-note Component for Vue.js

View Demo

Download Source

8. Vue-SimpleMDE

Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0


View Demo

Download Source

9. mavonEditor

A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.


View Demo

Download Source

10. vue-markdown

A Powerful and Highspeed Markdown Parser for Vue.


View Demo

Download Source

Thank for read!

#vue-markdown #vue-js #vue-markdown-component #vue

Ethan Hughes

Ethan Hughes


Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

1. Maska

  • No dependencies
  • Small size (~2 Kb gziped)
  • Ability to define custom tokens
  • Supports repeat symbols and dynamic masks
  • Works on any input (custom or native)




2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.




3. vue-tel-input

International Telephone Input with Vue.




4. Restricted Input

Allow restricted character sets in input elements.


  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Restricted Input



5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Vue Currency Input



6. vue-fields

Input components for vue.js.




7. vue-material-input

Simple example of issue I am seeing with input labels.




8. vue-tribute

A Vue.js wrapper for Zurb’s Tribute library for native @mentions.




9. vue-number-smarty

Number input with rich functionality for Vue.js.


  • integer/float
  • signed/unsigned
  • step size
  • increment/decrement value by scrolling when focused
  • align variants
  • min and max boundaries
  • max length of integer part (only for float type)
  • max length of float part (only for float type)
  • max length of string
  • error state
  • readonly state
  • theme options




10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Vue input mask



11. vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/




12. Vue IP

An ip address input with port and material design support.

Vue IP



13. v-money Mask for Vue.js

Tiny input/directive mask for currency


  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

v-money Mask for Vue.js



14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Vue Masked Input



15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue’s transition-group

VueJS input component


I hope you like them!

#vue-js #vue-input #vue-input-component #input-vue

Teresa  Bosco

Teresa Bosco


Vue File Upload Using vue-dropzone Tutorial

In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is  highly customizable. The  vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.

Vue File Upload Using vue-dropzone

First, install the Vue using Vue CLI.

#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli