Vue-format NPM

vue-format

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

Requirements

Vue.js ^0.12.0

Instllation

npm

$ npm install vue-format

bower

$ bower install vue-format

Usage

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

// set plugin
Vue.use(format)

// 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>
</div>

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>
</div>

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

API

`$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.