chore: updated vue-email package

package.json

@@ -46,13 +46,13 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
+    "@vitejs/plugin-vue": "^5.0.5",
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "json5": "^2.2.3",
     "sirv": "^2.0.4",
     "vue-component-meta": "^2.0.19",
-    "vue-email-edge": "0.8.11-28625178.e947738",
-    "@vitejs/plugin-vue": "^5.0.5"
+    "vue-email-edge": "0.8.11-28627007.a49db55"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.20.0",

playground/components/Hello.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+import { EHeading } from 'vue-email-edge'
+
+</script>
+
+<template>
+  <EHeading class="mx-0 my-[30px] p-0 text-center text-[24px] font-bold text-black"> Test Vue Email components </EHeading>
+</template>

playground/components/Tailwind.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+import { EBody, EButton, EColumn, EContainer, EHead, EHeading, EHr, EHtml, EImg, ELink, EPreview, ERow, ESection, ETailwind, EText } from 'vue-email-edge'
+import { baseUrl } from '../utils/index'
+import Hello from './Hello.vue'
+
+interface Props {
+  invitedByUsername?: string
+  teamName?: string
+  username?: string
+  invitedByEmail?: string
+  inviteLink?: string
+  inviteFromIp?: string
+  inviteFromLocation?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  teamName: 'My project',
+  username: 'John Doe',
+  invitedByEmail: '[email protected]',
+  inviteLink: 'https://vercel.com/teams/invite/foo',
+  inviteFromIp: '172.0.0.1',
+  inviteFromLocation: 'San Francisco, CA',
+})
+
+const previewText = `Join ${props.invitedByUsername} on Vercel`
+</script>
+
+<template>
+  <ETailwind>
+    <EHtml>
+      <EHead />
+      <EPreview>{{ previewText }}</EPreview>
+      <EBody class="bg-white my-auto mx-auto font-sans">
+        <EContainer class="border border-solid border-[#eaeaea] p-[20px] md:p-7 rounded my-[40px] mx-auto max-w-[465px]">
+          <ESection class="mt-[32px]">
+            <EImg :src="baseUrl('/static/vercel-logo.png')" width="40" height="37" alt="Vercel" class="my-0 mx-auto" />
+          </ESection>
+          <Hello />
+          <EHeading class="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
+            Join <strong>{{ teamName }}</strong> on <strong>Vercel</strong>
+          </EHeading>
+          <EText class="text-black text-[14px] leading-[24px]">
+            Hello {{ username }},
+          </EText>
+          <EText class="text-black text-[14px] leading-[24px]">
+            <strong>bukinoshita</strong> (
+            <ELink :href="`mailto:${invitedByEmail}`" class="text-blue-600 no-underline">
+              {{ invitedByEmail }}
+            </ELink>
+            ) has invited you to the <strong>{{ teamName }}</strong> team on <strong>Vercel</strong>.
+          </EText>
+          <ESection>
+            <ERow>
+              <EColumn align="right">
+                <EImg class="rounded-full" src="https://vue-email-demo.vercel.app/static/vercel-user.png" width="64" height="64" />
+              </EColumn>
+              <EColumn align="center">
+                <EImg src="https://vue-email-demo.vercel.app/static/vercel-arrow.png" width="12" height="9" alt="invited you to" />
+              </EColumn>
+              <EColumn align="left">
+                <EImg class="rounded-full" src="https://vue-email-demo.vercel.app/static/vercel-team.png" width="64" height="64" />
+              </EColumn>
+            </ERow>
+          </ESection>
+          <ESection class="text-center mt-[32px] mb-[32px]">
+            <EButton px="20" py="12" class="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center" :href="inviteLink">
+              Join the team
+            </EButton>
+          </ESection>
+          <EText class="text-black text-[14px] leading-[24px]">
+            or copy and paste this URL into your browser:
+            <ELink :href="inviteLink" class="text-blue-600 no-underline">
+              {{ inviteLink }}
+            </ELink>
+          </EText>
+          <EHr class="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
+          <EText class="text-[#666666] text-[12px] leading-[24px]">
+            This invitation was intended for
+            <span class="text-black">{{ username }} </span>.This invite was sent from <span class="text-black">{{ inviteFromIp }}</span> located in
+            <span class="text-black">{{ inviteFromLocation }}</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch
+            with us.
+          </EText>
+        </EContainer>
+      </EBody>
+    </EHtml>
+  </ETailwind>
+</template>

playground/server/api/test.get.ts

@@ -1,16 +1,22 @@
 import { useRender } from 'vue-email-edge'
-import Email from '@/components/Email2.vue'
+import { defineAsyncComponent } from 'vue'
+import Email from '@/components/Tailwind.vue'
 
-
-export default defineEventHandler(async () => {
+export default defineEventHandler(async (event) => {
   try {
     const template = await useRender(Email, {
       // userFirstName: 'John',
       // loginDevice: 'Chrome on Mac OS X',
       // loginLocation: 'Upland, California, United States',
       // loginIp: '47.149.53.167',
       // loginDate: new Date('September 7, 2022, 10:58 am'),
-      userFirstname: 'test',
+      invitedByEmail: '[email protected]',
+      inviteLink: 'https://vercel.com/teams/invite/foo',
+      inviteFromIp: '172.0.0.1',
+      inviteFromLocation: 'San Francisco, CA',
+      invitedByUsername: 'bukinoshita',
+      teamName: 'My project',
+      username: 'John Doe',
     }).catch((error) => {
       console.error(error)
     })
@@ -23,4 +29,21 @@ export default defineEventHandler(async () => {
   catch (error) {
     console.error(error)
   }
+
+  // const body = await readBody(event)
+
+  // const { filename } = body
+
+  // if (!filename) {
+  //   throw createError({
+  //     statusCode: 400,
+  //     statusMessage: 'Filename is required',
+  //   })
+  // }
+
+  // const component = await defineAsyncComponent(() => import(`../../components/${filename}.vue`))
+
+  // const template = await useRender(component)
+
+  // return { html: template.html }
 })

playground/utils/index.ts

@@ -7,3 +7,7 @@ export function getRandomInt(min: number, max: number): number {
 export function getRandomArbitrary(min: number, max: number): number {
   return Math.random() * (max - min) + min
 }
+
+export function baseUrl(path: string): string {
+  return `https://vue-email-demo.vercel.app${path}`
+}