Error: render function or template not defined in component: anonymous

Question

Trying the example from the guide from https://ssr.vuejs.org/guide/#using-a-page-template but there must be something missing in the tutorial.

const Vue = require('vue');
const server = require('express')();
const vssr = require('vue-server-renderer');

server.get('*', (req, res) => {
    const renderer = vssr.createRenderer({
        template: require('fs').readFileSync('./templates/index.html', 'utf-8')
    });

    const context = {
        title: 'hello',
        meta: `
            <meta ...>
            <meta ...>
        `
    };

    const app = new Vue({});

    renderer.renderToString(app, context, (err, html) => {
        if (err) {
            console.log(err);
            process.exit();
        }
        console.log(html);
    });

});

server.listen(6081);

When I open my page, I get the error:

Error: render function or template not defined in component: anonymous

at normalizeRender

Answer 1

Try providing a template property or a render function in your Vue instance.

new Vue({ template: `<div>Hello there!</div>` })

The following lines below only means that you want to use your own page template for the renderer where your app's markup will be injected later.

const renderer = vssr.createRenderer({
    template: require('fs').readFileSync('./templates/index.html', 'utf-8')
});