Bringing in a standard library to a Vue single-page application

Question

Bringing in a standard library to a Vue single-page application

Struggling to grasp what should be a straightforward task, I'm open to the idea that my current approach may not be the best way forward. Currently, we are updating our processes and refining some of the functions within a .js file that houses numerous objects and functions utilized in our applications.

To illustrate, consider the following snippet:

**COMMON.JS**
const dynamicYearColumn= {
    resizable: false, suppressMovable: true, sortable: true, width: 100, menuTabs: [], type: 'numericColumn',
}


const defaultPercentageColumn= {

    resizable: false, suppressMovable: true, sortable: true, width: 150, menuTabs: [], type: 'numericColumn',
    valueFormatter: formatPercent,
    cellStyle: { 'text-align': 'right' },
    cellClass: function (params) { var className = numberToColorClass(params.value); return className }
}

function formatPercent(number) {

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

function numberWithCommas(n) {
    var parts = n.toString().split("."); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

In my main.js file, I have implemented:

import common from './scripts/common.js'
const commonLibrary = {
    install() {
        Vue.common = common
        Vue.prototype.$common = common
    }
}

Vue.use(commonLibrary)

However, I am facing difficulties in implementing this setup.

If I enclose the code within export default in my common.js, the code needs to be modified, resulting in errors with unrecognized functions like formatPercent.

If I use

export {dynamicYearColumn,defaultPercentageColumn}

, it partially works but the functions remain undefined.

Creating a Mixin also yields similar results, with internal functions being unrecognized, along with advice against loading a large library into Mixins due to poor coding practices.

While there are plenty of resources with examples available, I struggle with the terminology to search for relevant solutions.

In essence, all I need is seamless access to an extensive collection of objects and functions from a single JS file, callable from any component within my Vue SPA.

javascript vue.js es6-modules

Answer 1

Answer №1

It seems like you're very close to your goal.

Let's say you want to achieve the following:

import common from './scripts/common.js'

In order to do this, we need common.js to have a default export, starting with export default.

Additionally, if we want to access objects and functions as common.dynamicYearColumn, common.formatPercent, etc., we need common to be an object with properties such as dynamicYearColumn, formatPercent, etc. Some of these properties will be functions, but that detail isn't crucial.

Let's briefly explore how we can construct such an object:

const common = {}
common.dynamicYearColumn = { /* define object properties here */ }
common.formatPercent = function (number) { /* implementation details go here */ }

We could also use object literals to immediately define the object properties:

const common = {
  dynamicYearColumn: { /* define object properties here */ },
  formatPercent: function (number) { /* implementation details go here */ }
}

ES6 introduced some shorthand syntax for creating functions within an object, allowing us to simplify the process even further:

const common = {
  dynamicYearColumn: { /* define object properties here */ },
  formatPercent (number) { /* implementation details go here */ }
}

This is the object structure we aim to create within common.js before exporting it. Putting everything together, it looks like this:

export default {
  dynamicYearColumn: {
    // ...  
  },

  defaultPercentageColumn: {
    // ...
  },

  formatPercent (number) {
    // ...
  },

  numberWithCommas (n) {
    // ...
  }
}

By adding them to the Vue.prototype, as shown in your example, these functions will be accessible within your component as follows:

this.$common.formatPercent(25)

In your templates, you would use them like this:

{{ $common.formatPercent(25) }}

Although this setup works well, please note that you cannot use these functions as filters. In case you wish to do so, you must register them as filters within your plugin.

Answer 2

It seems like you're very close to your goal.

Let's say you want to achieve the following:

import common from './scripts/common.js'

In order to do this, we need common.js to have a default export, starting with export default.

Additionally, if we want to access objects and functions as common.dynamicYearColumn, common.formatPercent, etc., we need common to be an object with properties such as dynamicYearColumn, formatPercent, etc. Some of these properties will be functions, but that detail isn't crucial.

Let's briefly explore how we can construct such an object:

const common = {}
common.dynamicYearColumn = { /* define object properties here */ }
common.formatPercent = function (number) { /* implementation details go here */ }

We could also use object literals to immediately define the object properties:

const common = {
  dynamicYearColumn: { /* define object properties here */ },
  formatPercent: function (number) { /* implementation details go here */ }
}

ES6 introduced some shorthand syntax for creating functions within an object, allowing us to simplify the process even further:

const common = {
  dynamicYearColumn: { /* define object properties here */ },
  formatPercent (number) { /* implementation details go here */ }
}

This is the object structure we aim to create within common.js before exporting it. Putting everything together, it looks like this:

export default {
  dynamicYearColumn: {
    // ...  
  },

  defaultPercentageColumn: {
    // ...
  },

  formatPercent (number) {
    // ...
  },

  numberWithCommas (n) {
    // ...
  }
}

By adding them to the Vue.prototype, as shown in your example, these functions will be accessible within your component as follows:

this.$common.formatPercent(25)

In your templates, you would use them like this:

{{ $common.formatPercent(25) }}

Although this setup works well, please note that you cannot use these functions as filters. In case you wish to do so, you must register them as filters within your plugin.

Bringing in a standard library to a Vue single-page application

Answer №1

Similar questions

Running JavaScript function from AJAX response containing both HTML and JavaScript code

What is the best way to retrieve the specific property from a bound function?

Add elements from one array into designated positions within another array

Exploring the Power of Jest and Vue Test Utils for Unit Testing in VueJS

Obtaining the URL of the Parent Page Using Javascript

How can I use a string argument in JavaScript to sort an array of objects by that specific value?

Obtaining and Assigning Filter Values in Material Table

Is it possible to have 1 million links on a single webpage?

Tips to prevent redirection in a JavaScript function

The response from getStaticProps in Next.js is not valid

Why is my Angular form submitting twice?

Leveraging properties in computed properties (vue)

The for loop effectively populates the array with elements, but strangely returns an empty array afterwards

Is it possible to load a JavaScript file from a different domain using a bookmarklet?

JavaScript code that loads a specific DIV element only after the entire webpage has finished loading

Is there a way to execute a JavaScript function on a webpage using Selenium automation?

What is the best way to manage div visibility and sorting based on selections made in a select box?

How do I incorporate an external template in Mustache.js?

I am converting a class component to a functional component within a React-Redux-Firebase project

What steps can I take to address this issue with my express node and ejs?