[Question] Use my own components #82

thomasruffier · 2023-10-01T13:13:04Z

Hello,
I would like to use my own components. I have created a file in the 'components' folder, but the system completely ignores it.
Is there a way to do this?

Flowko · 2023-10-01T19:51:43Z

the library will only auto import from components that live in the emails folder, we handle rendering vue files differently than your normal vue app

https://www.vuemail.net/getting-started/ssr#before-you-start

L422Y · 2023-10-01T20:22:38Z

Just to note, you can create a sub-directory in the emails folder and place components there, for instance I have the hierarchy:

emails/
  Email/
     Header.vue
     Layout.vue
  TestEmail.vue

And I can use the components in my TestEmail.vue by using EmailHeader and EmailLayout

If I add import statements, currently, it breaks, but if I leave out the imports, it works like a dream.

mklueh · 2023-12-22T13:39:53Z

The problem is, when you want to use components of your actual application

Flowko · 2023-12-22T21:09:47Z

@mklueh , let me explain why we have this issue in the first place. It's because of SSR (Server-Side Rendering):

The way we handle compiling the Vue files on Node or any JS runtime is different from what you're usually used to. We've developed a custom compiler to make this possible. However, we haven't found a proper way to handle compiling/handling Vue components on the server. If you do know of one, please share it with us.

Then there's Nuxt. Nuxt handles the server-side of your "Vue" app differently as well because you have no access to Vue components on the server side. Therefore, there's no way for us to identify the components you're using and how to link them together.

Our custom solution helps us:

Compile Vue files into a format that createApp understands.
To use custom components, you have to add them inside your emails components. We load these in the createApp created earlier. If we allow users to use all their components, it will cause significant delays because we'd need to compile and add all of them.

This solution works for about 80% of our users' use cases. There was no existing solution for this, but we managed to add the SSR feature because it was never planned due to the complexity involved. I understand your desire for a seamless, 'just works' experience, but Vue is structured differently from React, making achieving that a bit challenging.

Another consideration is in the case of emails. You wouldn't use components from your UI inside the app or website because most of the time, they won't display correctly in email providers. You need to create specific components that function properly on the email side as well.

I hope this helps you understand that this is beyond our control.

L422Y · 2023-12-23T12:42:14Z

Well said, @Flowko, there's no sense in using modern web app components in emails, as email clients still have very limited HTML and CSS support across the board, and any unsupported code is often stripped by providers like Gmail.

Creating a new set of components specifically geared towards emails is the correct route to take – i.e. inline styles and using table a LOT – this will ensure that your emails work correctly.

Flowko · 2023-12-23T13:11:31Z

@L422Y yes tottaly, thats why we have a set of 17 components that you can use, they get converted to a support email format, so you dont have to deal with it, that takes care of most of the use cases, but yeah, we always are trying new ways to make this library better!

mklueh · 2024-02-24T11:07:51Z

Thanks for the clarification regarding custom components, this makes a lot of sense!

Just to note, you can create a sub-directory in the emails folder and place components there, for instance I have the hierarchy:
emails/
  Email/
     Header.vue
     Layout.vue
  TestEmail.vue
And I can use the components in my TestEmail.vue by using EmailHeader and EmailLayout

If I add import statements, currently, it breaks, but if I leave out the imports, it works like a dream.

Is this related to Nuxt only or does this also work using CLI?

Flowko · 2024-02-24T11:12:20Z

its related to the compiler, since its the library that handles the compiling in both nuxt and js frameworks like node and others, so CLI is the same thing, cuz its using that as well, so yeah, same structure in all of them

mklueh · 2024-02-24T12:07:30Z

Okay, so I've tried that with the exact structure

emails/
  Email/
     BrandedHeader.vue
  MyMail.vue

BrandedHeader.vue

<script setup>
import { ESection, EText } from "vue-email";
</script>

<template>
  <e-heading as="h1">
    Some Brand Name
  </e-heading>
</template>

MyMail.vue

<script setup>
import { EButton, EHtml } from 'vue-email'
</script>

<template>
  <EHtml lang="en">

    <BrandedHeader/>

    <EButton href="https://example.com" style="color: #61dafb">
      Click me
    </EButton>
  </EHtml>
