デイトピッカー flatpickr のラッパーコンポーネントライブラリのラッパー SFC を作る (Laravel 6 の Vue.js 3 の SPA 環境)

diff --git a/laravel/package.json b/laravel/package.json
index 89c9726..81998a8 100644
--- a/laravel/package.json
+++ b/laravel/package.json
@@ -32,6 +32,7 @@
         "select2": "^4.1.0-rc.0",
         "select2-theme-bootstrap4": "^1.0.0",
         "vue": "^3.0.11",
+        "vue-flatpickr-component": "^9.0.3",
         "vue-loader": "^16.2.0",
         "vue-router": "^4.0.6",
         "vue-template-compiler": "^2.6.12",

diff --git a/laravel/resources/js/router/index.js b/laravel/resources/js/router/index.js
index eacc035..7f7c22e 100644
--- a/laravel/resources/js/router/index.js
+++ b/laravel/resources/js/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import ExampleComponent from "../components/ExampleComponent.vue";
 import SampleDropzone from "../views/SampleDropzone.vue";
+import SampleVueFlatpickr from "../views/SampleVueFlatpickr.vue";
 import SampleSelect2 from "../views/SampleSelect2.vue";
 import Vue3Dropzone from "../views/Vue3Dropzone.vue";
 const Home = { template: "<div>Home</div>" };
@@ -22,6 +23,11 @@ const routes = [
     name: "SampleDropzone",
     component: SampleDropzone,
   },
+  {
+    path: "/sample_vue_flatpickr",
+    name: "SampleVueFlatpickr",
+    component: SampleVueFlatpickr,
+  },
   {
     path: "/sample_select2",
     name: "SampleSelect2",

<template>
  <div class="container">
    <h1>SampleVueFlatpickr</h1>
    <basee-vue-flatpickr v-model="date1" />
    <basee-vue-flatpickr v-model="date2" />
  </div>
</template>

<script>
import BaseeVueFlatpickr from "../components/BaseVueFlatpickr.vue";
import { ref } from "vue";

export default {
  name: "SampleVueFlatpickr",
  components: { BaseeVueFlatpickr },
  setup() {
    return {
      date1: ref(""),
      date2: ref(""),
    };
  },
};
</script>

<template>
  <flat-pickr
    :config="config"
    :model-value="modelValue"
    @update:modelValue="updateModelValue"
  ></flat-pickr>
</template>

<script>
import { Japanese } from "flatpickr/dist/l10n/ja.js";
import flatPickr from "vue-flatpickr-component";

export default {
  name: "BaseVueFlatpickr",
  components: { flatPickr },
  props: {
    modelValue: {
      default: null,
      required: true,
      validator(value) {
        return (
          value === null ||
          value instanceof Date ||
          typeof value === "string" ||
          value instanceof String ||
          value instanceof Array ||
          typeof value === "number"
        );
      },
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    Japanese.firstDayOfWeek = 1;
    const config = {
      locale: Japanese,
    };

    const updateModelValue = (modelValue) => {
      emit("update:modelValue", modelValue);
    };

    return { config, updateModelValue };
  },
};
</script>

// flatpickr
@import "~flatpickr/dist/flatpickr.css";
/* 日曜日：赤 */
.flatpickr-calendar
  .flatpickr-innerContainer
  .flatpickr-weekdays
  .flatpickr-weekday:nth-child(7n),
.flatpickr-calendar
  .flatpickr-innerContainer
  .flatpickr-days
  .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
  color: red;
}

/* 土曜日：青 */
.flatpickr-calendar
  .flatpickr-innerContainer
  .flatpickr-weekdays
  .flatpickr-weekday:nth-child(6),
.flatpickr-calendar
  .flatpickr-innerContainer
  .flatpickr-days
  .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n
    -
    1) {
  color: blue;
}