Vue String Filters

Vue string filters library can change template value dynamically. All languages are supported.

Contents

1. Compatibility
2. Installation
   1. NPM
3. Usage
   1. Global methods
   2. Computed properties
4. Filters
   1. Camel case
   2. Capitalize
   3. Flat case
   4. Kebab case
   5. Lower case
   6. Pad
   7. Pascal case
   8. Repeat
   9. Replace
   10. Snake case
   11. Title case
   12. Train case
   13. Truncate
   14. Upper case
5. Author
6. License

Compatibility

Library | Version ------- | ------- Vue | >= 3.5

Installation

NPM

npm install vue-string-filters

Usage

Global methods

Add the following code to the main.js file created with the Vue CLI if you want to use the filter methods globally:

import { createApp } from 'vue'
import { VueStringFilters } from 'vue-string-filters'
import App from './App.vue'

createApp(App).use(VueStringFilters).mount('#app')

Examples of usage global property $filters methods in your App.vue:

import { ref } from 'vue'

const camelRef = ref('camel case')

<template>
  <div>Result: {{ $filters.camelCase(camelRef) }}</div>
</template>

Computed properties

Recommended way. Using computed properties you don't need to register a VueStringFilters plugin in your main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Use a specific filter to import it into a specific component:

import { computed, ref } from 'vue'
import { camelCase } from 'string-filters'

const camelRef = ref('camel case')
const camelComputed = computed(_ => camelCase(camelRef.value))

<template>
  <div>Result: {{ camelComputed }}</div>
</template>

Filters

Complete list of presented filters to use in your app.

Camel case

Example usage with global $filters methods:

