first

src/plugins/cache-headers.ts

@@ -0,0 +1,23 @@
+import { definePlugin } from '/@src/utils/plugins'
+
+export default definePlugin(async ({ event, router }) => {
+  if (!event) return
+
+  const [getRequestURL, setResponseHeader] = await import('h3').then(m => [
+    m.getRequestURL,
+    m.setResponseHeader,
+  ] as const)
+
+  const url = getRequestURL(event)
+  if (!url?.pathname) return
+
+  const route = router.resolve(url.pathname)
+  if (!route) return
+
+  if (route.meta.requiresAuth) {
+    setResponseHeader(event, 'Cache-Control', 'private, max-age=3600, stale-while-revalidate=3600')
+  }
+  else {
+    setResponseHeader(event, 'Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800')
+  }
+})

src/plugins/darkmode.ts

@@ -0,0 +1,6 @@
+import { createDarkmode } from '/@src/composables/darkmode'
+import { definePlugin } from '/@src/utils/plugins'
+
+export default definePlugin(({ app }) => {
+  app.use(createDarkmode())
+})

src/plugins/data-loader.ts

@@ -0,0 +1,11 @@
+import { definePlugin } from '/@src/utils/plugins'
+import { DataLoaderPlugin } from 'vue-router/auto'
+
+/**
+ * Enable Vue Data Loader plugin from unplugin-vue-router
+ *
+ * @see https://uvr.esm.is/rfcs/data-loaders/
+ */
+export default definePlugin(({ app, router }) => {
+  app.use(DataLoaderPlugin, { router })
+})

src/plugins/directives.ts

@@ -0,0 +1,15 @@
+import { definePlugin } from '/@src/utils/plugins'
+import { vPreloadLink } from '/@src/directives/preload-link'
+import { vTooltip } from '/@src/directives/tooltip'
+import { vBackground } from '/@src/directives/background'
+
+export default definePlugin(({ app }) => {
+  // register global v-preload-link directive
+  app.directive('preload-link', vPreloadLink)
+
+  // register global v-tootltip directive
+  app.directive('tooltip', vTooltip)
+
+  // register global v-background directive
+  app.directive('background', vBackground)
+})

src/plugins/i18n.ts

@@ -0,0 +1,19 @@
+import { definePlugin } from '/@src/utils/plugins'
+import { createI18n } from 'vue-i18n'
+
+/**
+ * messages are generated using vite-plugin-i18n
+ * each .json files located in the ./src/locales are registered in messages
+ * @see https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+ */
+import messages from '@intlify/unplugin-vue-i18n/messages'
+
+export default definePlugin(({ app }) => {
+  const defaultLocale = useStorage('locale', 'en')
+  const i18n = createI18n({
+    locale: defaultLocale.value,
+    messages,
+  })
+
+  app.use(i18n)
+})

src/plugins/notyf.ts

@@ -0,0 +1,6 @@
+import { createNotyf } from '/@src/composables/notyf'
+import { definePlugin } from '/@src/utils/plugins'
+
+export default definePlugin(async ({ app }) => {
+  app.use(createNotyf())
+})

src/plugins/nprogress.ts

@@ -0,0 +1,17 @@
+import { definePlugin } from '/@src/utils/plugins'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+export default definePlugin(({ router }) => {
+  if (import.meta.env.SSR) {
+    return
+  }
+
+  NProgress.configure({ showSpinner: false })
+  router.beforeEach(() => {
+    NProgress.start()
+  })
+  router.afterEach(() => {
+    NProgress.done()
+  })
+})

src/plugins/session-check.ts

@@ -0,0 +1,74 @@
+import { definePlugin } from '/@src/utils/plugins'
+
+/**
+ * Here we are setting up two router navigation guards
+ * (note that we can have multiple guards in multiple plugins)
+ *
+ * We can add meta to pages either by declaring them manualy in the
+ * routes declaration (see /@src/router.ts)
+ * or by adding a <route> tag into .vue files (see /@src/pages/sidebar/dashboards.ts)
+ *
+ * <script setup lang="ts">
+ * definePage({
+ *   meta: {
+ *     requiresAuth: true,
+ *   },
+ * })
+ * </script>
+ *
+ * <template>
+ *  // HTML content
+ * </template>
+ */
+export default definePlugin(async ({ router, pinia, event }) => {
+  const userSession = useUserSession(pinia)
+  const token = useUserToken(event)
+  const $fetch = useApiFetch(event)
+
+  // 1. Load user profile if token is present.
+  // When using SSR, it should be hydrated from the server
+  // if (token.value && !userSession.user) {
+  //   try {
+  //     // Do api request call to retreive user profile.
+  //     // Note that the api is provided with json-server
+  //     // await api.tokenValid(userSession.user.value.bizNo)
+  //     console.log('me')
+  //     const user = await $fetch('/api/business/me')
+  //     userSession.setUser(user)
+  //   }
+  //   catch (err) {
+  //     // Delete stored token if it fails
+  //     token.value = undefined
+  //   }
+  // }
+
+  // 2. If the page requires auth, check if user is logged in
+  // if not, redirect to login page.
+  router.beforeEach(async (to) => {
+    console.log('in')
+    const token = useUserToken()
+
+    if(to.meta.requiresAuth) {
+      try {
+        const user = await $fetch('/api/business/me')
+        userSession.setUser(user)
+      }
+      catch (err: any) {
+        // Delete stored token if it fails
+        userSession.logoutUser()
+        token.value = undefined
+      }
+      if (!token.value) {
+        return {
+          name: '/auth/login',
+          query: { redirect: to.fullPath },
+        }
+      }
+    }
+    else {
+      if (userSession.user !== undefined) {
+        router.replace('/navbar/dashboards')
+      }
+    }
+  })
+})

