How to add i18n and Tailwind in Nitro project? :) #189

MickL · 2024-06-22T19:03:00Z

MickL
Jun 22, 2024

If I get it right then with 1.0 we can finally use normal components and import and use whatever we want, amazing!! :)

Personally I migrated the backend part of my Nuxt app to a separate Nitro app. Do you have any suggestions / ideas how to add

Translations - Can we use vue-i18n somehow? Is there an app object so we can say for example const i18n = createI18n(); app.use(i18n)?
Tailwind - Maybe by following this guide and just importing index.css in the vue components?

This is my route currently:

import TestComponent from '../../mail-templates/test.vue';
import { render } from '@vue-email/render';
import { useResend } from '~/utils/use-resend';

export default defineEventHandler(async (event) => {
  const html = await render(
    Tester,
    {
      title: 'some title',
    },
    {
      pretty: true,
    },
  );

  useResend().emails.send({
    from: `Abc <[email protected]>`,
    to: ['[email protected]'],
    subject: 'Neue Nachricht vom Kontakformular',
    html,
  });
});

Flowko · 2024-06-22T19:23:03Z

Flowko
Jun 22, 2024
Maintainer

hi, so yeah, the good thing about the rewrite is that you can write your own render function, just copy this:

import { renderToString } from 'vue/server-renderer'
import type { AllowedComponentProps, Component, VNodeProps } from 'vue'
import { createSSRApp } from 'vue'
import { Options, cleanup } from '@vue-email/render'
import { createI18n } from 'vue-i18n'


export type ExtractComponentProps<TComponent> =
  TComponent extends new () => {
    $props: infer P
  }
  ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps>
  : never

export interface VNode {
  type: string
  props: {
    style?: Record<string, any>
    children?: string | VNode | VNode[]
    [prop: string]: any
  }
}

export async function render<T extends Component>(
  component: T,
  props?: ExtractComponentProps<T>,
  options?: Options
) {

  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en: {
        hello: "Hello, {name}!"
      }
    }
  })


  const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
  const App = createSSRApp(component, props || {})

  App.use(i18n)

  const markup = await renderToString(App)
  const doc = `${doctype}${cleanup(markup)}`


  return doc
}

if you are wondering where this came from, you can check this https://github.com/vue-email/vue-email/blob/main/packages/render/src/shared/render.ts

make sure you install vue-i18n , also tho note that vue-i18n might not work great in some cases, i believe some function are not fully suported in that mode, but thats because of i18n library not vue email

here a minor example of the nitro app using this approach:
https://github.com/Flowko/vue-email-edge-testing-nitro

with i18n, if you face any issues, you could try these two options:

utils file that has the translations, example:
https://github.com/midday-ai/midday/blob/main/packages/email/locales/index.ts
check the latest v10 ( still in beta ) try "vue-i18n": "10.0.0-beta.1" it seems to fix the issue and set both legacy and globalInjection to false

about tailwind, you just need to use the tailwind component as shown here: https://vuemail.net/components/tailwind

if you want to have class completion in ur IDE, just create a tailwind.config.ts file, it can be empty or has the same config as your tailwind config, and it should be fine, example:
https://github.com/Flowko/vue-email-edge-testing-nitro/blob/main/tailwind.config.ts

3 replies

MickL Jun 22, 2024
Author

Thank you so much, sounds amazing!

Just one note: For Tailwind you might move it up in the docs to the upper navigation. I would never have seen it down there :)

Flowko Jun 22, 2024
Maintainer

Will do, thanks for the suggestion

MickL Nov 8, 2024
Author

For anyone coming here, here is an updated example with use of latest render function

import { renderToString } from 'vue/server-renderer';
import type { AllowedComponentProps, Component, VNodeProps } from 'vue';
import { createSSRApp } from 'vue';
import { createI18n } from 'vue-i18n';
import type { Options } from '@vue-email/render';
import { convert } from 'html-to-text';
import { plainTextSelectors, cleanup } from '@vue-email/render';

export type ExtractComponentProps<TComponent> = TComponent extends new () => {
  $props: infer P;
}
  ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps>
  : never;

export interface VNode {
  type: string;
  props: {
    style?: Record<string, unknown>;
    children?: string | VNode | VNode[];
    [prop: string]: unknown;
  };
}

export const useRenderEmail = async <T extends Component>(
  component: T,
  props?: ExtractComponentProps<T>,
  options?: Options,
) => {
  const doctype =
    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
  const app = createSSRApp(component, props || {});

  const i18n = createI18n({
    locale: 'ja',
    fallbackLocale: 'en',
    messages: {
      en: {
        message: {
          hello: 'hello world',
        },
      },
      ja: {
        message: {
          hello: 'こんにちは、世界',
        },
      },
    },
  });

  app.use(i18n);

  const markup = await renderToString(app);
  if (options?.plainText) {
    return convert(markup, {
      selectors: plainTextSelectors,
      ...(options?.plainText === true ? options.htmlToTextOptions : {}),
    });
  }

  const doc = `${doctype}${cleanup(markup)}`;

  if (options && options.pretty) {
    return pretty(doc);
  }

  return doc;
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue Email

How to add i18n and Tailwind in Nitro project? :) #189

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Vue Email

How to add i18n and Tailwind in Nitro project? :) #189

Uh oh!

Uh oh!

MickL Jun 22, 2024

Replies: 1 comment · 3 replies

Uh oh!

Uh oh!

Flowko Jun 22, 2024 Maintainer

Uh oh!

MickL Jun 22, 2024 Author

Uh oh!

Flowko Jun 22, 2024 Maintainer

Uh oh!

MickL Nov 8, 2024 Author

MickL
Jun 22, 2024

Replies: 1 comment 3 replies

Flowko
Jun 22, 2024
Maintainer

MickL Jun 22, 2024
Author

Flowko Jun 22, 2024
Maintainer

MickL Nov 8, 2024
Author