Skip to content

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

Notifications You must be signed in to change notification settings

idimetrix/vue-case

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published