Is there a way too create a base component? about vue-email HOT 33 CLOSED

Release under version 0.7.1

from vue-email.

thank YOU! this is a game changer for me and i'm certain many others can/will appreciate it!

look how nice it is!! :D

from vue-email.

we will keep trying to find solutions, till then, will keep you posted

from vue-email.

I'll check it out and get back to you,im sure it wont work on nuxt, cus the built files u wont have access to those, but ill see how i can fit it there, thanks

from vue-email.

@L422Y @bitfactory-michel-lubbers if you could pelase test 0.7.1-pre.6 the components that live inside the emails folder will be auto imported, for naming you use the same vue naming conventions pascalCase ex: Layout/Default.vue -> LayoutDefault
no need to import those components in ur email template, just add them to your code <LayoutDefault>...</LayoutDefault>

example repoduction: https://stackblitz.com/edit/vue-email-testing

let me know if u get any errors

from vue-email.

Will try later this evening!

from vue-email.

We can add the emails folder to our nuxt.config.ts and then the IDE doesn't complain anymore, and everything works:

export default defineNuxtConfig({
  components: [
        '~/components',
        '~/emails',
    ],
})

from vue-email.

ah my bad, i addded a prefix to those compoennts, so it shouild be EmailsEmailLayout let me fix it

from vue-email.

@stijns96 yeah im working on adding that #72

from vue-email.

do u have a reproduction for this ? would help us see whats going on better

from vue-email.

I have zipped what i currently have. Because i haven't put it live yet.
It is a simple test project.
I just do npm run dev and go too the api url to test it http://localhost:3000/api/email/register
In my terminal it returns the the errors mention above.

testingVueEmail.zip

from vue-email.

okay will give it a try, thanks

from vue-email.

yeah, so this is a bug, as we dont handle outside components on ssr, cus the context is not the same as the nuxt context, we handle the vue component conversion outside of nuxt, which is why it doesnt recognize the components u mentioned, we'll try to see if we can fix this for good, but for now i advice to copy paste the same components code in each template, till we find a solution

from vue-email.

@Flowko Oke thank you for the quick response.
I will just use it as you suggested.

from vue-email.

It would be nice if other imports would be allowed too. I already have a tailwind config in the project, and if possible I don't want to duplicate it. (currently I'm importing it in the script and passing it as a prop)

Or perhaps use a composable and in nuxt the useRuntimeConfig()

from vue-email.

About importing components and composables...:
i honestly cant think of ways to make that possible, the thing is, once you build your app, its a whole another story, we cant have access to anything on the vue runtime in the server, as far as i know, im afraid i cant make that possible, there might be a way, but that migth depend on having another api and the files will have to live outside of the nuxt project, either way, its hard to achive that with what vue/nuxt provides

from vue-email.

Is it not possible to use vue ssr to render? Anything that would aid this in nuxt?
A way around it maybe, that a config can be introduced that sets the base component that the email will be wrapped in?

from vue-email.

can seem to import types either

import type { FormInput } from '~/types';
import type { PropType } from 'vue';

// typehint what is passed in as props
defineProps<{ [K in keyof FormInput]: PropType<FormInput[K]> }>();

from vue-email.

We already use templates and vue-email components, can't we add a separate folder for custom email components and load those like the built-in vue-email ones?

from vue-email.

we added a checklist here, so u guys know what's supported and what's not:
https://www.vuemail.net/getting-started/ssr#features

We cant figure out a way to handle that on the server plus with the tiny amount of time we have to work on this library, we only managed to make a tiny compiler that can get the normal/simple vue file to render with no import support but only able to handle the vue-email components, but then you have nuxt to think about, cus it handles server side logic differently, and on the built version of your file, the files are different thatn what you have in ur before build strucutre.

if its not yet clear, we are not using the same compiler/renderer thats being used in the nuxt or ur vue client, we load up a new instance that can work on the server and we pass to it a parsed version of the file you trying to get the html for, its what we were able to figure out for now

contributions are more than welcome, but until we figure out how to do that, you guys will have to stick with what the library has to offer.

from vue-email.

Ah I see you are importing the other components statically... would this not work for some reason?
I tried playing with it but I don't have my head wrapped around the project as well as maybe someone else does.

