Use normal javascript file in vue component?

Question

I have a file called Helper.js which holds functions which use some libraries. Now I have a TestComponent.vue file and want to use this helper functions. How can I inject this functionalities?

I tried to use the libraries used in Helper.js directly in the Components block but it seems that vue is running before any library is included regardless of the order of the index.html's tags.

How can I use the .js file or other libraries

• ceejayoz: Easiest way: include the file with a <script> tag before Vue's own script tag.
• xetra11: I did before the <script src="js/build.js"></script> but did not worked
• Egor Stambakio: Do you use a build tool? You can import your library inside a component file, and use its functions (make sure your lib exports stuff you need).
• xetra11: What about Vue.js Plugins? Is this way to "Import" a lib?
• Vamsi Krishna: Are you using webpack sort of any build fool?

Answer 1

In order to use additional libraries or helper functions inside Vue templates you can simply import them into the script tag of the template:

TestComponent.vue

<template>
<!-- template markup -->
</template>
<script>
import Helper from 'relative/path/to/Helper.js'
// or just a helper function (that should be exported accordingly
import { helperFunction } from 'relative/path/to/Helper.js'
export default {
 name: 'TestComponent'
 // component data, methods, etc are now able to use imported variables 
}
</script>

This way you can use any additional JS inside your component. Webpack will include it in the bundle. Though, it might become uncomfortable to maintain or repeat imports if library is used in many components. In this case, it is possible to define the library on Vue prototype inside the main application file where Vue instance is created, which will make it accessible from any component.

import moment from 'moment'; Object.definePrototype(Vue.prototype, '$moment', { value: moment });

Please, follow the article for detailed explanation and better practices.

Answer 2

The correct answer is:

First you need to import the library, so you can define Property.

import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

Please note that you should use defineProperty instead of definePrototype.

This way you can call into your Vue something like this: this.$moment();