[Vuejs]-Can you use functions from an imported JavaScript library such as Change Case directly in a Vue component's template?

by

3👍

✅

As long as you register the imported function as a method you should be able to use it directly in the template.
According to the code, you use Options API, so something like this should do the trick:

import {capitalCase} from "change-case";
...
methods: {
    capitalCase,
    myOtherMethod () => {...}
}
...

And in the <template>:

<input
    type="checkbox"
    :id="`select-${location.name}`"
    :value="capitalCase(location.name)"
    v-model="locationsInput"
/>
👤Zarko

2👍

The functions need to be defined and passed to the template, that is why even console.log won’t work from a template.

You already have an answer with an example, but here’s another thing you could do that might make things easier.

You can create a helper like this:

template-helpers.js

export function capitalCase(str) {
  return str.split(" ").map(wrd => wrd[0].toUpperCase() + wrd.slice(1)).join(" ")
}

export default {
  capitalCase
}

this would make it so that you could use it in a composition/setup like this

import templateHelpers from "../utils/template-helpers.js";
setup(){
  return{
    ...templateHelpers
  }
}

in an options API component you could just include it like this

import templateHelpers from "../utils/template-helpers.js";
// ...
  methods: {
    ...templateHelpers,
    // other methods
  }
// ...

Example

by exporting functions in export default you can destructure them by using methods: { ...templateHelpers

the downside is that it would all the methods every time, but it would make for a more convenient solution. Alternatively, you can pick and chose, since the functions are also exported

import {capitalCase} from "../utils/template-helpers.js";
// ...
  methods: {
    capitalCase,
    // other methods
  }
// ...

Vue does have a way to add global definitions, but it’s discouraged. This would be done by assigning it to config.globalProperties
https://vuejs.org/api/application.html#app-config-globalproperties

app.config.globalProperties.capitalCase = (str) => {
  return str.split(" ").map(wrd => wrd[0].toUpperCase() + wrd.slice(1)).join(" ")
👤Daniel

Leave a comment