Run a section of code located in a different file

I have defined some global functions in main.js like this:

Vue.prototype._isMobile = function () {
  return $(window).width() < 768
}
//Few more similar functions

Now, I want to move these functions to a separate file called util.js:

return (function () {
  import Vue from 'vue'
  Vue.prototype._isMobile = function () {
    return $(window).width() < 768
  }
})();

After creating the util.js file, I added the following code in main.js:

require('util.js')

I tried different variations of this method, including exporting and importing, but none of them worked. Can someone suggest a better way to achieve this?

Edit

In response to suggestions to use a plugin, I created a file named util.js with the following content:

Util.install = function (Vue, options) {
  Vue.prototype._isMobile = function () {
    return $(window).width() < 768
  }
}

Then, in main.js, I included the following code:

import Util from 'util'
Vue.use(Util)

However, I encountered the following error:

Uncaught TypeError: plugin.apply is not a function

Answer №1

If you want to enhance the functionality and structure of your code, consider implementing plugins. This approach can help simplify and modularize your project based on what I gather from your inquiry.

Simply append the following snippet to your utils.js:

const customPlugin = {}

customPlugin.install = (Vue, options) => {
  Vue.prototype._isMobile = () => {
    return $(window).width() < 768
  }
}

export default customPlugin

Subsequently, in your main.js, you can integrate this plugin like any other by executing:

import customPlugin from '/path/to/customPlugin'

Vue.use(customPlugin)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with displaying canvas images in imageDraw() function

I'm having trouble with my Imagedraw() method when trying to obtain image data using toDataURL(). var video = document.getElementById('media-video'); var videoCurrentTime = document.getElementById('media-video').currentTime; var ...

Is XML parsing used by AJAX?

Is an XML parser used by AJAX? If so, where is it used? I believe that the client-side JavaScript engine utilizes the DOM parser to extract necessary information from the XML document received from the server. Could it be possible that AJAX doesn't us ...

I am unable to get JQuery UI Dialog to open on my end

Coding in HTML: <button type="button" class="btn btn-success" style="margin-bottom:14px" id="btnAdd" onclick="modaladdedit('URLToMyController')"><i class="fa fa-plus"> Add New</i></button> HEAD Tag Setup: <link rel=" ...

Increase the date by one day excluding weekends (Saturday and Sunday)

My current code is designed to add +1 day to the current date. var date = '30 Apr 2010'; var actual_date = new Date(date); var final_date = new Date(actual_date.getFullYear(), actual_date.getMonth(), actual_date.getDate()+1); Now, I am looking ...

Utilize the push method to form a new array

var teamMembers = [ ['John D. Adams', '1959-1967', 'Ohio'], ['Dawson Mathis', '1971-1981', 'Georgia'], ]; To generate this dynamically, I am implementing the code below: var data = ne ...

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

Sending the selected object from a dropdown in React back to its parent component

I have encountered a few issues with my React dropdown component. My main goal is to pass the selected object from the dropdown back to the Parent component. Currently, the dropdown list is functional and I am able to pass {this.state.selectedUser} back to ...

Extract specific data points from external API responses on a webpage crafted in HTML

I require assistance on how to extract individual values from an HTML page. I received a response from the PAYU payment gateway team in HTML format, but I need to retrieve specific attribute values related to the transaction details. Below is the response ...

Button for navigating to the previous slide on a Jquery slider

There appears to be an issue with the code on the previous button. When the user presses "previous" on the first slide, there is a momentary blank slider before the last slide appears. Is there a way to make this transition smoother? Thank you for your a ...

Exploring Ways to Retrieve Depth Information within three.js

I have come across shaders that can dynamically create outlines around edges based on the difference in depth of pixels. This means that pixels with less depth compared to their adjacent pixels might have a thinner outline or none at all. Examples of such ...

How to Retrieve Component HTML Output in Vue beyond the Template Tag?

Is there a way to access the output of a component, such as ComponentName, outside of the template in Vue.js? For example, in data, methods, or during the mounted lifecycle hook. For instance, consider a Vue file named components/Test.vue: <template&g ...

Can the submit ID value be utilized in PHP?

name="submit" functions as expected. if(isset($_POST["submit"])) <input type="submit" ID="asdf" name="submit" value="Save" class="ui blue mini button"> I want to change it to use ...

Having trouble with running `npm start` on a computer that has different versions of Node and

I have encountered an issue with running a React application on two different computers. One computer, a MacBook, is running the app without any problems, while the other, an Ubuntu 18.04 machine, is having trouble starting it. Here are the configurations ...

Why is Handlebars {{body}} not rendering my HTML tags properly?

I am perplexed by the fact that the example in the other file is not showing. While working on a CRUD project with Mongo, Express, and Node, I encountered an issue. The code wasn't functioning as expected, so I paused to figure out why. <!DOCTYPE ...

Find out which way the user is scrolling in your React js application

I'm struggling to determine whether the scroll event is moving up or down, and I haven't been able to find a solution yet. import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; const Nav ...

What is the process for exporting a plugin from dayjs() in JavaScript?

Currently, I have incorporated the plugin isToday() to enhance the capabilities of dayjs(). Nevertheless, I am uncertain about how to export isToday() in order to utilize it across other files. import isToday from "dayjs/plugin/isToday"; expor ...

How to eliminate spacing between slides in a 3D Carousel Slider using Bootstrap 5

My website utilizes Bootstrap along with a carousel slider, which is functioning properly. However, I am encountering an issue when the slider transitions from right to left. It briefly displays a white space between slides, which I wish to eliminate. I wa ...

From navigating getElementByID to tackling getElementsByClassName while constructing multiple select elements: a guide

I am facing an issue with accessing multiple select elements that have the same options in Javascript. Despite having the same class, I am unable to retrieve the options using Javascript. When I attempted switching from getElementById to getElementsByClass ...

Leveraging Webworkers in an Angular application for efficient data caching with service workers in the Angular-CLI

I am looking to run a function in the background using a worker, with data coming from an HTTP request. Currently, I have a mock calculation (e.data[0] * e.data[1] * xhrData.arr[3]) in place, but I plan to replace it with a function that returns the actual ...

The React/Redux bundle.js file is overly large and bloated

I am currently working on a React project, and the bundle.js file generated by Webpack is quite large at 6.3Mb. I am looking for ways to reduce this size to less than 2.0Mb (though 2Mb would still be acceptable). The full source code can be found on Github ...