Composables in Templates

[braitsch]

Hi, how do you use a composable function within a template? For example, I have a toTitleCase composable that I want to use to transform a string that's dynamically rendered within a template. The following errors out TypeError: _ctx.toTitleCase is not a function. Here's my setup:

/composables/utils.js

export function toTitleCase(str) {
	return str.replace(
		/\w\S*/g,
		function (txt) {
			return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
		}
	);
}

and within my Vue file:

<template lang="pug">
#options
    .option(v-for="(option, index) in myOptionsArray" :data-url="option.text" @click="onOptionSelected(option)")
        img(:src="option.avatar")
        .text {{ toTitleCase(option.text) }} <---- this throws an error
</template>

<script>
import { toTitleCase } from "@/composables/utils"

export default {
    setup(){
        console.log(toTitleCase('hello')); <---- this works fine
    },
}
</script>

In Vue2 I could use a mixin to accomplish this and that would be available within the template but composables aren't? Thanks in advance.

[mika76]

I would guess you need to return the function from your setup function also for the template to see it...

so basically

setup() {
   return { toTitleCase }
}

[braitsch]

That worked! I'm still new to Vue3 and appreciate the help!

[mika76]

Don't worry I'm pretty sure we've all been caught out by this one a couple of times 😉