feat: introduce vue-email for templating with tailwind (#4358)

* feat: start on vue-email set up

* feat: email rendering and base template

* refactor: body slot only

* feat: templates

* fix: lint

* fix: build process

* fix: default import issue

* feat: continue making emails

* feat: update address

* feat: new templates

* feat: email temp page viewer

* fix: lint

* fix: reset password heading

* fix: lint

* fix: qa issues

apps/frontend/nuxt.config.ts

@@ -1,6 +1,7 @@
 import { pathToFileURL } from 'node:url'
 
 import { match as matchLocale } from '@formatjs/intl-localematcher'
+import serverSidedVue from '@vitejs/plugin-vue'
 import { consola } from 'consola'
 import { promises as fs } from 'fs'
 import { globIterate } from 'glob'
@@ -111,6 +112,17 @@ export default defineNuxtConfig({
 		],
 	},
 	hooks: {
+		async 'nitro:config'(nitroConfig) {
+			const emailTemplates = Object.keys(
+				await import('./src/emails/index.ts').then((m) => m.default),
+			)
+
+			nitroConfig.prerender = nitroConfig.prerender || {}
+			nitroConfig.prerender.routes = nitroConfig.prerender.routes || []
+			for (const template of emailTemplates) {
+				nitroConfig.prerender.routes.push(`/email/${template}`)
+			}
+		},
 		async 'build:before'() {
 			// 30 minutes
 			const TTL = 30 * 60 * 1000
@@ -435,6 +447,10 @@ export default defineNuxtConfig({
 	},
 	nitro: {
 		moduleSideEffects: ['@vintl/compact-number/locale-data'],
+		rollupConfig: {
+			// @ts-expect-error it's not infinite.
+			plugins: [serverSidedVue()],
+		},
 	},
 	devtools: {
 		enabled: true,
@@ -453,6 +469,13 @@ export default defineNuxtConfig({
 				'Critical-CH': 'Sec-CH-Prefers-Color-Scheme',
 			},
 		},
+		'/email/**': {
+			prerender: true,
+			headers: {
+				'Content-Type': 'text/html',
+				'Cache-Control': 'public, max-age=3600',
+			},
+		},
 	},
 	compatibilityDate: '2024-07-03',
 	telemetry: false,