Nuxt
Server-Side Rendering with Nuxt
Quick Start
- Install
@vue-email/nuxt
dependency to your project:
pnpm add @vue-email/nuxt
- Add it to your
modules
section in yournuxt.config
:
export default defineNuxtConfig({
modules: ['@vue-email/nuxt']
})
That's it! You can now use all the components and composables in your Nuxt app ✨
Options
Key | Default | Description |
---|---|---|
baseUrl | The base URL of your site, used for images. | |
i18n | The i18n configuration for the plugin. | |
autoImport | false | Auto import Component & Composables from vue-email , |
playground | true | Show playground inside of nuxt devtools |
Configure options in your nuxt.config.ts
as such:
AutoImport
can stay false
if you only gonna use SSR utils, and not the components and composables in the client side, to reduce the bundle size of your app.export default defineNuxtConfig({
modules: ['@vue-email/nuxt'],
vueEmail: {
baseUrl: 'https://vue-email-demo.vercel.app/',
autoImport: true,
}
})
vue-email
will get the first emails
folder it finds, and use that as the default folder to load components from.Server API
The useCompiler
method takes two arguments, the first is the name of the template file, and the second is an optional props object.
import { useCompiler } from '#vue-email'
const template = await useCompiler('WelcomeEmail.vue', {
props: {
username: 'John Doe',
}
})
// returns { html: '...', text: '...' }
template
will contain both the rendered HTML and the text version of the email.
To configure the compiler, you can use the nuxt.config.ts
file, and add your global config to the vueEmail
key as shown in the Nuxt config
~/emails
directory. at the root of your nuxt project.
They will also be auto imported in ur nuxt project, so you dont have to add them to the components
nuxt config.Example
in this example we will use Nuxt.js
to render and view an email.
import { useCompiler } from '#vue-email'
export default defineEventHandler(async () => {
try {
const template = await useCompiler('WelcomeEmail.vue', {
props: {
username: 'John Doe',
}
})
if (!template) {
throw createError({
statusCode: 404,
statusMessage: 'Not Found',
})
}
return template
}
catch (error) {
console.error(error)
throw createError({
statusCode: 500,
statusMessage: 'Internal Server Error',
})
}
})
Sending Emails
Once you have rendered your email template, you can send it using any email provider you like.
Vue Email
does not provide any email sending functionality, you will need to use a third party email provider to send your emails, check the integration section for more information. IntegrationsBugs and Issues
If you encounter any bugs or issues, feel free to open an issue at GitHub
Edge
To use the latest updates pushed on the dev
branch, you can use @vue-email/nuxt-edge
.
Update your package.json
to the following:
{
"devDependencies": {
- "@vue-email/nuxt": "^0.8.0-beta.2"
+ "@vue-email/nuxt": "npm:@vue-email/nuxt-edge@latest"
}
}
Then run pnpm install
, yarn install
or npm install
.