idimetrix/vue-case

A collection of Vue.js case filters: `camelCase`, `PascalCase`, `Capital Case`, `Header-Case`, `Title Case`, `path/case`, `snake_case`, `param-case`, `dot.case`, `CONSTANT_CASE`, `lower case`, `lOWER CASE FIRST`, `UPPER CASE`, `Upper case first` and other

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:

  {{ msg | camelCase }} // 'I LOVE vue-case' => 'iLoveVueCase'

pascalCase

• Example:

  {{ msg | pascalCase }} // 'I LOVE vue-case' => 'ILoveVueCase'

capitalCase

• Example:

  {{ msg | capitalCase }} // 'I LOVE vue-case' => '	I Love Vue Case'

headerCase

• Example:

  {{ msg | headerCase }} // 'I LOVE vue-case' => 'I-Love-Vue-Case'

titleCase

• Example:

  {{ msg | titleCase }} // 'I LOVE vue-case' => 'I LOVE Vue-Case'

pathCase

• Example:

  {{ msg | pathCase }} // 'I LOVE vue-case' => 'i/love/vue/case'

paramCase

• Example:

  {{ msg | paramCase }} // 'I LOVE vue-case' => 'i-love-vue-case'

dotCase

• Example:

  {{ msg | dotCase }} // 'I LOVE vue-case' => 'i.love.vue.case'

snakeCase

• Example:

  {{ msg | snakeCase }} // 'I LOVE vue-case' => 'i_love_vue_case'

constantCase

• Example:

  {{ msg | constantCase }} // 'I LOVE vue-case' => 'I_LOVE_VUE_CASE'

lowerCase

• Example:

  {{ msg | lowerCase }} // 'I LOVE vue-case' => 'i love vue-case'

lowerCaseFirst

• Example:

  {{ msg | lowerCaseFirst }} // 'I LOVE vue-case' => 'i LOVE vue-case'

upperCase

• Example:

  {{ msg | upperCase }} // 'I LOVE vue-case' => 'I LOVE VUE-CASE'

upperCaseFirst

• Example:

  {{ msg | upperCaseFirst }} // 'I LOVE vue-case' => 'I LOVE vue-case'

swapCase

• Example:

  {{ msg | swapCase }} // 'I LOVE vue-case' => 'i love VUE-CASE'

sentenceCase

• Example:

  {{ msg | sentenceCase }} // 'I LOVE vue-case' => 'I love vue case'

noCase

• Example:

  {{ msg | noCase }} // 'I LOVE vue-case' => 'i love vue case'

isLowerCase

• Example:

  {{ msg | isLowerCase }} // 'I LOVE vue-case' => 'false'

isUpperCase

• Example:

  {{ msg | isUpperCase }} // 'I LOVE vue-case' => 'false'

truncate

• Example:

  {{ msg | truncate(10) }} // '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.

License

MIT