Unable to integrate third-party tools into your Vue JS project via CDN

Currently delving into Vue JS to enhance the interactivity of my django application, I am opting for the route of integrating Vue JS as components within my templates rather than going down the path of a Single Page Application (SPA). It's almost like replacing JQuery with Vue JS. Hence, I have decided to utilize the CDN version by including a script tag at the end of the body element.

However, I am encountering an issue when attempting to incorporate 3rd party components as most of them necessitate npm installation. I am hesitant about going that route and would rather keep things straightforward.

Hence, I am endeavoring to integrate 3rd party components using CDNs. For instance, I am exploring how to use this particular one: https://github.com/bliblidotcom/vue-rangedate-picker

Yet, I am uncertain about how to configure my existing components to leverage it!

Just to provide some context on my objective here - I have a component responsible for managing a search form and displaying data in a table format. I aim to embed a datepicker within my search form and link the selected dates to the parameters passed in my API calls.

javascriptdjangovue.jsvuejs2vue-component

Answer №1

The instructions provided for the component seem to be a little off. The browser CDN link will not function correctly - you actually need the /dist file. Below is a simple demo that works as expected.

If you have already imported Vue from a CDN, you can implement it like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"> 
</script>
<script src="https://unpkg.com/vue-rangedate-picker/dist/vue-rangedate-picker.min.js">
</script>

<div id="app">
  <vue-rangedate-picker 
    @selected="onDateSelected" i18n="EN" format="YYYY-MM-DD hh:mm:ss">
  </vue-rangedate-picker>
</div>
</body>

<script>
document.addEventListener("DOMContentLoaded", () => {
  VueRangedatePicker.default.install(Vue)

  new Vue({
    el: "#app",
    methods: {
      onDateSelected() {
      }
    }
  })
})
</script>
</html>

To address this issue in the documentation, there is a pull request available for review here.

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

How to customize TextField error color in Material-UI using conditional logic in React

Currently, I am incorporating the React Material-UI library into my project and faced with a challenge of conditionally changing the error color of a TextField. My goal is to alter the color of the helper text, border, text, and required marker to yellow ...

javascripthtmlcssreactjsmaterial-ui

The matMul function encountered an error due to a mismatch in the inner shapes of the Tensors. The shapes provided were 684,1 and 2,1, and the transposeA and transposeB parameters were both set

I am completely new to the world of AI and tensorflow.js. Currently, I am following a Machine Learning course by Stephen Grider. I was expecting an output after running the code below, but instead, I encountered an error. Can someone please assist me? Her ...

javascriptnode.jsmachine-learninglinear-regressiontensorflow.js

How can I create a regex pattern that will exclude characters within parentheses?

