What is the best way to add Vue dependency using CDN?

For my project which is built using Kendo, Vue, .Net, Angular and jQuery, I need to incorporate https://www.npmjs.com/package/vue2-daterange-picker.

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1b18085f40090c19081f0c030a08401d04091c">[email protected]</a>/dist/vue2-daterange-picker.umd.min.js"></script>

When trying to use it, an error "Uncaught ReferenceError: DateRangePicker is not defined" is thrown. I have already declared it in my js file like this:

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

How can I resolve this issue? Additionally, I attempted to add the dependency through bundles.Add(new ScriptBundle()) but was unsuccessful.

Answer №1

The instructions provided in the guide mention that this particular script must be installed using either npm or yarn, indicating the necessity of a bundler such as webpack to consolidate dependencies and scripts into a single file.

It strikes me as unusual that you have opted for jQuery, KendoUI, Vue, and Angular without employing any form of bundler. If you wish to incorporate vue2-datepicker-range, it appears essential to utilize some type of bundling tool.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Explanation of JavaScript code snippet

fnTest = /abc/.test(function () { abc; }) ? /\bchild\b/ : /.*/; I am struggling to comprehend the functionality of this particular javascript snippet. Would someone be able to elaborate on the logic behind this code fragment? ...

How to retrieve a variable from an object within an array using AngularJS code

I recently started learning TypeScript and AngularJS, and I've created a new class like the following: [*.ts] export class Test{ test: string; constructor(foo: string){ this.test = foo; } } Now, I want to create multiple in ...

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...

Maximizing the use of JavaScript's prototype.js library: Passing parameters to callback functions

My understanding of JavaScript is limited to using it for Dynamic HTML. However, I am now exploring Ajax and facing an issue with the code below (taken from and modified to suit my requirements). I need to pass the update_id parameter to the onSubmit fun ...

"Unlocking the Potential: Maximizing the Benefits of the top.gg Vote Web

My bot has been verified on top.gg, and I'm looking to offer rewards to users who vote for my bot. How can I detect when someone votes for my bot, get their ID, check if it's the weekend, and take action after the vote? Essentially, how do I util ...

When trying to access data within objects using JSON iteration, it may lead to encountering an issue of reading a

Attempting to retrieve specific data from a JSON file obtained from a website has proven challenging. While iterating through the collection of objects, undefined values are constantly encountered. Unfortunately, if the JSON is poorly structured, modificat ...

Can anyone guide me on incorporating FontAwesome into my Vue/Express/hypernova-vue application?

I am currently developing a Rails app that utilizes hypernova-vue to integrate Vue3 micro frontend apps/components across the site. I have created a small npm library containing components that are used by the Vue component micro frontends. However, after ...

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

Is there a way to seamlessly integrate typeahead.js with jquery.validate?

Currently, I have a website built on ASP.NET MVC 5 which utilizes jQuery validation (specifically 'jquery.validate.js' in the MVC project template). My goal is to implement type-ahead functionality using 'typeahead.js' on an input field ...

Do AJAX requests hinder performance and how long do they typically last?

Even though I have experience in web development, I still find myself feeling a bit uneasy asking these basic questions. However, I believe it's always good to verify my assumptions... In my application, I am working on recording unique image views. ...

What functionality does the --use-npm flag serve in the create-next-app command?

When starting a new NextJS project using the CLI, there's an option to use --use-npm when running the command npx create-next-app. If you run the command without any arguments (in interactive mode), this choice isn't provided. In the documentati ...

Issues with routing in Node.js using Express

This is my first attempt at programming. I am currently in the process of setting up routing in the following way: var indexRouter = require('./routes/index'); var loginRouter = require('./routes/login'); app.use('/', indexRo ...

The ReactJS redirect URL is constantly changing, yet the component fails to load

I recently started using reactjs and I encountered an issue with routing from an external js file. Here is the code in my navigation file, top-header.js import React from 'react'; import {BrowserRouter as Router, Link} from 'react-router-do ...

The callback function within the Service does not execute just once when utilizing $timeout

Looking to implement a service that functions similarly to this example. Here is the code I have so far: app.service('Poller', function ($q, $http, $timeout) { var notification = {}; notification.poll = function (callback, error) { return $ ...

Invoke the REST API and save the compressed file onto the local machine

This is the code snippet I currently have: jQuery.ajax({ type: "GET", url: "http://localhost:8081/myservicethatcontainsazipfile", contentType:'application/zip', success: function (response) { console.log("Successful ...

Is there a way I can set a variable as global in a jade template?

I am trying to pass a global object to a jade template so that I can use it for various purposes later on. For instance: app.get("/", function(req, res){ var options = { myGlobal : {// This is the object I want to be global "prop ...

Implement seamless content loading using jQuery, eliminating the need

Is there a reason why this piece of code isn't working for me? I'm trying to load HTML content using jQuery and followed the instructions from this tutorial: Here's how my HTML looks: <div id="icon"> <a href="http://localhost/ ...

Tips for preventing the loading of multiple local versions of jQuery

I have been struggling to prevent redundant loading of my local version of jQuery and jQuery UI due to the continuous Ajax pulls on the pages, which trigger a reload by jQuery each time. The specific jQuery files I am currently loading are: <script s ...

Please provide either a render prop, a render function as children, or a component prop to the Field(auto) component

While working on my project and implementing an Auto complete feature using final-form, I encountered the following error: Must specify either a render prop, a render function as children, or a component prop to Field(auto) In order to resolve this issue ...