Vue Email
Replies: 1 comment 3 replies
-
|
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 here a minor example of the nitro app using this approach: with i18n, if you face any issues, you could try these two options:
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: |
Beta Was this translation helpful? Give feedback.
-
|
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 :) |
Beta Was this translation helpful? Give feedback.
-
|
Will do, thanks for the suggestion |
Beta Was this translation helpful? Give feedback.
-
|
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;
}; |
Beta Was this translation helpful? Give feedback.
-
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
appobject so we can say for exampleconst i18n = createI18n(); app.use(i18n)?This is my route currently:
Beta Was this translation helpful? Give feedback.
All reactions