vue-case

    1.0.7 • 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

    21

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    245 kB

    Total Files

    6

    Last publish

    Collaborators

    • dimetrix