How to use dependency in Vue component?

Question

I'm mostly a backend dev but I now need to implement something in an existing vue codebase. In a file called myModal.vue I need to use a this cron-parser js lib . When I use it in the app.js file it works perfectly:

import CronParser from 'cron-parser';

let interval = CronParser.parseExpression('*/2 * * * *');
console.log(interval.next().toString()); // logs a correct datetime

So I now want to pass this CronParser to the myModal.vue file. So following an existing injection of HighCharts I added the third of these 4 lines:

Vue.prototype.$eventHub = new Vue();
Vue.use(HighchartsVue);
Vue.use(CronParser);

let myModal = require('./components/myModal.vue');
// and some more components

Then in myModal.vue I use the same code:

let interval = CronParser.parseExpression('*/2 * * * *');
console.log(interval.next().toString());

But I now get

"ReferenceError: CronParser is not defined"

I'm kinda lost on where I'm going wrong here though. Could anybody hint me in the right direction

Answer 1

CronParser is not a vue library, you wouldn't use it as such Vue.use(CronParser);

Instead, just make sure you import it in your myModal.vue . It looks like you may be missing import CronParser from 'cron-parser'; in there.