init: чистый старт Laravel + Vuexy

resources/ts/layouts/blank.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+const { injectSkinClasses } = useSkins()
+
+// ℹ️ This will inject classes in body tag for accurate styling
+injectSkinClasses()
+
+// SECTION: Loading Indicator
+const isFallbackStateActive = ref(false)
+const refLoadingIndicator = ref<any>(null)
+
+// watching if the fallback state is active and the refLoadingIndicator component is available
+watch([isFallbackStateActive, refLoadingIndicator], () => {
+  if (isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.fallbackHandle()
+
+  if (!isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.resolveHandle()
+}, { immediate: true })
+// !SECTION
+</script>
+
+<template>
+  <AppLoadingIndicator ref="refLoadingIndicator" />
+
+  <div
+    class="layout-wrapper layout-blank"
+    data-allow-mismatch
+  >
+    <RouterView #="{Component}">
+      <Suspense
+        :timeout="0"
+        @fallback="isFallbackStateActive = true"
+        @resolve="isFallbackStateActive = false"
+      >
+        <Component :is="Component" />
+      </Suspense>
+    </RouterView>
+  </div>
+</template>
+
+<style>
+.layout-wrapper.layout-blank {
+  flex-direction: column;
+}
+</style>