Home

I have an object passed down with a prop from a page component to a regular component. Sometimes the object is undefined (depending on an asyncData handled pre-fetch of different object from the backend) before it’s subsequently populated with Ajax calls.

So I have something like this in template:

<span v-if="thing">{{ (thing || {}).name || 'Dis ting got no name' }}</span>

Note that I currently have both checks (i.e. v-if and thing || {}), either is good enough for Vue when thing is undefined.

Neither stops Nuxt from crashing with Cannot read property 'name' of undefined if I reload the page i.e. when the whole page is first rendered server-side despite the fact that:

• in both Node and in ES5+ compliant browser javascript, as long as thing is defined (in the sense that the lexeme exists in the scope) the syntax (thing || {}).name will return either thing.name or undefined, and if the lexeme doesn’t exist in the scope a different error, ReferenceError: thing is not defined would be thrown)
• The very existence of v-if=" ... " should prevent the template interpolation to be evaluated at all if the v-if condition evaluates to flase.

This creates a significant (in my opinion) discrepancy between how Vue and Vue SSR under Nuxt behave which I don’t see covered in any of the documentation.