[Vue warn]: неизвестный пользовательский элемент: <network>- вы правильно зарегистрировали компонент?вя-социально-доля

Question

Попытка использовать библиотеку vue-social-share (последняя версия 2.4.3), но получаю следующее:

[Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

Я следовал инструкциям, посмотрел примеры кода. Но, похоже, не могу понять, что я пропускаю или ошибаюсь.

Я создал отдельный компонент и просто следовал примеру, предоставленному vue-social-share. Но все равно продолжаю получать ошибку.

Вот мой main.js:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'



Vue.config.productionTip = false;

let SocialSharing = require('vue-social-sharing');
Vue.use(SocialSharing);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

Вот мой компонент (SocialSharingTest.vue):

<template>
<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>
      <network network="email">
          <i class="fa fa-envelope"></i> Email
      </network>
      <network network="facebook">
        <v-icon class="mr-3" style="color: #3b5998">fab fa-facebook</v-icon>
      </network>
      <network network="googleplus">
        <i class="fa fa-google-plus"></i> Google +
      </network>

  </div>
</social-sharing>
</template>
<script>


  export default {
    name: "SocialSharingTest",
  }
</script>

<style scoped>

</style>

Компонент не работает должным образом и продолжает получать ** [Vue Warn], как описано выше. Я вижу рабочий пример того, что я ожидал увидеть:

https://codesandbox.io/s/3yv7q36lq?from-embed

Answer 1

import SocialSharing from 'vue-social-sharing';

import Vue from 'vue'
const VueSelect = {
  install(Vue, options) {
    Vue.component('SocialSharing', SocialSharing)
  }
};
Vue.use(VueSelect)

Можете ли вы попробовать это и посмотреть, работает ли это?

Answer 2

Я также начал получать [Vue warn]: неизвестный пользовательский элемент: v-icon только для этого компонента (не в других компонентах, использующих v-icon). Чтобы исправить это в main.js, я добавил:

const Vuetify = require('vuetify');
Vue.use(Vuetify);

Но теперь попытка включить общий доступ к социальным сетям в компонент, который я уже создал, дает мне [Vue warn]: не удалось смонтировать компонент: шаблон или функция визуализации не определены.

Еще не слишком много изучал. Может иметь какое-то отношение к Vuetify (я пытаюсь включить в? Я буду продолжать копаться в том, что там происходит, но буду помогать, если кто-то знает, что это может быть.

Спасибо. Просто чтобы быть ясно, вышесказанное сработало для оригинального выпуска Кажется, что все работает внутри собственного компонента, но не работает так, как я ожидал, пытаясь включить его в компонент, в котором я хочу его использовать.

ОБНОВЛЕНИЕ - все, что работает для вышеперечисленного, я просто не включил inline-template в свой тег обмена в социальных сетях, например:

<social-sharing url="https://vuejs.org/" inline-template>

Answer 3

Вот как вы регистрируете компонент глобально:

const SocialSharing = require('vue-social-sharing');
Vue.component('social-sharing', SocialSharing)

vue docs