Import Native JavaScript file into Vue Component - Vue Js

Question

I have created frontend application with Vue Js. I want to integrate one native javascript file into the Vue component.

The native js file contains multiple util functions. I want to call those functions from my Vue component.

Native js file util.js

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

I tried following way to import in my native js file into .vue file

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

Nothing worked. Please help me to properly import and use the functions available in the native js files.

You can't import anything from non-modular JS. You need to make it a module first. — Estus Flask
– Estus Flask, Commented Jan 10, 2022 at 6:47

Madi Naf · Accepted Answer · 2022-01-10 12:52:45Z

2

First export all your functions you need to your .vue file.

Exemple on your .js file :

  const funcAdd = (a, b) =>  {
   return (a + b)
  }

  const funcSub = (a, b) =>  {
    return (a - b)
  }

  export { funcAdd , funcSub }

And then on your .vue file you can import all the exported functions.

On your .vue file :

  <script>

  import { funcAdd , funcSub } from '@/util.js'

 ...

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

On your .js file

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

    export default helper

and on your .vue file

    import helper from '@/util.js'

edited Jan 10, 2022 at 12:52

answered Jan 10, 2022 at 7:44

Madi Naf

6651 gold badge6 silver badges19 bronze badges

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

2 Comments

MOHAMED AZARUDEEN Over a year ago

It works fine as expected. One more scenario, Suppose inside the function funcAdd which also uses another js file function means where I need to import that js file

Madi Naf Over a year ago

If you want to use a function that is in one .js file in another .js file, you can do the same process, take a look at this demo. Here is the code

import isANumber from './tools/isANumber';  const funcAdd = (a, b) => {   if (isANumber(a) && isANumber(b)) {     return a + b;   } else {     return null;   } };  export { funcAdd };

Collectives™ on Stack Overflow

Import Native JavaScript file into Vue Component - Vue Js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related