Vuetify buttons in vue-social-sharing of nuxt application

Question

I'm trying to implement this - https://github.com/nicolasbeauvais/vue-social-sharing in my nuxt (+vuetify) application.

I've created a file - vue-social-sharing.js in plugins folder:

import Vue from "vue";
import VueSocialSharing from "vue-social-sharing";

Vue.use(VueSocialSharing);

included them in nuxt.config.js

 plugins: [
    "@/plugins/vuetify",
    "@/plugins/vue-social-sharing.js"
  ],

I'm trying to beautify the buttons with Vueity (this works fine - https://jsfiddle.net/menteora/evydLj65/1/)

<social-sharing url="https://vuejs.org/"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
  <div>
      <v-btn><network network="email">
          <i class="fa fa-envelope"></i> Email
      </network></v-btn>
      <v-btn><network network="facebook">
        <i class="fa fa-facebook"></i> Facebook
      </network></v-btn>
  </div>
</social-sharing>

But I'm running into the below errors:

[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-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I think it is an issue with configuration, v-btn is not available with social-sharing is being rendered, please suggest.

Thanks

is there any problem if you import the Vuetify in this project ? see inste the component your v-btn will work I believe but outside you may need the access to vuetify, so just install on this project. — Zubaer Haque, Aug 27 '19 at 08:58

score 0 · Answer 1 · answered Aug 27 '19 at 09:59

I haven't installed those, but I can almost bet that the fact you are wrapping network components with a button is a problem.. Because the markup that it generates most likely looks like this:

<ul class="networks">
  <button>
    <li></li>
  </button>
</ul>

Have you tried to replace this markup with:

<social-sharing>
  <div>
    <network network="facebook">
       <v-btn><i class="fa fa-fw fa-facebook"></i> Facebook</v-btn>
    </network>
    <network network="facebook">
       <v-btn><i class="fa fa-fw fa-twitter"></i> Twitter</v-btn>
    </network>
  </div>
</social-sharing>

Yes I tried that ... any v-btn inside social-sharing is giving error — Surya Chandra Rao Gandreddi, Aug 28 '19 at 07:28

Vuetify buttons in vue-social-sharing of nuxt application

1 Answers1