Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

vue-case

1.0.6 • Public • Published

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

Install

npm i vue-case

DownloadsWeekly Downloads

0

Version

1.0.6

License

MIT

Unpacked Size

234 kB

Total Files

6

Last publish

Collaborators

  • avatar