vue-case

A collection of Vue.js case filters

Usage no npm install needed!

<script type="module">
  import vueCase from 'https://cdn.skypack.dev/vue-case';
</script>

README

vue-case Build Status

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 jsDelivr Hits

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-case"></script>

NPM 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

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