How to add selelct and Multiselect input in vuejs 3 using CDN
Here are step-by-step instructions for adding select and multiselect inputs in Vue.js 3 using CDN.
Include vue.js and vueform-multiselect Library in between head tag of HTML page
<!-- Vue 3 CDN -->
<script src="https://unpkg.com/vue@3.4.15/dist/vue.global.js"></script>
<!-- vueform-Multiselect 2.6.6 CDN -->
<link rel="stylesheet" href="https://unpkg.com/@vueform/multiselect@2.6.6/themes/default.css">
<script src="https://unpkg.com/@vueform/multiselect@2.6.6/dist/multiselect.global.js"></script>
Add <Multiselect> field within the app container after the <body> tag.
<div id="app">
<div style="text-align: center; max-width: 400px; margin: 0 auto;">
<div class="single">
<h3 id="single">#1 - Single select</h3>
<Multiselect
v-model="single.value"
v-bind="single"
></Multiselect>
</div>
<div class="multiselectwrap">
<h3 id="multiselect">#2 - Multiselect</h3>
<Multiselect v-model="multiselect.value" v-bind="multiselect"
></Multiselect>
</div>
</div>
</div>
Create Vue App
Add JavaScript code to create a Vue app before the </body> tag.
<script>
const app = Vue.createApp({
data: () => ({
single: {
value: 0,
options: ['Batman', 'Robin', 'Joker']
},
multiselect : {
mode: 'tags',
value: ['batman'],
closeOnSelect: false,
options: [
{ value: 'batman', label: 'Batman' },
{ value: 'robin', label: 'Robin' },
{ value: 'joker', label: 'Joker' },
],
searchable: true,
createOption: true
}
})
});
app.component('Multiselect', VueformMultiselect)
app.mount('#app')
</script>
With these simple steps, you can add select and multiselect inputs in Vue.js 3 using CDN. Customize the options and styling based on your needs. Happy coding!
Certainly! Here is the full code that includes both the Select Input and Multiselect Input examples using Vue.js 3 and vueform-multiselect with CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 with Vueform-Multiselect </title>
<!-- Vue 3 CDN -->
<script src="https://unpkg.com/vue@3.4.15/dist/vue.global.js"></script>
<!-- Vue-Multiselect 2.6.6 CDN -->
<link rel="stylesheet" href="https://unpkg.com/@vueform/multiselect@2.6.6/themes/default.css">
<script src="https://unpkg.com/@vueform/multiselect@2.6.6/dist/multiselect.global.js"></script>
</head>
<body>
<div id="app">
<div style="text-align: center; max-width: 400px; margin: 0 auto;">
<div class="single">
<h3 id="single">#1 - Single select</h3>
<Multiselect
v-model="single.value"
v-bind="single"
></Multiselect>
</div>
<div class="multiselectwrap">
<h3 id="multiselect">#2 - Multiselect</h3>
<Multiselect v-model="multiselect.value" v-bind="multiselect"
></Multiselect>
</div>
</div>
</div>
<script>
// Ensure that the component is defined globally before creating the Vue app
const app = Vue.createApp({
data: () => ({
single: {
value: 0,
options: ['Batman', 'Robin', 'Joker']
},
multiselect : {
mode: 'tags',
value: ['batman'],
closeOnSelect: false,
options: [
{ value: 'batman', label: 'Batman' },
{ value: 'robin', label: 'Robin' },
{ value: 'joker', label: 'Joker' },
],
searchable: true,
createOption: true
}
})
});
app.component('Multiselect', VueformMultiselect)
app.mount('#app')
</script>
</body>
</html>
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.