src/plugins/v-calendar.ts

@@ -0,0 +1,22 @@
+import { definePlugin } from '/@src/utils/plugins'
+import 'v-calendar/dist/style.css'
+
+export default definePlugin(({ app }) => {
+  app.component(
+    'VCalendar',
+    defineAsyncComponent({
+      loader: () => import('v-calendar').then(mod => mod.Calendar),
+      delay: 0,
+      suspensible: false,
+    }),
+  )
+
+  app.component(
+    'VDatePicker',
+    defineAsyncComponent({
+      loader: () => import('v-calendar').then(mod => mod.DatePicker),
+      delay: 0,
+      suspensible: false,
+    }),
+  )
+})

src/plugins/vue-tippy.ts

@@ -0,0 +1,12 @@
+import { plugin as VueTippy } from 'vue-tippy'
+
+import { definePlugin } from '/@src/utils/plugins'
+
+export default definePlugin(({ app }) => {
+  app.use(VueTippy, {
+    component: 'Tippy',
+    defaultProps: {
+      theme: 'light',
+    },
+  })
+})

src/plugins/vue3-apexcharts.ts

@@ -0,0 +1,18 @@
+import { definePlugin } from '/@src/utils/plugins'
+import ClientOnly from '/@src/components/ClientOnly.vue'
+
+export default definePlugin(({ app }) => {
+  const ApexChart = defineAsyncComponent({
+    // @ts-expect-error - modules does not have exports field (required by moduleResolution = bundler)
+    loader: () => import('vue3-apexcharts'),
+    suspensible: false,
+  })
+
+  app.component('ApexChart', defineComponent({
+    name: 'ApexChart',
+    inheritAttrs: false,
+    setup(_, { attrs }) {
+      return () => h(ClientOnly, () => h(ApexChart, attrs))
+    },
+  }))
+})

src/plugins/vueform.ts

@@ -0,0 +1,27 @@
+import { defineAsyncComponent } from 'vue'
+
+import { definePlugin } from '/@src/utils/plugins'
+
+export default definePlugin(({ app }) => {
+  // here we are defining a lazy loaded component
+  // that will be imported on demand
+  app.component(
+    // eslint-disable-next-line vue/multi-word-component-names
+    'Multiselect',
+    defineAsyncComponent({
+      loader: () => import('@vueform/multiselect').then(mod => mod.default),
+      delay: 0,
+      suspensible: false,
+    }),
+  )
+
+  app.component(
+    // eslint-disable-next-line vue/multi-word-component-names
+    'Slider',
+    defineAsyncComponent({
+      loader: () => import('@vueform/slider').then(mod => mod.default),
+      delay: 0,
+      suspensible: false,
+    }),
+  )
+})

src/plugins/vuero-context.ts

@@ -0,0 +1,28 @@
+import { type VueroContext, createVueroContext } from '/@src/composables/vuero-context'
+import { definePlugin } from '/@src/utils/plugins'
+
+// augment the initial state type
+declare module '/@server/types' {
+  export interface VueroInitialState {
+    ctx?: VueroContext
+  }
+}
+
+export default definePlugin(({ app, event }) => {
+  const context: VueroContext = {}
+
+  // persist the context object on the server side
+  if (import.meta.env.SSR && event) {
+    event.context.initialState ??= {}
+    event.context.initialState.ctx ??= context
+  }
+
+  // hydrate the context object on the client side
+  if (!import.meta.env.SSR && window.__vuero__?.ctx) {
+    for (const [key, value] of Object.entries(window.__vuero__.ctx)) {
+      context[key] = value
+    }
+  }
+
+  app.use(createVueroContext(context))
+})