Does not work with vuetify-loader

[H6LS1S]

Hi Nicolas, Thank you for your great library. There's a way to use your library with Vuetify Loader?

I'm submitting

[ ] Regression
[x] Bug report
[ ] Feature request
[x] Documentation issue or request
[x] Support request

Current behavior

Bailing hydration and performing full client-side render, and continued operation of plugin with outputting icons name

Expected behavior

Rendering the vuetify component in your plugin's slot

Minimal reproduction of the problem with instructions

My current dependencies:

  "dependencies": {
    "@mdi/font": "^3.6.95",
    "dotenv": "^8.0.0",
    "nuxt": "2.8.1",
    "ts-node": "8.2.0",
    "vue-social-sharing": "^2.4.5",
    "vuetify": "^1.5.14",
    "vuetify-loader": "^1.2.2",
    "vuex-class": "0.3.2"
  },
  "devDependencies": {
    "@nuxt/typescript": "2.8.1",
    "@types/dotenv": "^6.1.1",
    "@types/node": "10.14.8",
    "@types/webpack-env": "1.13.9",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-property-decorator": "^8.1.1"
  }

nuxt.config.ts

  css: ['~/assets/style/app.styl'],
  plugins: ['~/plugins/vuetify', '~/plugins/social-sharing'],
  build: {
    extractCSS: true,
    transpile: ['vuetify/lib'],
    plugins: [new VuetifyLoaderPlugin()],
    typescript: {
      typeCheck: false,
    },
  },
};

export default config;

~/plugins/social-sharing.ts

import Vue from 'vue';
import SocialSharing from 'vue-social-sharing';

Vue.use(SocialSharing);

~/components/Footer.vue

<template>
  <v-footer>

    <social-sharing url="https://vuejs.org/" inline-template>
      <v-layout row justify-center>
        <network network="vk">
          <v-btn dark>
            <v-icon>fa-envelope</v-icon>
          </v-btn>
        </network>
      </v-layout>
    </social-sharing>

Environment

Nuxt: 2.8.1 mode ( universal )
TS: 8.2.0

For Tooling issues:
- Node version: 10.15.
- NPM version: 6.9.0
- Platform: Linux (Solus 3.9999 Shannon)

Build log:

[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.

[Vue warn]: Unknown custom element: <v-layout> - did you 
register the component correctly? For recursive components, 
make sure to provide the "name" option.

found in

---> <SocialSharing>
       <VFooter>
         <Footer> at components/Footer.vue
           <VApp>
             <DefaultLayuot> at layouts/default.vue
               <Root>

[Vue warn]: Unknown custom element: <v-btn> - did you 
register the component correctly? For recursive components, 
make sure to provide the "name" option.

found in

---> <SocialSharing>
       <VFooter>
         <Footer> at components/Footer.vue
           <VApp>
             <DefaultLayuot> at layouts/default.vue
               <Root>

[Vue warn]: Unknown custom element: <v-icon> - did you 
register the component correctly? For recursive components, 
make sure to provide the "name" option.

found in

---> <SocialSharing>
       <VFooter>
         <Footer> at components/Footer.vue
           <VApp>
             <DefaultLayuot> at layouts/default.vue
               <Root>

[avanishp2]

I am also facing the same issue with this plugin. I need to render mdiSvg icon using v-icon component of vuetify inside network.

<span tabindex="0" data-link="#share-reddit"><v-btn dark=""><v-icon>M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z</v-icon></v-btn></span>

Any work around...

[lucafaggianelli]

The only workaround I found is to globally register the needed Vuetify components:

import Vuetify, { VIcon } from 'vuetify/lib'

Vue.use(Vuetify, {
  components: {
    VIcon
  }
})

local registration of Vuetify components inside the component that uses vue-social-sharing doesn't work

[H6LS1S]

Issue is not active, and a partial solution has been found.