Vue titlecase

A Vue.js plugin providing the function and the filter to titlecase strings.

Version: 0.2.1 Updated: 06/12/2016

By: Haixing-Hu License: MIT

Downloads Last 30 Days: 370


Build Status Coverage Status bitHound Score Dependency Status devDependency Status

A Vue.js plugin provides a filter and a function to titlecase a string.



The algorithm is based on the gamma rule described as follows:

Glossary of Grammatical and Rhetorical Terms: title case (capitalization)



$ npm install vue-titlecase


$ bower install vue-titlecase


var Vue = require('vue')
var Titlecase = require('vue-titlecase')

// set plugin

// create instance
new Vue({
  el: '#test-titlecase',
  data: {
    msg: "hello world! my id is starfish. I LOVE WATCHing tv.",

Template the following:

<div id="test-titlecase" class="message">
  <p>{{ msg | titlecase }}</p>
  <p>{{ msg.toTitleCase() }}</p>

Output the following:

<div id="test-titlecase" class="message">
  <p>Hello World! My ID is Starfish. I Love Watching TV.</p>
  <p>Hello World! My ID is Starfish. I Love Watching TV.</p>



Converts a string instance to the titlecase form. Returns a new string.


This is a customized Vue filter used to converts the string representation of an object to the titlecase form.


  • 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-titlecase 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