Using Vue to bring in an npm module that does not have any exports

Question

Using Vue to bring in an npm module that does not have any exports

I'm facing a challenge when trying to bring in an npm package into a Vue component.

This package (JSPrintManager - here) consists of a JavaScript file with no exports. Therefore, I'm unable to utilize the following import statements:

import { JSPM } from "jsprintmanager"

My attempts with the following imports have also been unsuccessful:

import JSPM from "jsprintmanager"

import * as JSPM from "../../node_modules/jsprintmanager/JSPrintManager"

import * as JSPM from "../../node_modules/jsprintmanager/JSPrintManager.js"

Could it be that I'm headed in the wrong direction?

If importing an npm package that isn't a module is impossible, is there an alternative method to incorporate the necessary JavaScript file (currently located in my node-modules directory) into my component?

I'm working with the Vue CLI

javascript vue.js npm

Answer 1

Answer №1

jspm.plugin.js

import * from '../../node_modules/jsprintmanager/JSPrintManager';

export default {
  install(Vue) {
    Vue.prototype.$JSPM = window.JSPM
  }
}

main.js

import Vue from 'vue'
import JSPM from './jspm.plugin';

Vue.use(JSPM);

In your components, access JSPM as this.$JSPM

If you need to use it outside components (like in the store) and want it to be the same instance as Vue uses, export it from Vue in main.js

const Instance = new Vue({
  ...whatever is here..
}).$mount('#app');

export const { $JSPM } = Instance

Now you can import { $JSPM } from '@/main' anywhere.

In the Vue way, your import attaches something to the window object, which is not ideal. Another approach in your component:

import * from '../../node_modules/jsprintmanager/JSPrintManager';

export default {
  data: () => ({
    JSPM: null
  }),
  mounted() {
    this.JSPM = window.JSPM;
    // this.JSPM is accessible in your methods after mount
  }
}

This simpler method requires the assignment after the JSPM code has loaded. If it occasionally fails, check for window.JSPM before retrying until successful or reaching the maximum number of attempts.

Answer 2

jspm.plugin.js

import * from '../../node_modules/jsprintmanager/JSPrintManager';

export default {
  install(Vue) {
    Vue.prototype.$JSPM = window.JSPM
  }
}

main.js

import Vue from 'vue'
import JSPM from './jspm.plugin';

Vue.use(JSPM);

In your components, access JSPM as this.$JSPM

If you need to use it outside components (like in the store) and want it to be the same instance as Vue uses, export it from Vue in main.js

const Instance = new Vue({
  ...whatever is here..
}).$mount('#app');

export const { $JSPM } = Instance

Now you can import { $JSPM } from '@/main' anywhere.

In the Vue way, your import attaches something to the window object, which is not ideal. Another approach in your component:

import * from '../../node_modules/jsprintmanager/JSPrintManager';

export default {
  data: () => ({
    JSPM: null
  }),
  mounted() {
    this.JSPM = window.JSPM;
    // this.JSPM is accessible in your methods after mount
  }
}

This simpler method requires the assignment after the JSPM code has loaded. If it occasionally fails, check for window.JSPM before retrying until successful or reaching the maximum number of attempts.

Using Vue to bring in an npm module that does not have any exports

Answer №1

Similar questions

Unable to insert <form> element into the content of the popover

Utilizing dynamic components in React JS

stop automatic resizing of windows

Retrieving width and height of the content block inner in Framework7, excluding navbar and toolbar dimensions

Tips for avoiding divs from overlapping when the window size is modified

Nested ng-repeat for dynamic variable rendering

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Unable to submit form in Nextjs using react-bootstrap

Creating a mandatory 'Select' dropdown field in Vue.js

The Angular TypeScript service encounters an undefined issue

Conceal the cursor within a NodeJS blessed application

Need to extract Performance monitor data from Chrome Dev tools using a Java application

Animating back with a jQuery if statement

Error: The identifier 'pipefail' was not expected in this context

Reactjs is failing to display the page

If you're not utilizing v-model.lazy, Vue3 Cleave js may encounter functionality issues

Having trouble implementing uppercase text in Bootstrap editable modules

Utilizing JavaScript to retrieve input names from arrays

"Troubleshooting: Issues with the ng-hide directive in AngularJS

Refresh the Vue page only once after it is mounted