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

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.

The template context is the component instance - it doesn’t share the scope of your script tag. Anything you want to access in the template needs to be available as a property of the component instance. For example, to expose getSrmColor() method to the template you could do:

import recipeHelper from './helpers.js';

export default {
  methods: {
    getSrmColor: recipeHelper.getSrmColor,
  },
};
5 Likes

What if I wanted to reuse this around different .vue files? Is there a better way than copy pasta?

Take a look at mixins that might be what you want.

So I ended up going this route:

helpers.js

export function getSrmColor (color) {
        return color;
}

main.js

import * as recipeHelpers from "./helpers.js";

Object.keys(recipeHelpers).forEach(key => {
  Vue.filter(key, recipeHelpers[key])
})

It works of course in {{ }} tags but not in :style="{ backgroundColor: color | getSrmColor }"

So close!

I wanted to use the shared method just as if it were local to the component and found the simplest solution with mixins thanks to @woodberry. Here is my code:

mixins.js

import accounting from 'accounting-js'

export default {
  methods: {
    formatNumber: function (number, precision = 2) {
      return accounting.formatNumber(number, { precision: precision })
    }
  }
}

[component].vue

<template>
  <p>{{formatNumber(total, 0)}}</p>
</template>

<script>
import mixins from './mixins.js'

export default {
  name: 'Example',
  mixins: [mixins]
}
</script>

3 Likes

It’s also possible to get those helpers functions in all your Vue instances by using a plugin. It’s convenient but probably not a good idea.

So this would be a simple helpers plugin:

import Vue from 'vue';
import helpers from './helpers.js';

const helpers = {
	install (Vue, options) {
		Vue.prototype.$helpers = helpers; // we use $ because it's the Vue convention
	}
};

Vue.use(helpers);

@Pier helpers is defined twice (from import and as const) - are you sure your code would work?

You are right, it wouldn’t work… Sorry.

Since I can’t edit that post here is a correction:

import Vue from 'vue';
import helpers from './helpers.js';

const plugin = {
	install (Vue, options) {
		Vue.prototype.$helpers = helpers; // we use $ because it's the Vue convention
	}
};

Vue.use(plugin);
2 Likes

Worked for me thanks

I guess this should work too:

// helpers.js

export function myHelperFunction(arg) {
  return arg;
}

Then inside SFC

// MyComponent.vue

import { myHelperFunction } from "./helpers.js"

export default {
    methods: {
        myHelperFunction,
    }
};

Now your helper function should be available inside <template> block

5 Likes

Clever - I didn’t know that was possible. Thanks @ozguruysal

Or if you want to import more functions with ease, you can use spread function.

//helpers.js
export default {
  func1() {
  },
  func2() {
  }
}

And in the component itself.

// MyComponent.vue
import helperMethods from './helpers.js'

export default {
methods: {
  ...helperMethods
}

This is especially handy if you use same methods in multiple components.