How to preview templates with props in Devtools?

[MickL]

I wonder how I can preview template in devtools that use props. Right now it gives me tons of errors:

Error rendering template Welcome: TypeError: Cannot read properties of undefined (reading 'firstName')

Btw some other feedback:

• Within the devtools I cant scroll the Vue Email content (I am using Chrome on macOS)
• I couldnt find where to preview my templates in the devtools. I only saw accidently when clicking in the search there I could find them. This could be made more obvious.
• The docs dont say any word about how to preview a email template. Is previewing them in devtools the only option? Or can I jsut drop the components in a dev page?

Not scrolling:

[Flowko]

thanks for the feedback, some answers: currently only from the search box you can see the tempaltes you have and to preview them you have to use the devtools,or if you want to have full control try to use the utils from the library like useCompiler on a server api and embed it inside an iframe or try to globally import the components and show them ( tho this might not work for some cases ), but yeah will take into consideration showing other ways of rendering

https://vuemail.net/ssr/nuxt#example

[MickL]

Thanks for the quick response :) But how can I preview an email that depends on props? I guess the devtools dont provide a way to input them?

Personally I would add a page to the docs on how to preview templates (-> Devtools) because this was not obvious to me and also I wondered how you display the previews on the examples page. Further I would display the list of templates in the devtools "mainpage" or at least write a sentence like "Use the search to browse your templates"

[Flowko]

hmm, i just recently added that feature with props, dont you see the props tab ?

what version of the library you are using ?

[Flowko]

and yeah tottaly, that devtools design is a bit old now, planning to redo it soon, when i get some free time

[MickL]

I am using @vue-email/nuxt 0.8.19 which is using vue-email 0.8.10.

• I cant scroll the content of the "mainpage"
• If I go in the search and select my component it freezes (it was working when I didnt have props)

[Flowko]

hmm, can you show me the email template you have please

[MickL]

Errors:

It actually works when I send the mail, the props are available (just i18n interpolation is not working). Only the devtools crash, which makes sense because the props are undefined?

<script setup lang="ts">
import type { Config } from 'tailwindcss';
import { intervalToDuration } from 'date-fns';

/**
 * TODO: Interpolation is not working: https://github.com/vue-email/vue-email/issues/165
 * TODO: Make template more beautyful
 * TODO: Add logo (image or svg)
 */
export interface InviteEmailProps {
  url: string;
  firstName: string;
  lastName: string;
  email: string;
  createdAt: Date;
  expiresAt: Date;
  invitedBy: {
    firstName: string;
    lastName: string;
    email: string;
    ip: string;
  };
}

const props = defineProps<InviteEmailProps>();
const { days: expiresInDays } = intervalToDuration({
  start: props.createdAt,
  end: props.expiresAt,
});

const tailwindConfig: Partial<Config> = {};
</script>

<template>
  <ETailwind :config="tailwindConfig">
    <EHtml lang="en">
      <EHead />
      <EPreview>{{ $t('preview') }}</EPreview>
      <EBody class="font-sans bg-gray-50 max-w-[420px]">
        <div class="bg-white border border-gray-300">
          <EText>{{ $t('greeting', { firstName: props.firstName }) }} </EText>
          <EText>
            {{
              $t('text', {
                firstName: props.invitedBy.firstName,
                lastName: props.invitedBy.lastName,
              })
            }}
          </EText>

          <EButton :href="props.url" class="text-white bg-slate-700 p-4">
            {{ $t('cta') }}
          </EButton>

          <EHr />

          <EText class="small text-gray-400">
            {{
              $t('info', {
                email: props.email,
                createdAtDate: $d(props.createdAt, 'date'),
                createdAtTime: $d(props.createdAt, 'time'),
                expiresInDays,
                ip: props.invitedBy.ip,
              })
            }}
          </EText>
        </div>
      </EBody>
    </EHtml>
  </ETailwind>
</template>

[Flowko]

ah importing outside libraries will not work on ssr or nuxt

import type { Config } from 'tailwindcss';
import { intervalToDuration } from 'date-fns';

its one of the limitation of the ssr mode https://vuemail.net/ssr/introduction

try to remove that and test again, we have no way to know what libraries you have installed, we compile outside the context of nuxt as we have no way to know that, nuxt really doesnt have anything that could help us do this

[MickL]

Also I need to add import { computed, defineProps } from 'vue' or no?

I wonder why $t() is available if Nuxt auto imports are not working and none of my utils are available. Maybe the library works in a very different way as I expected.

I used Nuxt Server Handler to render Vue components to html code like so, isnt this a solution for this module too?

This way I could use everything in the component that is available. No need for an extra i18n implementation. The only thing that doesnt work is adding <styles>.

html.value = await renderToString(
      h(MyComponent, {
        // ... props
      }),
    ),

I might consider doing the same for sending emails.

[Flowko]

yeah nuxt doesnt give us a way to know what components we have on the server side, i mean believe me, we tried many ways, none of them worked, also when you build your nuxt, it works in a different way as the server side is kinda seperated, finnaly like i said, ssr is a limited feature, its mentioned on the docs, but yeah, try and see what fits your use case

[MickL]

Still doesnt work for me. I give up for now :(

[Flowko]

we just merged a new project rewrite, please do check the docs and the updated logic https://vuemail.net/