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
propertytemplate
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 itApp.vue
?) - Add a
render
property to the Vue instance likerender: h => h(App)
whereApp
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 inentry-client.js
for hydration