import { handler } from 'directus-extension-ssr'
import App from './App.vue'

export default handler(App, {
  routerType: 'vue-router', // or 'unplugin-vue-router'
  routerOptions: {
    routes: [
      { path: '/', component: () => import('./pages/Home.vue') },
      { path: '/about', component: () => import('./pages/About.vue') },
    ],
    // extendRoutes: () => setupLayouts(routes) => if you want to use 'unplugin-vue-router' with 'vite-plugin-vue-layouts'! But don not forget pnpm i -D vite-plugin-vue-layouts
  }
}, async (ctx) => {
  // Add your custom logic here
  // register pinia for example
  // register vuetify
  // do what ever you want
},)

import path from 'node:path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import DirectusSSR from 'directus-extension-ssr/plugin'

export default defineConfig({
  plugins: [
    DirectusSSR(),
  ],
})

// src/modules/pinia.ts
import { directusSSRPlugin } from 'directus-extension-ssr/utils'

export const install: UserModule = (ctx) => {
  const pinia = createPinia()

  pinia.use(p => directusSSRPlugin(p, ctx))

  ctx.app.use(pinia)
}

// src/pinia.d.ts
declare module 'pinia' {
  export interface PiniaCustomProperties {
    directus: import('directus-extension-ssr/types').AppDirectusClient
  }
}

// src/main.ts
export default handler(App, {
  routerOptions: {
    routes: [
      { path: '/', component: () => import('./pages/Home.vue') }
    ],
    // or
    // routes: setupLayouts(routes)
  }
}, async (ctx) => {
  // install all modules under `modules/`
  Object.values(import.meta.glob < { install: UserModule } > ('./modules/*.ts', { eager: true }))
    .forEach(i => i.install?.(ctx))
})