title: How to get rid of Mismatching childNodes vs. VNodes in NuxtJs
body: <p>Getting &gt; <code>Mismatching childNodes vs. VNodes:</code> when I am putting two <code>li</code> elements in else or if condition, as follows.</p>
  <pre><code>&lt;ul class=&quot;nav navbar-nav language&quot;&gt;
    &lt;li&gt;&lt;nuxt-link :to=&quot;switchLocalePath('en')&quot;&gt; &lt;img src=&quot;~/assets/images/english.svg&quot;&gt; English&lt;/nuxt-link&gt;&lt;/li&gt;
    &lt;li&gt;&lt;nuxt-link :to=&quot;switchLocalePath('ar')&quot;&gt; &lt;img src=&quot;~/assets/images/arabic.svg&quot;&gt; العربية&lt;/nuxt-link&gt;&lt;/li&gt;
    &lt;li&gt;&lt;nuxt-link to=&quot;#&quot;&gt; | &lt;/nuxt-link&gt;&lt;/li&gt;
    &lt;template v-if=&quot;$auth.loggedIn&quot;&gt;
      &lt;li&gt;&lt;nuxt-link to=&quot;/profile&quot;&gt; Profile &lt;/nuxt-link&gt;&lt;/li&gt;
    &lt;/template&gt;
    &lt;template v-else&gt;
      &lt;li&gt;&lt;nuxt-link to=&quot;/signin&quot;&gt; Sign In &lt;/nuxt-link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;nuxt-link to=&quot;/signout&quot;&gt; Sign Out &lt;/nuxt-link&gt;&lt;/li&gt;
    &lt;/template&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/kGlrM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kGlrM.png" alt="enter image description here" /></a></p>
  <p>Is it allowed to use more than one <code>li</code> element in the template tag using if/else? If not then how can I achieve this task?</p>
  <p><strong>Updated:</strong>
  If I am wrapping my whole ul into client-only, this hides the error.</p>
  <pre><code>&lt;client-only&gt;
    &lt;ul&gt;
     ....
    &lt;/ul&gt;
  &lt;/client-only&gt;
  </code></pre>
  <p>Is it OK, or are there any other best practices?</p>