<template>
  <!-- Output: camelCase -->
  <div>{{ $filters.camelCase('camel 123 case') }}</div>

  <!-- Output: camel123Case -->
  <div>{{ $filters.camelCase('camel 123 case', { numbers: true }) }}</div>

  <!-- Output: camelCase -->
  <div>{{ $filters.camelCase('cameL 123 casE', { lower: true }) }}</div>

  <!-- Output: camel123Case -->
  <div>{{ $filters.camelCase('cameL 123 casE', { numbers: true, lower: true }) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { camelCase } from 'string-filters'

const camelRef = ref('camel case')
const camelComputed = computed(_ => camelCase(camelRef.value))

<template>
  <!-- Output: camelCase -->
  <div>Result: {{ camelComputed }}</div>
</template>

Capitalize

Example usage with global $filters methods:

<template>
  <!-- Output: Capitalize -->
  <div>{{ $filters.capitalize('capitalize') }}</div>

  <!-- Output: Capitalize -->
  <div>{{ $filters.capitalize('cApitalizE', { lower: true }) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { capitalize } from 'string-filters'

const capitalizeRef = ref('capitalize')
const capitalizeComputed = computed(_ => capitalize(capitalizeRef.value))

<template>
  <!-- Output: Capitalize -->
  <div>Result: {{ capitalizeComputed }}</div>
</template>

Flat case

Example usage with global $filters methods:

<template>
   <!-- Output: flatcase -->
  <div>{{ $filters.flatCase('Flat 123 Case') }}</div>

  <!-- Output: flat123case -->
  <div>{{ $filters.flatCase('Flat 123 Case', true) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { flatCase } from 'string-filters'

const flatRef = ref('Flat 123 Case')
const flatComputed = computed(_ => flatCase(flatRef.value))

<template>
  <!-- Output: flatcase -->
  <div>Result: {{ flatComputed }}</div>
</template>

Kebab case

Example usage with global $filters methods:

<template>
  <!-- Output: kebab-case -->
  <div>{{ $filters.kebabCase('Kebab 123 Case') }}</div>

  <!-- Output: kebab-123-case -->
  <div>{{ $filters.kebabCase('Kebab 123 Case', true) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { kebabCase } from 'string-filters'

const kebabRef = ref('Kebab 123 Case')
const kebabComputed = computed(_ => kebabCase(kebabRef.value))

<template>
  <!-- Output: kebab-case -->
  <div>{{ kebabComputed }}</div>
</template>

Lower case

Example usage with default javascript method:

<template>
  <!-- Output: lowercase -->
  <div>{{ 'LOWERCASE'.toLowerCase() }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'

const lowerRef = ref('LOWERCASE')
const lowerComputed = computed(_ => lowerRef.value.toLowerCase())

<template>
  <!-- Output: lowercase -->
  <div>{{ lowerComputed }}</div>
</template>

Pad

Example usage with global $filters methods:

<template>
  <!-- Output: ___pad____ -->
  <div>{{ $filters.pad('pad', 10, '_') }}</div>

  <!-- Output: _______pad -->
  <div>{{ 'pad'.padStart(10, '_') }}</div>

  <!-- Output: pad_______ -->
  <div>{{ 'pad'.padStart(10, '_') }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { pad } from 'string-filters'

const padRef = ref('pad')
const padComputed = computed(_ => pad(padRef.value, 10, '_'))

<template>
  <!-- Output: ___pad____ -->
  <div>{{ padComputed }}</div>
</template>

Pascal case

Example usage with global $filters methods:

<template>
  <!-- Output: PascalCase -->
  <div>{{ $filters.pascalCase('pascal 123 case') }}</div>

  <!-- Output: Pascal123Case -->
  <div>{{ $filters.pascalCase('pascal 123 case', { numbers: true }) }}</div>

  <!-- Output: PascalCase -->
  <div>{{ $filters.pascalCase('pascaL 123 casE', { lower: true }) }}</div>

  <!-- Output: Pascal123Case -->
  <div>{{ $filters.pascalCase('pascaL 123 casE', { numbers: true, lower: true }) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { pascalCase } from 'string-filters'

const pascalRef = ref('pascal 123 case')
const pascalComputed = computed(_ => pascalCase(pascalRef.value))

<template>
  <!-- Output: PascalCase -->
  <div>{{ pascalComputed }}</div>
</template>

Repeat

Example usage with default javascript method:

<template>
  <!-- Output: repeat----- -->
  <div>repeat{{ '-'.repeat(5) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'

const repeatRef = ref('repeat')
const repeatComputed = computed(_ => repeatRef.value + '-'.repeat(5))

<template>
  <!-- Output: repeat----- -->
  <div>{{ repeatComputed }}</div>
</template>

Replace

Example usage with default javascript method:

<template>
  <!-- Output: replace--- -->
  <div>{{ 'replace123'.replace(new RegExp('[0-9]', 'g'), '-') }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'

const replaceRef = ref('replace123')
const replaceComputed = computed(_ => replaceRef.value.replace(new RegExp('[0-9]', 'g'), '-'))

<template>
  <!-- Output: replace--- -->
  <div>{{ replaceComputed }}</div>
</template>

Snake case

Example usage with global $filters methods:

<template>
  <!-- Output: snake_case -->
  <div>{{ $filters.snakeCase('Snake 123 Case') }}</div>

  <!-- Output: snake_123_case -->
  <div>{{ $filters.snakeCase('Snake 123 Case', true) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { snakeCase } from 'string-filters'

const snakeRef = ref('Snake 123 Case')
const snakeComputed = computed(_ => snakeCase(snakeRef.value))

<template>
  <!-- Output: snake_case -->
  <div>{{ snakeComputed }}</div>
</template>

Title case

Example usage with global $filters methods:

<template>
  <!-- Output: Title Case -->
  <div>{{ $filters.titleCase('title 123 case') }}</div>

  <!-- Output: Title 123 Case -->
  <div>{{ $filters.titleCase('title 123 case', { numbers: true }) }}</div>

  <!-- Output: Title Case -->
  <div>{{ $filters.titleCase('titlE 123 casE', { lower: true }) }}</div>

  <!-- Output: Title 123 Case -->
  <div>{{ $filters.titleCase('titlE 123 casE', { numbers: true, lower: true }) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { titleCase } from 'string-filters'

const titleRef = ref('title 123 case')
const titleComputed = computed(_ => titleCase(titleRef.value))

<template>
  <!-- Output: Title Case -->
  <div>{{ titleComputed }}</div>
</template>

Train case

Example usage with global $filters methods:

<template>
  <!-- Output: Train-Case -->
  <div>{{ $filters.trainCase('train 123 case') }}</div>

  <!-- Output: Train-123-Case -->
  <div>{{ $filters.trainCase('train 123 case', { numbers: true }) }}</div>

  <!-- Output: Train-Case -->
  <div>{{ $filters.trainCase('traiN 123 casE', { lower: true }) }}</div>

  <!-- Output: Train-123-Case -->
  <div>{{ $filters.trainCase('traiN 123 casE', { numbers: true, lower: true }) }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { trainCase } from 'string-filters'

const trainRef = ref('train 123 case')
const trainComputed = computed(_ => trainCase(trainRef.value))

<template>
  <!-- Output: Train-Case -->
  <div>{{ trainComputed }}</div>
</template>

Truncate

Example usage with global $filters methods:

<template>
  <!-- Output: etc... -->
  <div>{{ $filters.truncate('etcetera', 3, '...') }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'
import { truncate } from 'string-filters'

const truncateRef = ref('etcetera')
const truncateComputed = computed(_ => truncate(truncateRef.value, 3, '...'))

<template>
  <!-- Output: etc... -->
  <div>{{ truncateComputed }}</div>
</template>

Upper case

Example usage with default javascript method:

<template>
  <!-- Output: UPPERCASE -->
  <div>{{ 'uppercase'.toUpperCase() }}</div>
</template>

Using computed property:

import { computed, ref } from 'vue'

const upperRef = ref('uppercase')
const upperComputed = computed(_ => upperRef.value.toUpperCase())

<template>
  <!-- Output: UPPERCASE -->
  <div>{{ upperComputed }}</div>
</template>

Author

• Twitter
• Medium

License

This project is licensed under the MIT License - see the LICENSE file for details.