Using Vue.JS to import a custom module

Question

Using Vue.JS to import a custom module

I've put together a module called greetings.js, structured like this:

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

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

module.exports = greetings;

Next, I brought it into main.js within the VUE.JS framework as shown below:

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

Now, when trying to utilize it in my components, an error occurs:

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

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

Any tips on how to resolve this issue and successfully use my greetings module? Appreciate any assistance!

javascript vue.js module vue-component

Answer 1

Answer №1

The greetings.js file should be structured as follows:

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

To use this file in any other, simply import it like so:

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

You can then call any function you wish to utilize. Make sure to remove the line Vue.use(greetings);

Answer 2

The greetings.js file should be structured as follows:

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

To use this file in any other, simply import it like so:

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

You can then call any function you wish to utilize. Make sure to remove the line Vue.use(greetings);

Answer 3

Answer №2

When you want to register a custom plugin using Vue.use(), remember that it must include an install() function that Vue will call. Here's what the docs say:

To create a Vue.js plugin, make sure it has an install method. This method will receive the Vue constructor as the first argument, along with any additional options.

Check out the example provided at this link to learn about all the options you have for creating your own custom plugin: https://v2.vuejs.org/v2/guide/plugins.html

Answer 4

When you want to register a custom plugin using Vue.use(), remember that it must include an install() function that Vue will call. Here's what the docs say:

To create a Vue.js plugin, make sure it has an install method. This method will receive the Vue constructor as the first argument, along with any additional options.

Check out the example provided at this link to learn about all the options you have for creating your own custom plugin: https://v2.vuejs.org/v2/guide/plugins.html

Using Vue.JS to import a custom module

Answer №1

Answer №2

Similar questions

Having trouble importing SVG as a React component in Next.js

Improving the method for calculating the sum of a property value within an array

``Where can I find information on setting a timeout for a node.js application

React - updates to server values do not display in DOM right away

What is the process for invoking a JavaScript function and storing form data in a text file within an HTML document?

Challenges with the Parent Element in jQuery appendTo Operation

How can one utilize electron's webContents.print() method to print an HTML or text file?

Handling complex JSON data in KendoUI Grid with varying keys

Jquery AJAX promise will consistently fail when the ajax call encounters an error

Use jquery to modify fields

At times, Mongoose may return null, while other times it returns data frequently

Incorporating a div element dynamically into a cell within a datatable with JavaScript

Locating a specific entry in a custom object array based on a property

Tips for streamlining the filter function using replace and split:

Setting up global Axios configuration with authentication in NuxtJS using VueJS

Constantly showing false values in AngularJS Firebase array objects

How to Convert Python Lists into JavaScript?

Using the `channel.client` function in Discord.JS without displaying bot client details - a guide

The JSON data appears to be correct, yet it is not functioning properly when transmitted to X

The Material-UI table spills out of its designated container