chore: fixing issues with buildiing

client/package.json

@@ -22,7 +22,9 @@
     "@types/splitpanes": "^2.2.1",
     "@vueuse/core": "^10.4.1",
     "@vueuse/nuxt": "^10.4.1",
+    "html-to-text": "^9.0.5",
     "nuxt": "^3.8.1",
+    "pretty": "^2.0.0",
     "scule": "^1.0.0",
     "shikiji": "^0.6.3",
     "splitpanes": "^3.1.5"

package.json

@@ -36,6 +36,7 @@
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
     "build:module": "nuxt-module-build build",
     "build:client": "nuxi generate client",
+    "build:play": "nuxi build playground",
     "prepack": "pnpm build",
     "dev": "nuxi dev playground",
     "dev:client": "nuxi dev client",
@@ -46,12 +47,15 @@
     "test:watch": "vitest watch",
     "release": "bumpp"
   },
+  "peerDependencies": {
+    "vue": "3.3.4"
+  },
   "dependencies": {
     "@nuxt/kit": "^3.8.2",
-    "@vue-email/compiler": "npm:@vue-email/[email protected]",
     "defu": "^6.1.3",
-    "sirv": "^2.0.3",
-    "vue-email": "npm:[email protected]"
+    "vue-email": "npm:[email protected]",
+    "@vue-email/compiler": "npm:@vue-email/[email protected]",
+    "sirv": "^2.0.3"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

playground/emails/github-access-token.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+defineProps({
+  username: {
+    type: String,
+    default: 'John Doe',
+  },
+})
+
+const main = {
+  backgroundColor: '#ffffff',
+  color: '#24292e',
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+} as CSSProperties
+
+const container = {
+  width: '480px',
+  margin: '0 auto',
+  padding: '20px 0 48px',
+} as CSSProperties
+
+const title = {
+  fontSize: '24px',
+  lineHeight: 1.25,
+} as CSSProperties
+
+const section = {
+  padding: '24px',
+  border: 'solid 1px #dedede',
+  borderRadius: '5px',
+  textAlign: 'center',
+} as CSSProperties
+
+const text = {
+  margin: '0 0 10px 0',
+  textAlign: 'left',
+} as CSSProperties
+
+const button = {
+  fontSize: '14px',
+  backgroundColor: '#28a745',
+  color: '#fff',
+  borderRadius: '0.5em',
+  padding: '0.3em 0.6em',
+  textTransform: 'uppercase',
+} as CSSProperties
+
+const links = {
+  textAlign: 'center',
+} as CSSProperties
+
+const link = {
+  color: '#0366d6',
+  fontSize: '12px',
+} as CSSProperties
+
+const footer = {
+  color: '#6a737d',
+  fontSize: '12px',
+  textAlign: 'center',
+  marginTop: '60px',
+} as CSSProperties
+</script>
+
+<template>
+  <EHtml>
+    <EHead />
+    <EPreview> A fine-grained personal access token has been added to your account </EPreview>
+    <EBody :style="main">
+      <EContainer :style="container">
+        <EImg
+          width="32"
+          height="32"
+          src="/static/github.png"
+          alt="Github"
+        />
+        <EText :style="title">
+          <strong>@{{ username }}</strong>, a personal access was created on your account.
+        </EText>
+
+        <ESection :style="section">
+          <EText :style="text">
+            Hey <strong>{{ username }}</strong>!
+          </EText>
+          <EText :style="text">
+            A fine-grained personal access token (<ELink href="#">
+              resend
+            </ELink>) was recently added to your account.
+          </EText>
+
+          <EButton
+            href="#"
+            :style="button"
+          >
+            View your token
+          </EButton>
+        </ESection>
+        <EText :style="links">
+          <ELink
+            href="#"
+            :style="link"
+          >
+            Your security audit log
+          </ELink>
+          ・
+          <ELink
+            href="#"
+            :style="link"
+          >
+            Contact support
+          </ELink>
+        </EText>
+
+        <EText :style="footer">
+          GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107
+        </EText>
+      </EContainer>
+    </EBody>
+  </EHtml>
+</template>

playground/nuxt.config.ts

@@ -1,5 +1,8 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  vueEmail: {},
-  devtools: { enabled: true }
+  vueEmail: {
+    baseUrl: 'https://vue-email-demo.vercel.app/',
+    playground: false,
+  },
+  devtools: { enabled: true },
 })

playground/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "generate": "nuxi generate"
+    "generate": "nuxi generate",
+    "preview": "nuxt preview"
   },
   "devDependencies": {
     "nuxt": "latest"

playground/server/api/test.get.ts

@@ -0,0 +1,18 @@
+import { useCompiler } from '#vue-email'
+
+export default defineEventHandler(async () => {
+  try {
+    const template = await useCompiler('github-access-token.vue', {
+      props: {
+        username: 'Flowko',
+      },
+    }).catch((error) => {
+      console.error(error);
+    })
+
+    return template
+  } catch (error) {
+    console.error(error);
+
+  }
+})