vue-case 
A collection of Vue.js case filters
Installation
Direct include
Simply include vue-case after Vue and it will install itself automatically:
<script src="vue.js"></script>
<script src="vue-case.min.js"></script>
CDN 
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-case"></script>
NPM 
npm install vue-case
When used with a module system, you must explicitly install the filters via Vue.use():
import Vue from 'vue'
import VueCase from 'vue-case'
Vue.use(VueCase)
You don’t need to do this when using global script tags.
Nuxt.js
npm install vue-case
When create file plugins/vue-case.js:
import Vue from 'vue'
import VueCase from 'vue-case'
Vue.use(VueCase)
Then, add the file inside the plugins key of nuxt.config.js:
module.exports = {
//...
plugins: [
'~/plugins/vue-case'
],
//...
}
Available Filters
- camelCase
- pascalCase
- capitalCase
- headerCase
- titleCase
- pathCase
- paramCase
- dotCase
- snakeCase
- constantCase
- lowerCase
- lowerCaseFirst
- upperCase
- upperCaseFirst
- swapCase
- sentenceCase
- noCase
- isLowerCase
- isUpperCase
- truncate
Usage
camelCase
-
Example:
// 'I LOVE vue-case' => 'iLoveVueCase'
pascalCase
-
Example:
// 'I LOVE vue-case' => 'ILoveVueCase'
capitalCase
-
Example:
// 'I LOVE vue-case' => ' I Love Vue Case'
headerCase
-
Example:
// 'I LOVE vue-case' => 'I-Love-Vue-Case'
titleCase
-
Example:
// 'I LOVE vue-case' => 'I LOVE Vue-Case'
pathCase
-
Example:
// 'I LOVE vue-case' => 'i/love/vue/case'
paramCase
-
Example:
// 'I LOVE vue-case' => 'i-love-vue-case'
dotCase
-
Example:
// 'I LOVE vue-case' => 'i.love.vue.case'
snakeCase
-
Example:
// 'I LOVE vue-case' => 'i_love_vue_case'
constantCase
-
Example:
// 'I LOVE vue-case' => 'I_LOVE_VUE_CASE'
lowerCase
-
Example:
// 'I LOVE vue-case' => 'i love vue-case'
lowerCaseFirst
-
Example:
// 'I LOVE vue-case' => 'i LOVE vue-case'
upperCase
-
Example:
// 'I LOVE vue-case' => 'I LOVE VUE-CASE'
upperCaseFirst
-
Example:
// 'I LOVE vue-case' => 'I LOVE vue-case'
swapCase
-
Example:
// 'I LOVE vue-case' => 'i love VUE-CASE'
sentenceCase
-
Example:
// 'I LOVE vue-case' => 'I love vue case'
noCase
-
Example:
// 'I LOVE vue-case' => 'i love vue case'
isLowerCase
-
Example:
// 'I LOVE vue-case' => 'false'
isUpperCase
-
Example:
// 'I LOVE vue-case' => 'false'
truncate
-
Example:
// 'I LOVE vue-case' => 'I LOVE vue...'
Programmatic Usage
Aside from using filters inside templates you can do this programmatically using default filters object:
this.$options.filters.filterName(value)
For example, here’s how you can use the truncate filter:
this.$options.filters.truncate('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 17) // => Lorem ipsum dolor...
Contribution
If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.