0

Could someone explain to me how I can import our internal "commonFunction.js" file into a new Vue SPA and call each of those functions?

I've spent the last 2 days reading up on import, require, creating a script load, adding the .JS file to index.html, etc, etc and simply nothing is working.

I've many components in our Vue app, and we have a host of functions that handle the data based on many rules but I'm stuck at the first hurdle.

I basically want to load the commonFunctions.js file into memory and have many components access many functions and methods within that imported .js file.

I've managed to get jQuery running with a simple:

const $ = require('jquery');
window.$ = $;

Tips really would be appreciated!

Example of function to call:

function formatPercent(number) {
   if (isNaN(number.value) === true) { return '-' }
   return isFinite(numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding))) ? numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding)) + '%' : '∞';

}

As a test, I have a file called "commonFunctions.js" and the following:

module.exports = {
methods: {
    method: function () {
        alert("1")
    },
    otherMethod: function () {
        alert("2")
    }
}

}

On my main.js I have the following line which I believe is imported the above .js file and assigning it to a variable called myMethod

var MyMethods = require('./commonFunctions.js');

And finally, within one of my methods on the .vue page, after the user has clicked a button, I wish to test things are working with the following:

<template>
<div class="home">
    <h1>{{ msg }}</h1>
    <p>Welcome to your new single-page application,, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p>
    <v-btn v-on:click="redraw">T1</v-btn>
    <v-btn v-on:click="redraw2">T2</v-btn>

</div>
</template>
<script>
    import { EventBus } from "../event-bus";
export default {
    name: 'Home',
    props: {
        msg: String
    },

    methods: {
        redraw: function () {

            let $ = window.$;
            EventBus.$emit("categories", [{ name: 'n1' }, { name: 'n2' }]);
            EventBus.$emit("tabledata", [{ name: 'n1', Y2013: 159, Y2014: 6.0, Y2015: 24, Y2016: 4.0, Y2017: 1 }]);
            $('body').css('background-color', 'grey');

            MyMethods.method

        },
        redraw2: function () {
            EventBus.$emit("categories", [{ name: 't3' }, { name: 't3' }]);
            EventBus.$emit("tabledata", [{ name: 't3', Y2013: 159, Y2014: 6.0, Y2015: 24, Y2016: 4.0, Y2017: 1 }]);
        }
    }
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
JasonMHirst
  • 576
  • 5
  • 12
  • 31
  • Can you provide more information on your frontend build setup? Are you using webpack? Is the project generated with vue-cli? Which versions if so? Can you show a snippet of your commonFunctions.js? How are the functions in there defined? - this might help : https://stackoverflow.com/questions/16631064/declare-multiple-module-exports-in-node-js – Frnak Mar 05 '19 at 09:29
  • Hi Frank, have amended post. It's a vue project created in VS2017, currently learning so don't know if I'm using WebPack or if it's generated with Vue-Cli (terminology not yet familiar with me) – JasonMHirst Mar 05 '19 at 09:55
  • no problem - happy to help. Did you follow a guide or something? How do you include vue in your project? How do you start it? Do you call npm run start or something? I need some more info to guide you :) – Frnak Mar 05 '19 at 10:00
  • VS2017 creates all the necessary structures with a App.Vue, and main.js and the components directories. I've managed to create all the controls perfectly using Vuetify, but now adding on the functionality to our existing (huge) library is the stumbling block. – JasonMHirst Mar 05 '19 at 10:34
  • Again, changed OP with better example of what I have. – JasonMHirst Mar 05 '19 at 10:40
  • 1
    Thanks! That Helps! I think you have multiple ways to handle this. If you want to go the easy way you should do it for you functions the same as you have done for your jQuery. Just append everything to window insetad of storing it in MyMethods. `window.MyMethods = require(...)` sadly I currently cannot validate your export definition is correct so you will have to test it yourself. You can also think about creating a mixin https://vuejs.org/v2/guide/mixins.html#Global-Mixin but be careful with these if you have many methods as they are applied to every single component (if you use global) – Frnak Mar 05 '19 at 10:50
  • Thanks Frank, I've read about the mixins and that does look like a possible method for the more common functions like localisation, and mathematical calculations we perform. But I'll certainly investigate the window.MyMethods method you've metnioned (and I'm aware this is only applicable to client-side and won't be handled by the server). Thank you so much for the assistance, certainly helping me down the correct path I feel! – JasonMHirst Mar 05 '19 at 10:54
  • 1
    The other way - i forgot to mention - is to "import" your helpers just for the files where you need them. There is no need to define them globally. – Frnak Mar 05 '19 at 10:57

0 Answers0