Vue format

A Vue.js plugin provides function to format messages.

Version: 0.3.1 Updated: 06/12/2016

By: Haixing-Hu License: MIT

Downloads Last 30 Days: 184


npm i vue-format
yarn add vue-format






Build Status Coverage Status bitHound Score Dependency Status devDependency Status

A Vue.js plugin provides a function for formatting messages.




$ npm install vue-format


$ bower install vue-format


var Vue = require('vue')
var format = require('vue-format')

// set plugin

// create instance
new Vue({
  el: '#test-format',
  data: {
    template: "Hello {0}, {1}! {0}, and {{0}}"    // list formatting template
  methods: {
    foo: function(arg1, arg2) {
      return this.$format(template2, arg1, arg2);

Template the following:

<div id="test-format" class="message">
  <p>{{ foo("world", 123) }}</p>
  <p>{{ $format(template, "world", 456) }}</p>
  <p>{{ template | format "world" 789 }}</p>

Output the following:

<div id="test-format" class="message">
  <p>Hello world, 123! world, and {0}</p>
  <p>Hello world, 456! world, and {0}</p>
  <p>Hello world, 789! world, and {0}</p>

Note that the double brackets, e.g., {{0}}, will escape the brackets.


$format(message, arg1, arg2, ...)

This is a Vue instance method used to format the messages with arguments.

  • message: the message template, which is a string contains zero or more placeholders, e.g., "{0}", "{1}", ...
  • arg1, arg2, ...: zero or more arguments used to replace the corresponding placeholders in the message template.
  • return: the formatted message.
  • If there is no formatting arguments provided, the function simply returns the message without any changes.
  • If there is any argument which is null or undefined, or if there is no enough argument provided, the function will treat those arguments as empty strings.
  • If there is no message nor arguments, the function returns an empty string.
  • In order to escape a brackets, use double brackets; e.g., {{0}} will be treated as a string {0} with escaped brackets.


This is a customized Vue filter used to format messages.

  • Usage example: {{ message | format arg1 arg2 }}
  • The effect of this filter is the same as the effect of the $format() function.


  • Fork it !
  • Create your top branch from dev: git branch my-new-topic origin/dev
  • Commit your changes: git commit -am 'Add some topic'
  • Push to the branch: git push origin my-new-topic
  • Submit a pull request to dev branch of Haixing-Hu/vue-format repository !

Building and Testing

First you should install all depended NPM packages. The NPM packages are used for building and testing this package.

$ npm install

Then install all depended bower packages. The bower packages are depended by this packages.

$ bower install

Now you can build the project.

$ gulp build

The following command will test the project.

$ gulp test

The following command will perform the test and generate a coverage report.

$ gulp test:coverage

The following command will perform the test, generate a coverage report, and upload the coverage report to

$ gulp test:coveralls

You can also run bower install and gulp build together with the following command:

npm build

Or run bower install and gulp test:coveralls together with the following command:

npm test


The MIT License

Categories: Vue js