Nuxt 2 / DOM issues (client/server mismatch)

[sethmills21]

Hi there!

I have implemented vue-awesome in my vue/nuxt project and am now noticing in the console that I am getting this error regarding a mismatch between client-side and server-side:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I have followed all instructions for using vue-awesome in nuxt2

From nuxt.config:

{
            src: '~plugins/vue-awesome.js',
            ssr: false
        },
        { src: '~/plugins/localStorage.js', ssr: false }
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    'bootstrap-vue/nuxt'
  ],
  /*
  ** Build configuration
  */
  build: {
    transpile: [/vue-awesome/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      // config.module.rules.push({
      //   test: /\.styl$/,
      //   use: [
      //     'vue-style-loader',
      //     'css-loader',
      //     'stylus-loader'
      //   ]
      // })
    }

From plugins:

import Vue from 'vue'
import Icon from 'vue-awesome/components/Icon.vue'
require('vue-awesome/icons')
Vue.component('icon', Icon)

Then from component:

<div class="mute-icon border-white rounded-circle pt-5" @click="toggleMute()" style="height: 20px">
<icon name="volume-mute" color="#d3d3d3" scale="2" v-if="muted"></icon>
</div>

Been debugging for hours and still scratching my head, would greatly appreciate any help! ```

[Justineo]

Which version of VueAwesome are you using?

[sethmills21]

What's good @Justineo! Looks like 4.0.2.

[Justineo]

Would you please check if the problem still exists if you revert back to v3.0.5?

[sethmills21]

Sure, now getting this (with no icons showing):

[Vue warn]: Invalid prop: custom validator check failed for prop "name".

[sethmills21]

Plus this warning before:

Invalid prop: prop "name" is referring to an unregistered icon "volume-mute"

[sethmills21]

It seems to work with icon name "beer" but not "volume-mute" even though I was previously able to use "volume-mute" and it's not part of PRO

[Chalks]

@sethmills21 I ran into a similar issue and this fixed it for me:

plugins/vue-awesome.js:

import Vue from 'vue';
import Icon from 'vue-awesome/components/Icon.vue';
Vue.component('icon', Icon);

Note that we're not requiring the entire icon library (which reduces your bundle size significantly).

In component:

import 'vue-awesome/icons/volume-mute';

// ...

<icon name="volume-mute" />