Vue.JS import custom module

Question

I have created a module greatings.js like this one:

function greatings() {
  this.hello = function() {
    return 'hello!';
  }

  this.goodbye = function() {
    return 'goodbye!';
  }
}

module.exports = greatings;

Then I imported it into main.js in VUE.JS just like:

import greatings from './assets/js/greatings';
Vue.use(greatings);

Now I would like to use it in my components but if I do it I got an error:

  mounted() {
    this.greatings.hello();
  }

ERROR: Error in mounted hook: "TypeError: Cannot read property 'hello' of undefined"

How to fix it and be able to use my greatings? Thanks for any help!

v3.vuejs.org/guide/plugins.html

sfy
– sfy

2021-03-30 09:36:02 +00:00
Commented Mar 30, 2021 at 9:36 — sfy
– sfy, Commented Mar 30, 2021 at 9:36

Basir Askari · Accepted Answer · 2021-03-30 09:27:27Z

2

greatings.js file should be like this

export default {
  hello() {
    return "hello";
  },
  goodbye() {
    return "goodbye!";
  }
};

and import in any file you want to use like this

import greatings from './assets/js/greatings';

and call any function do you want. remove this function Vue.use(greatings);

answered Mar 30, 2021 at 9:27

Basir Askari

611 gold badge1 silver badge8 bronze badges

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

5 Comments

Uncoke Over a year ago

Thanks. How to call the hello function from mounted(){} ? greatings.hello() ? I got error...

Basir Askari Over a year ago

you can call hello like this greatings.hello();

Basir Askari Over a year ago

mounted(){ greatings.hello(); }

Uncoke Over a year ago

_assets_js_greatings__WEBPACK_IMPORTED_MODULE_10___default.a.hello is not a function"

Uncoke Over a year ago

Maybe it's a webpack error... I copied the same code ad above in my component. It loads greatings.js but I got the error in mount()

tony19 · Accepted Answer · 2022-07-15 04:43:40Z

1

When using Vue.use() to register a custom plugin, it has to define an install() function, which is called by Vue. From docs:

A Vue.js plugin should expose an install method. The method will be called with the Vue constructor as the first argument, along with possible options.

See the provided example, for all the options you have when creating a custom plugin: https://v2.vuejs.org/v2/guide/plugins.html

edited Jul 15, 2022 at 4:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 30, 2021 at 9:16

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

1 Comment

Uncoke Over a year ago

Thanks Igor, this is very helpful, but I'm trying to reuse my old script; a plugin requires too many changes. I'll evaluate if I really need a plugin. Thanks for suggestion

Collectives™ on Stack Overflow

Vue.JS import custom module

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related