Vue 3 как использовать Datepicker

Question

https://github.com/icehaunter/vue3-datepicker

Существует готовый компонент Datepicker, хочу его запустить и использовать на своей странице. Не пойму как это сделать. У меня два подхода сейчас тестируется.

У меня обычная html страница и я подключил Vue таким образом:

<script src="https://unpkg.com/vue@next"></script>

в гитхабе такой пример, но если я его добавлю, то ничего не получится

<template>
  <datepicker v-model="picked" />
</template>


<script>
import Datepicker from '../src/datepicker/Datepicker.vue'
components: {
  Datepicker
},
data(): {
  return {
    picked: new Date();
  }
}
</script>

У меня запущен сервер на node.js и если я просто папку с гитхаба src скопирую в свой приложение с заменой файлов, то у меня выдаст ошибку

Failed to compile.

./src/App.vue Module Error (from ./node_modules/eslint-loader/index.js):

C:\domains\vue\test\src\App.vue 85:15 error You should not use an arrow function to define a watcher vue/no-arrow-functions-in-watch

✖ 1 problem (1 error, 0 warnings)

Answer 1

Компонент который указан, подразумевает импортирование через npm и там же в репозитории сказано

The component is packaged mainly for use with bundlers, if you require a browser build - post an issue.

То есть без сборщика этот компонент нельзя использовать

CodesandBox - вот тут пример работы

Процесс интеграции

Создать проект

vue create my-project
npm i vue3-datepicker (в cmd из папки если что)
Можешь и в App.vue либо создать свой компонент

import Datepicker from 'vue3-datepicker'

Если template нету

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

Если template есть

<Datepicker v-model="date" />

data() {
    return {
      date: new Date(),
    };
  },
components: {
    Datepicker,
  },

Вот полный код

<script>
import Datepicker from "vue3-datepicker";
export default {
  name: "App",
  data() {
    return {
      date: new Date(),
    };
  },
  components: {
    Datepicker,
  },
  
};
</script>

И пользуйся докой Vue 3 на русском

БЛОГ НА HUSL

Vue 3 как использовать Datepicker

Ответы (1 шт):