Guide to integrating external Vue npm components into your project

After diving into Vue.js, I am now incorporating it into an existing project without the option of using .vue files. This is a standalone setup not utilizing webpack, which requires the files to be stored locally for functionality. In my current scenario, I have resorted to employing online .js files.

The specific datepicker library I aim to implement can be found here: https://github.com/mengxiong10/vue2-datepicker

However, I have encountered an issue where the datepicker fails to render as expected.

I am struggling with registering the component properly and have experimented with various methods without success. Any assistance from someone knowledgeable in this area would be greatly appreciated.

Thank you in advance for any help offered!

Here is a simplified code snippet illustrating my attempts:

<!DOCTYPE html>
<html>
<head>
    <title>Vue test</title>
</head>
<body>

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>

<div id="app">
    <input type="text" v-model="Data.SomeText" />
    <date-picker v-model="Data.SomeDate"></date-picker>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: { Data: '' },
        components: {
            'date-picker': DatePicker
        },
        created: function () {
            this.Data = {"SomeText":"Hey","SomeDate":"2017-12-24T00:00:00"};
        }
    });
</script>

</body>
</html>

Answer №1

Within the vue2-datepicker script resides a CommonJS module with a default export. To access it, you must explicitly specify that you are accessing the default export:

components: {
  'date-picker': DatePicker.default
},

Here's a working demo:

var vm = new Vue({
  el: '#app',
  data: {
    Data: ''
  },
  components: {
    'date-picker': DatePicker.default
  },
  created: function() {
    this.Data = {
      "SomeText": "Hey",
      "SomeDate": "2017-12-24T00:00:00"
    };
  }
});
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8a8999bcced2c9d2cdcf">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>

<body>
  <div id="app">
    <date-picker v-model="Data.SomeDate"></date-picker>
  </div>
</body>


On a side note, consider adopting webpack environment for development (you can utilize pre-made templates: https://github.com/vuejs-templates/webpack-simple). Initially, there might be a learning curve involving npm and command line usage, but the benefits in the long run include Single File Components support, easier plugin importing, and other advantages.

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

Having trouble with the onClick function in React?

Here is my simple react code: Main.js: var ReactDom = require('react-dom'); var Main = React.createClass({ render: function(){ return( <div> <a onClick={alert("hello world")} >hello</a> </ ...

Error message indicating that `vue-loader` could not be located when attempting to run `npm run

I keep encountering an issue when trying to run npm run dev. I'm getting the following error and have no idea how to resolve it. I've tried reinstalling Node.js to the latest version and reinstalling all packages via the command line: [webpack-cl ...

Exploring the depths of Mongoose queries with recursive parent references

I'm attempting to replicate the functionality of this MongoDB example using Mongoose, but it seems more complicated in Mongoose. Am I trying to force a square peg into a round hole? This source is taken from http://www.codeproject.com/Articles/521713 ...

"Effortlessly move elements with HTML5 drag and drop functionality from either direction

I'm working on an application that requires Html5 Drag and Drop functionality, which is currently functioning well. However, in the app, there may be instances where a dropped item is no longer needed and I want to allow users to re-drag and drop it b ...

Is there a way to display the "back button" on a subview?

As a newcomer to Ionic, I am finding navigation to be the most challenging aspect. My app has two tabs - "Dashboard" and "Friends". When I click on the Dashboard tab, I want it to navigate to a subview called "subview_dash", without displaying the tabs in ...

Trouble arises when attempting to establish an isolated scope within Angular alongside UI Bootstrap

My table of data is set up with AngularJS, and one of the columns is calculated using a function in the controller. On my webpage, I have a button that opens a modal. When I use UI Bootstrap to open the modal, it creates a new isolated scope (child of the ...

Converting JavaScript code from Jade into EJS framework

I am currently working on converting code from Jade to EJS and could use some assistance. I have started the translation process, but I'm not entirely confident in my approach. Additionally, I find the syntax used in EJS to be confusing compared to tr ...

Loading input datalist in Firefox postponed

My goal is to implement an input field for a username that allows users to select from a wide range of names/usernames. I want them to be able to enter a partial string from the name or username. Instead of loading the entire list initially, I aim to load ...

Ensure a field is required if the integer field is not empty in Angular Schema Form

I am currently working on setting up a form using Angular JSON Schema Form. My goal is to make one field (dropdown1) required only when another field (number1) has been filled in. I have managed to successfully get the following form + schema to function p ...

capture the element with the specified #hash using Jquery

Illustration: Assuming I visit google.com/#search function checkHash(){ if(window.location.hash != hash) { $("elementhashed").animate( { backgroundColor: "#ff4500" }, 1 ).animate( { backgroundColor: "FFF" }, 1500 ); hash = window.location.hash; } t=se ...

Is there a way to assign the scroll event context to `document.body` instead of `window`?

Discovery As I delved into the intricacies of web development, I stumbled upon a curious observation. In a particular MDN page, I noticed that the left and right sidebars had their scrollbars contained within themselves. However, the content block's ...

The issue with mocking collections using JSON files in Backbone is that it is not properly triggering the success callbacks in

For my project, I am exploring the use of .json files to mock GET requests in a backbone collection. Here is an example of my sample file: [ { "id": '11111', "name": "Abdominal Discomfort", "favori ...

How can I insert my JavaScript functions into the JSF event queue for processing?

Is there a way to tap into the default JSF ajax(JS) event queuing system in order to execute events sequentially? I am attempting to align my JS events with this queue. Is there a global variable that can facilitate this synchronization? ...

What is the best way to implement Angular 2 slash routes in conjunction with Node Express?

I have defined some routes in my App component: @routeConfig([ { path:'login', name: 'Login', component: Login }} Additionally, I have a basic node express loader set up: var express = require('express'); var ...

I am unable to align the image in the center, what could be causing it not to center properly?

Why does my code center in mobile view but not in Desktop? How can I solve this issue? I have tried using display: block; margin: auto; width:100%; and text-align: center;, but it did not work. let $slides, interval, $selectors, $btns, currentIndex, ne ...

Error in AngularJS ng-repeat syntax

As a newcomer to AngularJS, I ventured into creating a Bootstrap form with a loop but encountered an error. What could be the mistake I made? <form class="form-horizontal" role="form" name="newForm" novalidate ng-controller="newFormController"> < ...

What is the reason in AngularJS for requiring directive attributes to be hyphen-separated while their scope variables are camelCased?

Here is an example in Html: <!-- Note 'display-when' is hyphenated --> <wait-cursor display-when="true"></wait-cursor> Then, when defining it in the directive: scope: { // Note 'displayWhen' is camelCased show: ...

Ways to separate my json object into multiple variables

I am looking to extract the following data: name, meetup, tag from my object and store them in separate variables or objects. Here is my json object: var data = { "MY_ID": 1, "module": [ { "name": "Manch ...

How to simultaneously play a sound and display an alert message using JavaScript

My JavaScript code attempts to play a sound and then display an alert, but the alert always shows up first. When I click 'ok', the sound plays. How can I make it so that the sound plays before the alert appears? <script> function play() { ...

Internet Explorer: JQuery deselects radio button upon its selection

One issue I have encountered is with a listener for a group of radio buttons in IE. When a radio button is selected, it triggers a database call to populate a select element. However, in IE, after the code runs successfully, the selected radio button becom ...