Render your Vite Application next to Directus: easy as hell.
directus-extension-ssr@^2.0.0 => @directus/sdk@^11.0.0
directus-extension-ssr@1.0.11 => @directus/sdk@^10.3.0
Install directus-extension-ssr into your self-hosted directus instance.
cd /path/to/your/directus/installation
npm install directus-extension-ssrSetup your vite project like you normaly do. (Directly in your directus self-hosted project).
But your src/main.ts file should look similar like this:
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
},)Next add DirectusSSR in vite.config.ts as a plugin.
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(),
],
})Disable directus ROOT_REDIRECT through your directus .env / config.js / config.ts whatever
[...]
ROOT_REDIRECT=false
[...]Be sure, that your index.html includes the following COMMENTS (--app-html-- and --preload-links--) exactly as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<!--preload-links-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>Just use inject('directus') anywhere in setup function.
If you want to use Pinia, do something like that:
// 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))
})You can set the environment variable SSR_ENV to "development" through your directus .env / config.js / config.ts file or via cli.
Have fun with HMR 🔥
SSR_ENV=development npx directus startLike in any other vite ssr project, extend your package.json with the following vite build scripts:
"scripts": {
"build": "pnpm run build:client && pnpm run build:server",
"build:client": "vite build --outDir dist/client --ssrManifest",
"build:server": "vite build --outDir dist/server --ssr src/main.ts"
}
after build - run:
npx directus start
easy as hell 😈
Check out: examples/app
git clone git@github.com:domsen123/directus-extension-ssr.git
cd directus-extension-ssr
pnpm build && pnpm app:bootstrapdev mode:
pnpm app:devprod mode:
pnpm app:build && pnpm app:startGot to example application: Application
Go to directus admin dashboard: Directus Dashboard