Issues with usage of @vue-email/nuxt along with @nuxtjs/i18n

zoey-kaiser commented 7 months ago

Hello everyone 👋

First of all thank you for all of your hard work on the module. I think the idea behind it is absolutely amazing!

Inside my project, I am using the official NuxtJS Module for i18n (https://i18n.nuxtjs.org/). As our translations have gotten pretty long, we have decided to move our translations into separate JSON files to better handle the different locales. (~/locales/en.json etc.).

For the integration of the Nuxt i18n, we can then pass an array of locales, along with the location of the JSON.

{
  i18n: {
    langDir: 'locales',
    locales: [{ name: 'English', code: 'en', file: 'en.json' }],
    defaultLocale: 'en',
  },
}

These are then used by the module (which under the hood runs vue-i18n). The issue I am facing now is how to also pass these JSON to the Nuxt Vue-Email module. Based on the documentation, it seems like these currently need to be set via the nuxt.config.ts. Do you have any recommendations on how we can best handle our use case?

What I have tried

Directly importing the JSON into the Nuxt Config (sadly does not work, as it fails due to maximum stack size being exceeded).
Linking our external i18n.config.ts which is used to configure the vuei18n options. In theory we can also set the messages here, so this could resolve the issue, however I can see no way to refer to an external i18n config inside this module

We would love to be able to adopt this into our projects, but sadly this is currently blocking us! Would love to hear your input and tips 🥰

Reproduction

I have created a minimal reproduction of our project setup, so you get a better idea, of what we currently have setup. Maybe this can help you give us some pointers 🙏

https://stackblitz.com/edit/github-cgzqmr?file=nuxt.config.ts

Context

NuxtI18n injects a vue-i18n instance into your Node application. This cannot be accessed on the server side. They do however offer solutions to use the translations server-side, so this may be worth looking into, if it can resolve this issue? https://i18n.nuxtjs.org/docs/guide/server-side-translations

Flowko commented 7 months ago

Hi there, thanks for the detailed issue, yeah indeed its a good idea to have it working with i18n nuxt module, i'll be looking into it

zoey-kaiser commented 7 months ago

Hi there, thanks for the detailed issue, yeah indeed its a good idea to have it working with i18n nuxt module, i'll be looking into it

Thanks for the quick response! That would be amazing. Until then I have decided to use VueEmail in a superrrr basic way, by just defining my layouts and then passing title, greeting, text etc. manually and handling the translations on my server side. Obviously, it would be amazing, to migrate to a "better" system and handle the translations inside the file itself!

However, we would probably also require a few more features to get to an "ideal" state. These include importing external files (such as types) and also a way to share "layouts" between templates.

I have worked myself with Server Side generation for these kinds of things (in my case PDFs) and I know how hard it is to render anything on the server side, where you have no access to many properties of the Nuxt Application itself 😵, so I am super interested to see how you handle these issues in the future!

If you need any help, feedback or additional information to our project and use cases, feel free to reach out. Ill keep an eye on this project to see how it continues developing ❤️

Flowko commented 7 months ago

oh yeah tottally, especially when there's no good docs about it, but we managed to do something, ofc it still not perfect, but yeah, we are not done yet, love the work on the nuxt-pdf library, great stuff!

will keep you posted, if i come up with anything

MickL commented 7 months ago

It would be great if we could simply link to i18n.config.ts the same way Nuxt i18n does:

...
  vueEmail: {
    baseUrl: getUrl(),
    autoImport: true,
    vueI18n: './i18n.config.ts',
  },
  i18n: {
    vueI18n: './i18n.config.ts',
  }
...

So we dont define translations (messages) in two places. Also within vueI18n we can have nested objects which we cant have in vue-email atm:

messages: {
   de: {
          invite: {
             greeting: '...',
          },
          accountCreated: {
             text: '...',
          },
          passwordReset: {
             cta: '...',
          },
   },
}

Flowko commented 3 months ago

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

vue-email / nuxt