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


#1

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.

#2

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,
  },
};

#3

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


#4

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


#5

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!


Approaches to provide general services to components
#6

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>


#7

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);

#8

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


#9

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);

#11

Worked for me thanks


#12

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