Начал писать фичу с прелоадером, но vue dev tools не работают

package-lock.json

@@ -7,6 +7,7 @@
             "dependencies": {
                 "@mdi/font": "^7.4.47",
                 "axios": "^1.6.4",
+                "pinia": "^2.1.7",
                 "typescript": "^5.3.3",
                 "vue": "^3.4.14",
                 "vuetify": "^3.4.10"
@@ -605,6 +606,11 @@
                 "@vue/shared": "3.4.14"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.1",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+            "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.4.14",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.14.tgz",
@@ -906,6 +912,56 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/pinia": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+            "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+            "dependencies": {
+                "@vue/devtools-api": "^6.5.0",
+                "vue-demi": ">=0.14.5"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.4.0",
+                "typescript": ">=4.4.4",
+                "vue": "^2.6.14 || ^3.3.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/pinia/node_modules/vue-demi": {
+            "version": "0.14.7",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+            "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/postcss": {
             "version": "8.4.33",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",

package.json

@@ -15,6 +15,7 @@
     "dependencies": {
         "@mdi/font": "^7.4.47",
         "axios": "^1.6.4",
+        "pinia": "^2.1.7",
         "typescript": "^5.3.3",
         "vue": "^3.4.14",
         "vuetify": "^3.4.10"

resources/stores/Schedule.js

@@ -0,0 +1,15 @@
+import {defineStore} from "pinia";
+
+export const useScheduleStore = defineStore('Schedule', {
+    state: () => ({
+        fetchingDates: true,
+        fetchingTable: true,
+        fetchingLinks: true
+    }),
+    getters: {
+
+    },
+    actions: {
+
+    },
+})

resources/views/Preloader/Preloader.vue

@@ -0,0 +1,22 @@
+<template>
+    <v-dialog
+        class=""
+        :model-value="true"
+        width="auto"
+        persistent
+    >
+        <PreloaderWindow/>
+    </v-dialog>
+</template>
+
+<script>
+import PreloaderWindow from "./PreloaderWindow.vue";
+
+export default {
+    name: "Preloader"
+}
+</script>
+
+<style scoped>
+
+</style>

resources/views/Preloader/PreloaderWindow.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="window glass rounded-lg d-flex flex-column justify-center align-center px-2">
+        <v-progress-linear indeterminate rounded="lg"/>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PreloaderWindow"
+}
+</script>
+
+<style scoped>
+
+</style>

resources/views/Schedule.vue

@@ -1,12 +1,10 @@
 <template>
-    <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
+    <v-sheet class="mt-5 mb-5 rounded-lg w-75">
-        <v-sheet class="mt-5 mb-5 rounded-lg w-75">
+        <p class="text-h3 ma-5">Расписание стримов</p>
-            <p class="text-h3 ma-5">Расписание стримов</p>
+        <p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
-            <p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
+        <ScheduleTable/>
-            <ScheduleTable/>
+        <p class="text-h3 ma-5">Ссылочки</p>
-            <p class="text-h3 ma-5">Ссылочки</p>
+        <Links/>
-            <Links/>
-        </v-sheet>
     </v-sheet>
 </template>
 
@@ -14,6 +12,7 @@
 import axios from "axios";
 import ScheduleTable from "./Schedule/ScheduleTable.vue";
 import Links from "./Schedule/Links.vue";
+import {useScheduleStore} from '../stores/Schedule.js';
 
 export default {
     name: "Schedule",
@@ -30,20 +29,16 @@ export default {
     mounted() {
         axios
             .get('/api/v1/dates')
-            .then(response => (this.dates = response.data));
+            .then(response => {
+                this.dates = response.data;
+                useScheduleStore().fetchingDates = false;
+            });
     }
 }
 </script>
 
 <style scoped>
 
-.bg-gradient {
-    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
-    background-size: 200% 200%;
-    animation: gradient 15s ease infinite;
-    height: 100vh;
-}
-
 @keyframes gradient {
     0% {
         background-position: 0 50%;

resources/views/Schedule/Links.vue

@@ -1,5 +1,7 @@
 <script>
     import axios from "axios";
+    import {useScheduleStore} from '../../stores/Schedule.js';
+
     export default {
         name: "Links",
         data: () => ({
@@ -8,7 +10,10 @@
         mounted() {
             axios
                 .get('/api/v1/links')
-                .then(response => (this.links = response.data));
+                .then(response => {
+                    this.links = response.data;
+                    useScheduleStore().fetchingLinks = false;
+                });
         }
     }
 </script>

resources/views/Schedule/ScheduleTable.vue

@@ -1,5 +1,7 @@
 <script>
     import axios from "axios";
+    import {useScheduleStore} from '../../stores/Schedule.js';
+
     export default {
         name: "ScheduleTable",
         data: () => ({
@@ -14,7 +16,10 @@
         mounted() {
             axios
                 .get('/api/v1/schedules')
-                .then(response => (this.schedules = response.data));
+                .then(response => {
+                    this.schedules = response.data;
+                    useScheduleStore().fetchingTable = false;
+                });
         }
     }
 </script>

resources/views/Welcome.vue

@@ -1,18 +1,34 @@
 <template>
     <v-app>
-        <Schedule></Schedule>
+        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
+            <Preloader v-if="fetching.value" />
+            <Schedule v-else />
+        </v-sheet>
     </v-app>
 </template>
 
 <script>
-import Schedule from "./Schedule.vue"
+import Schedule from "./Schedule.vue";
+import Preloader from "./Preloader/Preloader.vue";
+import {ref} from "vue";
+import {useScheduleStore} from '../stores/Schedule.js';
 
 export default {
     name: "Welcome",
-    components: {Schedule}
+    components: {Preloader, Schedule},
+    data: () => ({
+        fetching: ref(useScheduleStore().fetchingDates || useScheduleStore().fetchingLinks || useScheduleStore().fetchingTable)
+    })
 }
 </script>
 
 <style scoped>
 
+.bg-gradient {
+    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
+    background-size: 200% 200%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+}
+
 </style>

resources/welcome.js

@@ -1,5 +1,6 @@
 import './js/bootstrap';
-import {createApp} from 'vue'
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './views/Welcome.vue'
 import { createVuetify } from 'vuetify'
 import 'vuetify/styles'
@@ -7,9 +8,11 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import '@mdi/font/css/materialdesignicons.css'
 
+const pinia = createPinia();
+
 const vuetify = createVuetify({
     components,
     directives
-})
+});
 
-createApp(App).use(vuetify).mount("#app")
+createApp(App).use(vuetify).use(pinia).mount("#app");