Connecting VUE components in HTML?

Question

Vue.js

Hello! Please tell me - how to connect vue components in a regular html file? For example:
https://vuejsexamples.com/lightweight-and-mobile-f...
This is a calendar. But the connection goes like this:

<template>
    <date-pick v-model="date"></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
import 'vue-date-pick/dist/vueDatePick.css';

export default {
    components: {DatePick},
    data: () => ({
        date: '2019-01-01'
    })
};
</script>

But I don't understand how I can set it all up just in a regular html file.... I'm not very familiar with Vue yet.

Answer 1

in normal html file

You mean without using build systems?
Well, include the code and styles:

<script src="vue-date-pick-master/dist/vueDatePick.js"></script>
<link href="vue-date-pick-master/dist/vueDatePick.css" rel="stylesheet">

Everything, the component will be available through the VueDatePick variable.
Then you can specify it in components:

components: {
  VueDatePick,
},

Or register globally:
Vue.component('date-pick', VueDatePick);