VueJS - call function in external JS file directly from Template

Question

Let's say that in a VueJS project, I have a HelloWorld.js file like this:

export default {
addNumbers: function (a,b) {
    return a+b;
    }
}

And it's used from HelloWorld.vue like this:

<template>
  <div>
    <h1>{{addNumbers(1,2)}}</h1>
  </div>
</template>

<script>
import helloWorldJS from './HelloWorld.js'

export default {
  name: 'HelloWorld',
  methods: {
    addNumbers: function(a,b) {
      return helloWorldJS.addNumbers(a,b);
    }
  }
}
</script>

My agony comes from having to 'duplicate' the addNumbers function in the methods section of the HelloWorld component.

Is there a simple way to make the external addNumbers function available from the template section?

Rafael Buzatto de Campos · Accepted Answer · 2020-12-19 08:16:46Z

7

you could export as const you function like:

export const addNumbers = (a,b) => a+b;

then at your vue file you could write as:

import { addNumbers }  from './HelloWorld.js'

export default {
  name: 'HelloWorld',
  methods: {
    addNumbers // this is equal to addNumbers: addNumbers
  }
}

answered Dec 19, 2020 at 8:16

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user13284932 · Accepted Answer · 2020-12-19 08:35:37Z

You can't directly import the method and use it on the template in vue. You can only use functions that are defined in the methods object section. But if you want to make it global you can use plugins like below.

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
   render: (h) => h(App)
}).$mount("#app");

const MyPlugin = {
   install(Vue, options) {
      Vue.prototype.addNumbers = (a, b) => {
        return a + b;
      };
   }
};
Vue.use(MyPlugin);

Then you can directly call the function in the template

<template>
  <div>
    <h1>{{addNumbers(1,2)}}</h1>
  </div>
</template>

<script>
export default {
   name: 'HelloWorld',
   methods: {
   }
}
</script>

Collectives™ on Stack Overflow

VueJS - call function in external JS file directly from Template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related