How to include vue dependency using CDN?

Question

I have to include https://www.npmjs.com/package/vue2-daterange-picker in my project made with Kendo, Vue, .Net, Angular and jQuery(Yes it's a lot).

<script src="https://unpkg.com/[email protected]/dist/vue2-daterange-picker.umd.min.js"></script>

I am including it via this in my scripts and when I try to use, it throws error Uncaught ReferenceError: DateRangePicker is not defined.

I have even declared it in my js file

Vue.component('date-range-picker', DateRangePicker)

How to resolve this?

I am also using bundles.Add(new ScriptBundle()) but I am unable to add the dependency through that also.

Answer 1

As the documentation says. This script is installed via npm or yarn which means you need some kind of bundler, like webpack to build your dependencies and your scripts (e.g. into one file).

Fact that you're using jQuery, KendoUI, Vue and Angular and not using any bundler is a little weird. It seems that if you want to use vue2-datepicker-range you'll need to use bundler of some sort.