Skip to content
This repository was archived by the owner on Jun 22, 2024. It is now read-only.
This repository was archived by the owner on Jun 22, 2024. It is now read-only.

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

@zoey-kaiser

Description

@zoey-kaiser

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

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions