VueJs: Error with server side rendering and Typescript VueJs: Error with server side rendering and Typescript vue.js vue.js

VueJs: Error with server side rendering and Typescript


I checked your repo and the problem is actually in the file src/assets/app.ts, in the createApp function you're returning an object of type ComponentOptions but renderToString takes an object of type Vue.

It can actually be much simpler than what you have right now:

import * as Vue from 'vue';let createApp = function () {  return new Vue({    props: ['message'],    template: '<span>{{ message }}</span>',  });};export default createApp;

And that's it, you only need to return a new Vue instance.


What I have found that in order for Vue to render something, it needs one of these:

  • render property
  • template property
  • Being $mount()ed

Now if you're like me, and you had something like this in your HTML:

<div id="app">    <navbar></navbar>    ...</div>

and used to mount it like app.$mount('#app'), what you need to do is:

  • Move <div id="app"> entirely with its contents to a component (probably call it App.vue?)
  • Add a render property to the Vue instance like render: h => h(App) where App is the component you just created
  • Use that component directly for SSR, i.e. return it from your entry-server.js or whatever
  • Do $mount that instance in entry-client.js for hydration