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 class="example">
<h3 id="example-1">#1 - Single select</h3>
<div class="output">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
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 class="output">Data: {{ selDate }}</div>
<div class="example">
<h3 id="example-1">#1 - Single select</h3>
<div class="output">Data: {{ example1.value }}</div>
<Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
</div>`
});
app.mount("#app")
</script>