Bringing in a Native JavaScript File to Your Vue Component in Vue Js

After developing a frontend application using Vue Js, I encountered the need to integrate a native JavaScript file into one of my Vue components.

This native js file contains various utility functions that I would like to access and use within my Vue component.

The native js file is named util.js

var helper = function(t) {
                var u = 'product',
                    A = 'version',
                return {
                    buildHelpUrl: function(a, b, c) {
                                   return "http://"
                                 }
               /* Snippets */
             }

I attempted to import the native js file into my .vue file using two different methods:

Case 1: import OTHHUrlBuilder from '@/util.js';
Case 2: import * as urlbulider from '@/util.js';

Unfortunately, neither approach was successful. I am seeking guidance on the correct way to import and utilize the functions provided in the native js file. Your assistance is greatly appreciated!

javascriptvue.js

Answer №1

Start by exporting all the necessary functions to your .vue file.

For example, in your .js file:

const addFunction = (num1, num2) =>  {
   return (num1 + num2)
}

const subtractFunction = (num1, num2) =>  {
    return (num1 - num2)
}

export { addFunction, subtractFunction }

Then, you can import these exported functions into your .vue file.

In your .vue file:

<script>

import { addFunction, subtractFunction } from '@/util.js'

 ...

If you only have one function to export, you can use export default

In your .js file:

const singleFunction = (text) => {
          var x = 'example',
                    y = 'output',
                return {
                    generateResult: function(a, b, c) {
                                   return "http://"
                                 }
               /* Additional logic */
             }

    export default singleFunction

and in your .vue file:

import singleFunction from '@/util.js'

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

How can I retrieve information from a topic using kafka-node?

Having trouble reading data from a Kafka server? You may encounter an error message stating that the topic does not exist. Here are some questions to guide you: 1- How can I ensure that my Kafka connection is established? 2- What is the process for retri ...

javascriptnode.jsapache-kafkaproducer-consumer

Activate collapsible navigation icon when clicked on a smaller screen

Seeking assistance as a newcomer to coding. Struggling to implement a responsive navbar icon that changes on small screens when clicked. Utilized a bootstrap navbar but encountering issues where clicking the navbar on a small screen only displays the list ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

While iterating over the key with a variable in a loop, only one property is displayed consistently instead of four different

Currently, I am working on creating an address book using JavaScript. The problem I am facing is that the properties of my objects are not providing me with the necessary information. I need 4 different properties instead of 4 loops with the same property. ...

javascriptfor-loopkeyaddressbook

Updating by clicking with auto-prediction feature

I have implemented an autosuggestion feature to display results from a database table while typing in an HTML field, and I am looking to utilize JavaScript to post another value from the same row where the autosuggested values are stored. https://i.stack. ...

javascriptphpmysqlajax

Store the beginning and ending times in a MySQL database using Sequelize and Node.js

I am currently developing a project management application where I need to keep track of the start and stop time for user work. To achieve this, I have implemented two buttons in the UI - START and STOP. When a user clicks the START button, the following ...

javascriptarraysangularjsjsonnode.js

Firebase Operation Not Supported Error in next.js (auth/operation-not-supported-in-this-environment)

After successfully deploying a Next.js app hosted on Vercel with Firebase authentication that functions properly for users, I encountered a mysterious error during the "npm run build" phase: FirebaseError: Firebase: Error (auth/operation-not-supported-in ...

javascriptnode.jsfirebasenext.jsfirebase-authentication

Ending the loop of a jQuery JSON array when reaching the final row

I have a function that retrieves a JSON array and shows the results as a list with ten items. However, if there are fewer than ten results, it starts over from the beginning. This is my code: $.ajax({ url: 'http://www.entertainmentcocktail.com/c ...

javascriptjqueryajaxjson

Google's AJAX crawling scheme using the shebang syntax is failing to crawl pages

I have incorporated Google's shebang '#!' syntax for ajax crawling on my website. Both ends of the system have been set up as per the guidelines provided at https://developers.google.com/webmasters/ajax-crawling/docs/specification This mea ...

javascriptphpajaxurlgoogle-ajax

AngularJS - Import and save CSV files

I have set up a nodeJS program as the server and an AngularJS web application as the client. For generating CSV files, I am utilizing the "express-csv" library (https://www.npmjs.com/package/express-csv) Below is the code for the server side: Definition ...

javascriptangularjsnode.jscsv

"Ways to configure VS Code to navigate to file definitions using the Ctrl+Click shortcut along with alias capabilities

In the past, I had set up an alias feature as shown below: resolve: { alias: { "@": path.resolve(__dirname, "src"), }, }, However, this feature caused VSCode to be unable to navigate to the definition file by using Ctrl ...

vue.jsvisual-studio-codealias

Sleek dialog sliding animation with Svelte

I'm struggling with a svelte component that I have and I'm trying to implement a slide down animation when it closes. The slide up animation is functioning correctly, but for some reason the slide down animation is not working. Does anyone have a ...

javascripthtmlcsssvelte

Creating interfaces for applications that are driven by events in JavaScript

When it comes to designing an application, traditional UML Class diagrams may not always be useful, especially for programs that do not heavily rely on classes. For instance, in a JavaScript application that is mainly event-driven, where you listen for eve ...

javascript

What strategies can be utilized to condense code when needing to adjust a className based on various props?

I am looking to condense this code, particularly the [if~else if] block, in order to dynamically change a className based on different props passed. export default function Button(props) { const { name, height, color, bgColor } = props; let className = ...

javascriptreactjsnext.js

Ways to stop VoiceOver from selecting the background content when a modal is open

Is there a way to prevent VoiceOver from reading the content behind a modal? I tried using aria-modal=true, but it seems VoiceOver does not support this feature by default like NVDA and JAWS do. I found more information about this on . According to the in ...

javascripthtmlaccessibilitywai-ariavoiceover

Issues with AngularJS <a> tag hyperlinks not functioning as expected

After performing a search, I have an array of objects that needs to be displayed on the template using ng-repeat. The issue arises when constructing the URL for each item in the array – although the ng-href and href attributes are correct, clicking on th ...

javascriptangularjs

JavaScript: Creating keys for objects dynamically

const vehicles = [ { 'id': 'truck', 'defaultCategory': 'vehicle' } ] const result = [] Object.keys(vehicles).map((vehicle) => { result.push({ foo: vehicles[vehicle].defaultCategory }) }) c ...

javascriptobjectpropertiesecmascript-6key

Converting text/plain form data to JSON using Node.js - step by step guide

I am currently working on a Node.js application to execute a POST call to an API for placing an order. However, the data I receive in our app is in text/plain format and not JSON. This is the current format of the data: TypeOrder=buy Coin=BTC AmountCoin= ...

javascripthtmljsonnode.jsexpress

Ensure that all checkboxes are only selected within a single table

I have a challenge with selecting all check boxes in multiple tables when the header check box is selected. I am attempting to achieve this using jQuery without needing to parse or pass in the table id. Currently, when I select one header check box, all th ...

javascriptjqueryhtmlcheckbox

The jQuery placeholder plugin encounters an error stating 'jQuery is not defined'

Having an issue on this specific page where I keep encountering a 'jQuery is not defined' error in both Chrome and IE because of the jQuery placeholder script. The declaration of jQuery comes before the plugin script. Checked for any conflicts ...

javascriptjqueryhtml

Learn how to utilize a Library such as 'ngx-doc-viewer2' to preview *.docx and *.xlsx files within the application

After 3 days of searching, I finally found a solution to display my *.docx and *.xlxs files in my angular application. The API returns the files as blobs, so my task was to use that blob to show the file rather than just downloading it using window.open(bl ...

javascriptangulartypescriptblobngx-doc-viewer