How to import a external function in a Vue component?

Question

I'm a newbie in javascript and vue.js and I'm facing somme issue when trying to add a new function in an existing programme.

I have put my new function (with others) in a separate file:

export const MyFunctions = {
MyFunction: function(param) {
    // Doing stuff
}
}

Then I import the file in the component file and calling my function :

<script>
    import {MyFunctions} from "@/components/MyFunctions.js";
    export default {
        name:"Miniature",
        computed: {
            useMyFunction() {
                MyFunction("Please do some stuff !");
            }
        }
    }
</script>

When the component is used, I get an error message

[Vue warn]: Property or method "MyFunction" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I've read a lot of documentation and fail to understand why it doesn't work. Can anyone help me with this ??

you're importing `MyFunctions`, but your error message says `changeFavicon` — A. L, Oct 12 '18 at 10:09
update code with MyFunctions.MyFunction("Please do some stuff !"); — Vaibhav Tamuche, Jun 24 '22 at 08:49

score 11 · Accepted Answer · answered Oct 12 '18 at 10:22

You're exporting an object then in order to use the MyFunction you need to access to that function using dot notation, like this: MyFunctions.MyFunction("Please do some stuff !")

I made a working example for this use-case: https://codesandbox.io/s/62l1j19rvw

MyFunctions.js

export const MyFunctions = {
  MyFunction: function(param) {
    alert(param);
  }
};

Component

<template>
  <div class="hello">
   {{msg}}
   <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
import {MyFunctions} from "../MyFunctions.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods:{
    handleClick: function(){
      MyFunctions.MyFunction("Please do some stuff !");
    }
  }
};
</script>

Just stumbled on this answer and whilst it works, I do get some errors I do not know what to do with - -Property or method "handleClick" is not defined on the instance but referenced during render. and -Invalid handler for event "click": got undefined — KJParker, Jan 17 '20 at 13:34

score 5 · Answer 2 · answered Oct 12 '18 at 10:41

You can just import your javascript files into .vue files as long as they are inside <script> tags. Since Vue.js is after all javascript, the first part where you should look at while debugging is if you have some kind of mistake in your syntax. From what I see, there is some confusion with the import and export statements, which could be quite complex at first!

Check MDN's Documentation specially under named exports:

In the module, we could use the following

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = { /* nice big object */ }
export { cube, foo, graph };

This way, in another script, we could have:

import { cube, foo, graph } from 'my-module';
// Use your functions wisely

score 3 · Answer 3 · answered Oct 12 '18 at 10:30

3

what you export is an object, and what you use is a field/method inside this object, so you need to use your function this way:

MyFunctions.MyFunction("Please do some stuff !");

answered Oct 12 '18 at 10:30

Jerry

170
8

How to import a external function in a Vue component?

3 Answers3

Linked