Uncommon Issues in Nuxt / Vue and Solutions to fix

Nuxtjs Apr 22, 2020

In this post, I would like to write uncommon issues that I faced in vue and nuxt projects and the solutions to fix those. it may be helpful for someone who come across those issues.

Issue  - DOMException: Failed to execute 'appendChild' on 'Node'

In a Nuxt.js blog, for a particular blog post I have faced this issue. as you can see this is related to DOM. Issue was happened in v-html attribute.

Solution

Due to some unformatted content in the post, it was giving this error.
First make sure v-html attribute is always used in div tag and any element tags

<div v-html="description"></div>

Second, Check the content is formatted correctly or not.
Third, you can add condition to wait till the client is ready using v-if="isLoaded" or content inside <client-only>
Note: Use  <client-only> if its not important to SEO

References:
https://github.com/nuxt/nuxt.js/issues/1552
https://medium.com/@liutingchun_95744/nuxt-js-best-practices-for-client-side-only-contents-client-only-no-ssr-4843e94d9565

Issue - Data mutation

Solution - JSON.parse(JSON.stringify(DATA))

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.