Nuxt•2y ago

Render a vue template completely on a server route (and get the string from it)

Hi there. I am using a backend api route to send an email. I have some JS data that I want to render as a HTML template string, which I can send as the email body. I was thinking to use vue as a templating engine, since the whole nuxt ecosystem is vue. So I tried:

// server/api/sendEmail.ts
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import template from './template.vue'

export default defineEventHandler(async event => {
    const app = createSSRApp({
        data: () => ({ count: 1 }),
        template: template,
    })

    const str = await renderToString(app)

        // now send the email with the `str` as html body.

    return {
        htmlString: str,
    }
})

// server/api/sendEmail.ts
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import template from './template.vue'

export default defineEventHandler(async event => {
    const app = createSSRApp({
        data: () => ({ count: 1 }),
        template: template,
    })

    const str = await renderToString(app)

        // now send the email with the `str` as html body.

    return {
        htmlString: str,
    }
})

// server/utils/template.vue

<template>
    <div class="test" :class="{ 'dynamic': true }">
        {{ props.count }}
    </div>
</template>

<script setup lang="ts">
    const props = defineProps<{ count: number }>()
</script>

// server/utils/template.vue

<template>
    <div class="test" :class="{ 'dynamic': true }">
        {{ props.count }}
    </div>
</template>

<script setup lang="ts">
    const props = defineProps<{ count: number }>()
</script>

But this gives me a error:

 ERROR  RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)


1: <template>
   ^
2:   <div class="test" :class="{ 'dynamic': true }">
3:     {{ props.count }}

 ERROR  RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)


1: <template>
   ^
2:   <div class="test" :class="{ 'dynamic': true }">
3:     {{ props.count }}

Do you have any idea on how to archive this?

3 Replies

Fabian B.OP•2y ago

What works though is

const app = createSSRApp({
    data: () => ({ count: 1 }),
    template: `<div class="test" :class="{ 'dynamic': true }">
        {{ count }}
    </div>`,
})

const app = createSSRApp({
    data: () => ({ count: 1 }),
    template: `<div class="test" :class="{ 'dynamic': true }">
        {{ count }}
    </div>`,
})

I am getting

{
  "htmlString": "<div class=\"test dynamic\">1</div>"
}

{
  "htmlString": "<div class=\"test dynamic\">1</div>"
}

it's just without syntax highlighting and I would like to exclude it into another file.

Unknown User•2y ago

Message Not Public

Fabian B.OP•2y ago

@adetayo Thanks for your answer 1. yeah that would work, but then I would also loose syntax highlighting. 2. I had the same issue, you have to do

    nitro: {
        externals: {
            traceInclude: ['./node_modules/vue/server-renderer'],
        },
    },

    nitro: {
        externals: {
            traceInclude: ['./node_modules/vue/server-renderer'],
        },
    },

in your nuxt.config.app and

import { renderToString } from 'vue/server-renderer'

import { renderToString } from 'vue/server-renderer'

in your server route

Gaming

Programming

Render a vue template completely on a server route (and get the string from it)