export function loadComponents(app: App<Element>) {
  const components = import.meta.glob('../../**/email-components/**/*.vue')
  for (const filePath in components) {
    if (!filePath) continue
    const name = filePath?.split('/').pop()?.replace('.vue', '')
    if (!name) continue
    app.component(
      name,
      defineComponent(() => components[filePath]),
    )
  }
}

I do dynamic imports like this for a modular monitoring application I am working on and they work.

from vue-email.

It works! I've got an EmailLayout component that has an EmailHeader and EmailFooter components AND a default slot for the content, with props and logic within the components and slot content, it all works :)

The only caveat is if my IDE adds the import of the vue file into the template it breaks things, which isn't a huge deal as I can just remove the import, but the IDE does complain about it, here's the error:

Error loading component node:internal/modules/cjs/loader:1051
  throw err;
  ^

Error: Cannot find module '~/emails/EmailLayout.vue'
Require stack:
- /Users/larry/Development/apps/redacted/.nuxt/dev/[object Promise].js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at /Users/larry/Development/apps/redacted/.nuxt/dev/[object Promise].js:45:34
    at Script.runInContext (node:vm:133:12)
    at Script.runInNewContext (node:vm:138:17)
    at runInNewContext (node:vm:288:38)
    at requireFromString (/Users/larry/Development/apps/redacted/node_modules/vue-email/dist/compiler.mjs:250:3)
    at importFromStringSync (/Users/larry/Development/apps/redacted/node_modules/vue-email/dist/compiler.mjs:279:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/larry/Development/apps/redacted/.nuxt/dev/[object Promise].js'
  ]
}
[nitro] [unhandledRejection] Error: Component NewBid not found
    at templateRender (/Users/larry/Development/apps/redacted/node_modules/vue-email/dist/compiler.mjs:305:11)
    at useCompiler (/Users/larry/Development/apps/redacted/node_modules/vue-email/dist/runtime/server/services/useCompiler.mjs:18:26)
    at sendEmail (/Users/larry/Development/apps/redacted/server/utils/send-email.ts:18:18)

However, as long as I remove those autoinserted imports from the vue file(s) it works like a charm and is going to make life so much easier!

from vue-email.

If I change the path in the import i.e.import EmailLayout from "../../emails/EmailLayout.vue" it tries to load the file, but it cannot parse:

Error loading component /Users/larry/Development/apps/redacted/emails/EmailLayout.vue:1
<template>
^

SyntaxError: Unexpected token '<'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at /Users/larry/Development/apps/redacted/.nuxt/dev/[object Promise].js:45:34
    at Script.runInContext (node:vm:133:12)
[nitro] [unhandledRejection] Error: Component NewBid not found
    at templateRender (/Users/larry/Development/apps/redacted/node_modules/vue-email/dist/compiler.mjs:305:11)
    at useCompiler (/Users/larry/Development/apps/redacted/node_modules/vue-email/dist/runtime/server/services/useCompiler.mjs:18:26)
    at sendEmail (/Users/larry/Development/apps/redacted/server/utils/send-email.ts:18:18)

from vue-email.

thanks alot for taking the time to test this, i'll add it to the compoennts folder in the nuxt module, so you dont have to,
can you test 0.7.1-pre.7, also just remove '~/emails' or 'components' from your nuxt config

from vue-email.

Updated to 0.7.1-pre.7 and when I remove that from my config, the IDE complains again:

from vue-email.

hmm, can u maybe do a quick restart to your IDE ?

from vue-email.

Yep that's it :)

from vue-email.

okay 0.7.1-pre.8 should resolve that now

from vue-email.

also if u can build and test it that would be great

from vue-email.

0.7.1-pre.8 works great for me, did have to coax webstorm to reload the generated types in .nuxt/components.d.ts but after that I've got no problems

from vue-email.

yeah, that issue im facing with vscode as well something to do with nuxt and generating types, but good that its working, thanks alot, will wrap it later today and make a new release, will update here once its done

from vue-email.

It would be nice if other imports would be allowed too. I already have a tailwind config in the project, and if possible I don't want to duplicate it. (currently I'm importing it in the script and passing it as a prop)

Or perhaps use a composable and in nuxt the useRuntimeConfig()

I really like to see this feature as well. It doesn't feel right to duplicate the config or to pass it as a prop...

from vue-email.

@stijns96 available in the latest version of vue email packages

from vue-email.