Nuxt•9mo ago

Rendering a component in server routes

Hi! I'd like to return the html of a rendered component in a server route (e.g. /images/logo -> should return the html of LogoComponent.vue) Would something like this be possible?

5 Replies

Thr0nSKOP•9mo ago

I tried the following:

import { createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
import LogoComponent from '../../../components/LogoComponent.vue'

export default eventHandler(async (event) => {
    const app = createSSRApp({
        components: { LogoComponent },
        template: '<LogoComponent />',
    })

    return await renderToString(app)
})

import { createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
import LogoComponent from '../../../components/LogoComponent.vue'

export default eventHandler(async (event) => {
    const app = createSSRApp({
        components: { LogoComponent },
        template: '<LogoComponent />',
    })

    return await renderToString(app)
})

but it seems to have a problem with rollup:

ERROR  RollupError: Expression expected (Note that you need plugins to import files that are not JavaScript)                                                                                                                                                   nitro 6:09:07 PM


1: <template>
   ^
2:     <div class="inline-block">

ERROR  RollupError: Expression expected (Note that you need plugins to import files that are not JavaScript)                                                                                                                                                   nitro 6:09:07 PM


1: <template>
   ^
2:     <div class="inline-block">

also, I'm not sure that creating a new app on every request is the best solution

Josh Deltener•9mo ago

Why do you need it as a server asset, is it being used from a non-Nuxt site?

Thr0nSKOP•9mo ago

I'd like to include it in an <img> tag on an external website. any idea how to fix the error? :/

Josh Deltener•9mo ago

Sorry no. I assume you're wanting to return an SVG?

Thr0nSKOP•9mo ago

yes but I want to keep it in the component

Gaming

Programming

Rendering a component in server routes