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

Question

I understand how to import and use Change Case within the <script></script> element of a Vue component, which is just the standard Javascript import covered in the Change Case Github page. However, I would like to use the Change Case functions directly in the template if possible.

Currently, it is my understanding that for dynamic content in the template, in this case generated by v-for running through an array, I must render the return value of a intermediary method from the component's methods section which applies the Change Case function. A method is required for each case type (e.g. camelCase, snakeCase, etc.) I want to render, in this instance one (capitalCase). For example:

      // ...

      <div
        v-for="location in locations"
        :key="location.name"
      >
        <input
          type="checkbox"
          :id="`select-${location.name}`"
          :value="capitalCaseLocationName(location.name)"
          v-model="locationsInput"
        />
        <label :for="`select-${location.name}`">
          {{ capitalCaseLocationName(location.name) }} 
        </label>
      </div>
      
      // ...

      methods: {
        capitalCaseLocationName(name) {
          return capitalCase(name)
        }
      },
      
      // ...

It would be preferable to somehow import Change Case into the template logic so I could write it like this (no intermediary methods needed):

      // ...

      <div
        v-for="location in locations"
        :key="location.name"
      >
        <input
          type="checkbox"
          :id="`select-${location.name}`"
          :value="capitalCase(location.name)"
          v-model="locationsInput"
        />
        <label :for="`select-${location.name}`">
          {{ capitalCase(location.name) }} 
        </label>
      </div>
      
      // ...

Any chance of that being possible?

Possible duplicate of https://stackoverflow.com/questions/65184107/how-to-use-vue-prototype-or-global-variable-in-vue-3 — Estus Flask, Sep 26 '22 at 20:43
Use app.config.globalProperties . It needs to be used with caution but is acceptable for global template helpers — Estus Flask, Sep 26 '22 at 20:44

Zarko · Accepted Answer · 2022-09-26T20:25:39.727

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"
/>

edited Sep 26 '22 at 20:25

answered Sep 26 '22 at 20:19

Zarko

314
2
7

1

+1. The registration of the imported function as a method is necessary, as in the [Vue docs on templates](https://vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions): "It is possible to call a **component-exposed** method inside a binding expression." – Jeff Bowman Sep 26 '22 at 20:21

score 2 · Answer 2 · answered Sep 26 '22 at 20:49

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(" ")

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

2 Answers2