Use function from external javascript file

Question

Hi everyone I work on webpack and VueJS and I want to use a function in multiple different scripts but I don't want to write the script of these function many times. So I have 2 files where I want to use my function like this :

export default {
 data(){
 return {
 metadata: null,
 }
 },
 methods:{
 },
 mounted(){
 this.metadata = this.httpGet("myurl");
 }
}

And like this :

export default {
 data(){
 return {
 metadata: null,
 }
 },
 methods:{
 },
 mounted(){
 this.metadata = this.httpGet("myurl");
 }
}

And this is the third part where i want to create my function :

httpGet(theUrl){
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.open("GET", theUrl, false); // true for asynchronous request
 xmlHttp.send(null);
 return JSON.parse(xmlHttp.responseText);
}

I don't found the exact code to make it works. So please tell me how I can use imports, require or things like this. I don't want to use vuex because it is to complex for the little thing I want to do. The final objective is to get a script where I can store different functions and use them in multiples others scripts.

• Christopher Francisco: Sounds like you just need webpack to be able to resolve your imports and exports.
• Christian: check this out: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
• Adrien Roussel: I use webpack soo how can i do that ?

Answer 1

For this you can just use a mixin:

MetaData.js

const MetaData = {
 data(){
 return {
 metadata: null,
 }
 },
 methods:{
 httpGet(theUrl){
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.open("GET", theUrl, false); // true for asynchronous request
 xmlHttp.send(null);
 return JSON.parse(xmlHttp.responseText);
 }
 },
 mounted(){
 this.metadata = this.httpGet("myurl");
 }
}
export default MetaData

Now in your component you can use it like so:

<template>
 <div>{{metadata}}</div>
</template>
<script type="text/javascript">
 import MetaData from './mixins/MetaData' // wherever you have saved the mixin 
 export default{
 mixins: [MetaData]
 }
</script>

That will automatically merge the two objects together, so you can use all the instance properties in your mixin in your Vue component you imported it in to.

Here's a JSFiddle as an example: https://jsfiddle.net/c5takojL/

• Adrien Roussel: I'm not sure it works in the web pack environement. It says : ncaught ReferenceError: Metadata is not defined. It is like if const Metadata in my js file didn't worked.
• craig_h: Make sure you have babel-loader being applied to your .js files files in your webpack config.