Как использовать «Компоненты плагина Vue» внутри моего пользовательского плагина vue

#javascript #npm #plugins #vuejs2

#javascript #npm #Плагины #vuejs2

Вопрос:

Я пытаюсь использовать компоненты vuetify внутри моего пользовательского плагина vue, который я создал, но, похоже, мой плагин отрисовывается до того, как приложение «узнает», что vuetify существует.

я пытался использовать Vue.use (Vuetify) внутри моего плагина, но это не сработало, и, по сути, нет смысла использовать его в моем плагине, поскольку я хочу, чтобы пользователь плагина (разработчик) использовал vuetify в качестве глобальной зависимости в своем приложении, чтобы он мог просочиться в мой плагин

это мой html-шаблон плагина vue:

 <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center>
        <div v-if="videoLoading">
          <v-progress-circular v-if="useVuetifyLoader"
            :size="size"
            :width="width"
            :rotate="rotate" 
            :value="videoLoadingProgress*1.5"
            :color="color"
          >
            Downloading...
            {{ `${loadedInMB}/${totalInMb}Mb` }}
          </v-progress-circular>
          <div v-else>
              Downloading...
              {{ `${loadedInMB}/${totalInMb}Mb` }}
          </div>
        </div>
        <div v-else>
          <div>
            <div>foo</div>
          </div>
        </div>
      </v-layout>
    </v-container>
  </v-content>
 

и это мой плагин :

 import MyPlugin from '../lib/MyPlugin.vue';
import Vuetify from 'vuetify'


const install = function (Vue, config) {

Vue.component("my-plugin", MyPlugin)

}




export { install }

*and i tried also :*



 import MyPlugin from '../lib/MyPlugin.vue';
    import Vuetify from 'vuetify'


    const install = function (Vue, config) {
    Vue.use(Vuetify)// <-- did not work
    Vue.component("my-plugin", MyPlugin)

    }




    export { install }
 

и когда я внедряю свой плагин в другое приложение, я получаю эти ошибки:

 Unknown custom element: <v-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option

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

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

Unknown custom element: <v-progress-circular> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
 

Ответ №1:

Как насчет настройки вашего плагина таким образом и включения пользовательских компонентов внутри:

 export default {
  install (Vue, options) {
     Vue.anyMethodYouLike = (value) => value

     Vue.component('v-content', Component);
     // Add `Vue.mixin()` to inject options to all components.
     Vue.mixin({
         // Add component lifecycle hooks and/or properties.
         created() {
         }
     });
     // We can also add Vue instance methods by attaching them to Vue.prototype.
     Vue.property.$myProperty = 'This is a Vue instance property.'
  }
}
 

Затем используйте в своем приложении, например:

 import myPlugin from './plugin.js' // the file with the code above

Vue.use(myPlugin, {
  someProp: 'blahdy blah'  //options to pass
})
 

Ответ №2:

хорошо, итак, я понял это. все, что мне нужно было сделать, это передать Vuetify в качестве параметра в объекте options, а затем я мог бы использовать его в своем файле плагина с помощью Vue.use(my_vuetify_param)