Vue: How to use helper functions for imported modules in vuejs .vue template?

[rlightner]

I have a helper.js file with contains:

module.exports = {
    getSrmColor: (color) => {
        return color;
    }
}

My .vue file has:

<template>
<div>
{{ recipeHelper.getSrmColor(recipe.color) }}
</div>
</template>
<script>
import recipeHelper from "./helpers.js";
export default {
        name: "Recipe",
        props: ["recipe"]
    }
</script>

I get the following error:

Property or method "recipeHelper" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[yyx990803]

Please make sure to read the Issue Reporting Guidelines before opening new issues. The issue list only accepts bug reports and feature requests. Questions should be posted to the Gitter chat room, forum or StackOverflow. Thanks.