Possible to call external Javascript functions with VueJS?

I’ve recently recieved a Javascript file with plain Javascript and some Jquery. Do i have to convert it all into VueJS where i put all the functions inside a method or can i call the functions regardlessly just by importing it? I’ve tried importing the Javascript file and giving it a name, so i thought i could refer it to name.function inside the other document. But that just gives me an error:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__js_name___default.a.name is not a function

You generally won’t have to “convert it into VueJS”, but the way that you access the content of that file depends on how that content is strctured.

since it’s jQuery based, I would assume that it is not strctured in as a commonJS module, so you probably can’t import and read individual functions, but it’s hard to say without knowing what’s in the file.

As for now, i’ve just converted it all into VueJS methods and data. But at the start of my script i did the following:

import data from './../js/data.js';

In data.js there is:

(function ($) {
var logIn= function (username, password) {
            return true;
        };
})();

This is just a simple example to show the usecase. I hope you get the point. If i then in Vue call data.logIn(), shouldn’t i then call the logIn function inside data.js?

yeah your data.js file is not in the format of a module.

If you’re using webpack with babel and have transpiling setup (Or you’re just using a preconfigured template for you from vue-cli) then there are a couple ways to write the syntax but one way would be

data.js

function logIn (username, password) { ... }

export {logIn}

Other JS file

import {logIn} from '../../data.js`

no need to wrap it around an IIF like you have too.

4 Likes

Ah okay. So if i have several functions inside the js document, i would then have to import it all, right? But how do i then call a specific function inside, like call logIn?

Thank you for your info.

What do you mean call a specific function inside logIn? Just import your functions and use them like you normally would. For example, lets say we’re using the Lodash library and we want to use a function from lodash inside logIn

data.js

import _ from 'lodash'

function logIn (username, password) {
   _.find() // function from lodash
}

export {logIn}

Login.vue file:

import data from './../js/data.js';

data.js file:

export default {
    data: {
        function logIn (username, password) { ... }
        function logOut () { ... }
    }
}

Can i then call data.data.logIn(username, password) from Login.vue?

No, the example I provided it would be

import {logIn} from '../../js/data.js'

export default {
   methods: {
      handleLogin (username, password) { // say a button in your template calls this function
        logIn(username, password) // call login method we are importing from data.js.
        // do other function calls and stuff here too
      }
   }
}

im also confused why you’re assigning functions onto your data property, and not onto the methods of your vue instance.

1 Like

If i have the use the same functions on different vue files, do i then not have to copy/paste them to every document?

Like i have to use LogIn function on the login page and logoff on all other pages.

You’re not copying and pasting them. You’re importing your function from a single JS file, centralizing that logic so you’re not duplicating it.

If you’re talking about “boiler plate” in hooking up those calls to the methods property on vueInstances, then you can use mixins.

loginMixin.js

import {login} from 'data.js'
export default {
   methods: {
      handleLogin (username, password) { // say a button in your template calls this function
        logIn(username, password) // call login method we are importing from data.js.
        // do other function calls and stuff here too
      }
   }
}

Any other Vue file

import LoginMixin from 'loginMixin.js'
export default {
   mixins: [LoginMixin],
   data () {...},
   created () {...}
   methods: {...}
}

now that vues instance will also have the function ‘handleLogin’ in merged into its methods.

Read up on mixins here

1 Like

Thank you! Seems like that could work :slight_smile:

I definitely advise reading up on how modules work, and how the import/export syntax actually functions so you have a better idea with what you’re working with.

Good luck.