While working on some regex, I encountered a bug: The scenario is as follows: I have this string - for example "+1/(1/10)+(1/30)+1/50" and I applied the regex /\+.[^\+]*/g to it, which worked perfectly giving me ['+1/(1/10)&apos ...

javascriptregexregex-lookaroundsregex-negation

waiting for deferred to complete in esri javascript api before continuing with code execution - labelPoints

I'm encountering an issue with obtaining my labelPoints before completing the rest of my code. It seems to be related to a deferred/callback problem that I can't quite grasp, and I couldn't find many examples using the esri javascript api. ...

javascriptdeferredesri

Enabling HTTPS as the default for axios HTTP requests

My challenge lies in setting up an ajax request with axios that specifically needs to be made over https. axios.get('/relativeurl') .then((response) => { console.log(response); }) .catch((error) => { console.log ...

ajaxvue.jsaxios

Removing an unnamed cookie

A mysterious cookie mysteriously appeared on my website, courtesy of Sharethis (value "sharethis_cookie_test"). This cookie is causing all sorts of session issues for me specifically on Chrome. Despite removing the sharethis plugin from my site, this pesky ...

javascripthtmlgoogle-chromecookiessharethis

What is the best way to add a dropdown menu in front of a button?

I have a div containing a dropdown list of items and I want the user to be able to add more dropdown lists by clicking a button. Although I managed to do this, the issue I'm encountering is that the new list gets added after the button instead of ben ...

javascriptjqueryhtmldom

Vue.js 2 view failing to update after modifying data in Vuex state

Greetings, I am currently working on developing a table to monitor the validation status of multiple items. Below is the VueX store configuration: mutations: { ..., set_scaninfos: function (state, scaninfos) { Vue.set(state, 'scaninfos&a ...

javascriptvue.jsvuejs2storevuex

Error: Trying to use 'search' before it has been initialized causes a ReferenceError

Every time I run my code, I encounter this reference error but I can't figure out what's causing it. ReferenceError: Cannot access 'search' before initialization App C:/Users/GS66/Desktop/IN20/IFN666/week4/src/App.js:60 57 | 58 | expor ...

javascriptreactjsreferenceerror

Determine using Javascript or jQuery whether the value of input1 is greater than the value of input2

Ensuring that Value1 is always greater than Value2 in a form submission is crucial. If Value1 becomes greater than or equal to Value2, an error message should be displayed and the form submission should not be processed. Below is the code for the form: & ...

javascriptphpjquerycodeigniter

Click event triggering smooth scrolling

I am currently working on implementing a smooth scrolling effect using the React JavaScript library without relying on jQuery. My goal is to ensure that when a user clicks on a link, they are directed to the specific section of the page seamlessly. The f ...

javascriptreactjs

Is there a way to pull information from a string and organize it into a two-dimensional array?

Utilizing the axios library, I am pulling data from a website. Unfortunately, the data being fetched is in HTML format. The extracted data looks like this: 1 Agartala VEAT 120830Z 23004KT 5000 HZ SCT018 SCT025 34/27 Q1004 NOSIG= 2 Ahmedabad VAAH 120830Z 23 ...

javascriptarraysreactjs

Difficulty adapting CSS using JavaScript

I am looking to adjust the padding of my header to give it a sleeker appearance on the page. I attempted to achieve this with the code below, but it seems to have no effect: function openPage() { var i, el = document.getElementById('headbar' ...

javascripthtmlcssdom

Send a complex Json object in a POST request

Hey guys, I'm new to the world of web development and I've encountered a challenging issue. I have a complex object with numerous fields filled by a JavaScript function that needs to be passed to a C# HttpPost Call. I attempted to use JSON.Strin ...

javascriptc#jsonajaxhttp-post

What is the best way to turn off autocorrect in a textarea on IE11 without turning off spellcheck?

In my experience, disabling the spellcheck attribute seems to solve the auto-correct issue, but it also eliminates the underlining of misspelled words. <textarea id="TextArea1" spellcheck="false"></textarea> I prefer to keep spellcheck enabl ...

javascripthtmlinternet-explorer

Using multiple parameters in a GET request

url: "../api/api.php? fxn:" + encodeURIComponent(getCatergories) & "jsn"= +encodeURIComponent{"code":"1"}, var app = angular.module('MyTutorialApp',[]); app.controller("MainController", function($scope,$http){ $scope.loadpeople= functio ...

javascriptjqueryajaxjsonangularjs

Receiving Request URL from XMLHttpRequest in PHP

I'm currently facing a dilemma as I work on a JavaScript script that is responsible for sending data from one of my forums to the server where a PHP script runs. The goal is to have the PHP script determine which JS output should be generated based on ...

javascriptphpajax

I keep encountering an error in the where clause when trying to update MySQL. What could be

I encountered an issue stating Unknown column 'CR0001' in 'where clause' while executing my code. Strangely, the error seems to be related to the id_scooter column rather than CR0001. Below is the snippet of my code: var update = "UPDA ...

javascriptmysqlnode.js

Stop the Text Table from being highlighted

My webpage includes a dynamic table where users can select multiple rows. jQuery events and CSS are utilized to provide visual feedback when a row is selected. However, pressing the shift key sometimes causes text to become highlighted, which is not idea ...

javascriptjqueryhtml

Switch between toggling tasks in Vue does not seem to be functioning as

I'm reaching out again because I'm struggling to figure out what I'm doing wrong. I followed a tutorial step by step but the code isn't working as expected. My goal is to toggle between marking tasks as done and not done. When I test th ...

javascriptvue.jsvuejs2