[Question] How to use Vuemail with AdonisJS

[khawarizmus]

As the title suggests How can i use Vuemail with AdonisJS (which is a backend framework)?

Here is a sample code of how i am trying to use Vuemail:

import { BaseMail } from '@adonisjs/mail'
import Template from '../../resources/views/emails/joined_waitinglist.vue'
import { render } from '@vue-email/render'

export default class JoinedWaitlistNotification extends BaseMail {
  subject = 'You are in the patiently waiting list'

  constructor(private email: string) {
    super()
  }
  /**
   * The "prepare" method is called automatically when
   * the email is sent or queued.
   */
  async prepare() {
    const html = await render(
      Template,
      {
        title: 'some title',
      },
      {
        pretty: true,
      }
    )
    this.message.subject(this.subject).to(this.email).html(html)
  }
}

When run this code throws the following error: Error: ERR_UNKNOWN_FILE_EXTENSION .vue

In the docs I can see an example of how to use Vuemail server side with Nuxt. but there is no example with normal server side frameworks. It would be good to have that.

Finally, in the docs it says:

You can start building your email template in a .vue or .ts file.

Not sure how to do it using a .ts extension I would appreciate some examples.

[Flowko]

hi, the main focus of this library is to work with vue and nuxt/nitro, we are not planning to support anything that doesnt support vue, so if AdonisJs allows you to somehow configure it to load .vue files, then that should work, by .ts files we mean this https://vuejs.org/guide/extras/render-function the ability to write components with Vnodes using internal vue functions

the issue you got, you just need to find a way to load the .vue extension files, im not famailar with that library, so ill just post the links i found interseting that might help you:

• https://blog.logrocket.com/getting-started-inertia-js-vue-js-adonisjs/
• https://youtu.be/GiMTNNFrKB8

but other than that, i cant really help you any further, hope you find a way to resolve your issue, if you do please share it here

[khawarizmus]

It took a lot of back and forth and number of people from Adonisjs community but but now finally we have a working example of Vuemail with Adonjs 6

https://github.com/khawarizmus/vuemail-adonis

[Flowko]

nice, glad to hear you managed to get it working, thanks for providing an example

[thetutlage]

I got it to work in Node.js runtime earlier with the usage of @vue-email/compiler package. Is this package not something you want to pitch/maintain in the future?

[khawarizmus]

CC: @Flowko

[Flowko]

yeap, we no longer gonna maintain that library as its just something not possible to maintaine due to many errors and broken things, at first we thought its gonna be easy to get ssr working as expected, but we found our selfs building like a new ssr framework from scratch, so not really worth it tbh, plus vue ssr docs lacks alot of helpfull insight to manage something like this