</template>

now I run the command in the root

npx vue-email export

And get the output

$ npx vue-email export
ℹ ✨ Generating HTML versions of emails                                                                                                                                                                                                                  13:01:06
[Vue warn]: Failed to resolve component: BrandedHeader
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
ℹ 🪄 Generated MyMail                                                                                                                                                                                                                                    13:01:06
ℹ 🪄 Generated Email/BrandedHeader

And this is the generated HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="__vue-email" lang="en" dir="ltr">
<BrandedHeader></BrandedHeader>
<a data-id="__vue-email-button"
   style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;color:#61dafb;"
   href="https://example.com" target="_blank"><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden>&nbsp;</i><![endif]--></span><span
  style="max-width:100%;display:inline-block;line-height:120%;text-decoration:none;text-transform:none;mso-padding-alt:0px;mso-text-raise:0;"> Click me </span><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a>
</html>

I've tried that also with imports, but this leads to an error.

Am I missing something like an extra config file or something like that?

L422Y · 2024-02-24T19:15:39Z

It would be EmailBrandedHeader

…

On Sat, Feb 24, 2024 at 7:07 AM Marian Klühspies ***@***.***> wrote: Okay, so I've tried that with the exact structure emails/ Email/ BrandedHeader.vue MyMail.vue BrandedHeader.vue <script setup> import { ESection, EText } from "vue-email"; </script> <template> <e-heading as="h1"> Some Brand Name </e-heading> </template> MyMail.vue <script setup> import { EButton, EHtml } from 'vue-email' </script> <template> <EHtml lang="en"> <BrandedHeader/> <EButton href="https://example.com" style="color: #61dafb"> Click me </EButton> </EHtml> </template> now I run the command in the root npx vue-email export And get the output $ npx vue-email export ℹ ✨ Generating HTML versions of emails 13:01:06 [Vue warn]: Failed to resolve component: BrandedHeader If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. ℹ 🪄 Generated MyMail 13:01:06 ℹ 🪄 Generated Email/BrandedHeader And this is the generated HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html id="__vue-email" lang="en" dir="ltr"> <BrandedHeader></BrandedHeader> <a data-id="__vue-email-button" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;color:#61dafb;" href="https://example.com" target="_blank"><span></span><span style="max-width:100%;display:inline-block;line-height:120%;text-decoration:none;text-transform:none;mso-padding-alt:0px;mso-text-raise:0;"> Click me </span><span></span></a> </html> I've tried that also with imports, but this leads to an error. Am I missing something like an extra config file or something like that? — Reply to this email directly, view it on GitHub <#82 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABGF7V32J5RJ6465NGUZEDYVHJY7AVCNFSM6AAAAAA5OKJE2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNRSGM2DEMJVG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Flowko added the question question label Oct 1, 2023

Flowko changed the title ~~[FEATURE] Use my own components~~ [Question] Use my own components Oct 1, 2023

Flowko closed this as completed Oct 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Question] Use my own components #82

[Question] Use my own components #82

thomasruffier commented Oct 1, 2023

Flowko commented Oct 1, 2023 •

edited

Loading

L422Y commented Oct 1, 2023 •

edited

Loading

mklueh commented Dec 22, 2023

Flowko commented Dec 22, 2023

L422Y commented Dec 23, 2023

Flowko commented Dec 23, 2023

mklueh commented Feb 24, 2024

Flowko commented Feb 24, 2024

mklueh commented Feb 24, 2024

L422Y commented Feb 24, 2024 via email

[Question] Use my own components #82

[Question] Use my own components #82

Comments

thomasruffier commented Oct 1, 2023

Flowko commented Oct 1, 2023 • edited Loading

L422Y commented Oct 1, 2023 • edited Loading

mklueh commented Dec 22, 2023

Flowko commented Dec 22, 2023

L422Y commented Dec 23, 2023

Flowko commented Dec 23, 2023

mklueh commented Feb 24, 2024

Flowko commented Feb 24, 2024

mklueh commented Feb 24, 2024

L422Y commented Feb 24, 2024 via email

Flowko commented Oct 1, 2023 •

edited

Loading

L422Y commented Oct 1, 2023 •

edited

Loading