Right way to declare an external component in a page with vuejs3 CDN-CodePudding

I am an ASL.NET Core developer and I try to use vuejs in order to create some complex forms. In order to learn how to use it I create static html files in order to understand how the components work in vuejs. I have the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue 4 Tutorial</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>

    <script src="https://unpkg.com/vuejs-datepicker"></script>

    <script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
    
    <script>
        const app = Vue.createApp({
            data: () => ({
                example1: {
                  value: 0,
                  options: ['Batman', 'Robin', 'Joker']
                }        
            }),
            template: `<h2>Hello with Vue CDN</h2>
            <vuejs-datepicker></vuejs-datepicker>

            <div >
                <h3 id="example-1">#1 - Single select</h3>
                <div >Data: {{ example1.value }}</div>
                <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
            </div>`
        });
        app.component('Multiselect', VueformMultiselect)
        app.mount("#app")
    </script>
</body>
</html>

In this example I use CDNs for vuejs 3, vuejs-datepicker and multiselect. I made multiselect component to work using the app.component('Multiselect', VueformMultiselect) command. I can understand it because I opened the js file and I found the following code

var VueformMultiselect=function(e,t).......

This has as a result to add a component by using the VueformMultiselect object.

I checked the vuejs-datepicker code and I cannot find something similar in order to declare it in my application. Can someone help me declare the vuejs-datepicker component for my code?

Thanks

CodePudding user response：

You can not use vuejs-datepicker in Vue3, you can try with vue3datepicker :

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css">
<script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script>
  const app = Vue.createApp({
      data: () => ({
          example1: {
            value: 0,
            options: ['Batman', 'Robin', 'Joker'],
          },
          selDate: null
      }),
      components: { Datepicker: Vue3DatePicker,  Multiselect: VueformMultiselect },
      template: 
        `<h2>Hello with Vue CDN</h2>
          <datepicker v-model="selDate"></datepicker>
          <div >Data: {{ selDate }}</div>
          <div >
              <h3 id="example-1">#1 - Single select</h3>
              <div >Data: {{ example1.value }}</div>
              <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
          </div>`
  });
  app.mount("#app")
</script>