Регистрация плагина Nuxtjs - PullRequest
Новая
       25

Регистрация плагина Nuxtjs

0 голосов
/ 12 июня 2019

Мне любопытно, что методология Nuxt.js используется для регистрации плагина.Я читал документацию для Nuxt.js и немного запутался в методологии регистрации.

I не не хочет регистрировать плагины, такие как vue-flag-icon, во всем мире.

Насколько я понимаю, когда мы регистрируем плагин, мы используем папку плагина следующим образом: 

import Vue from 'vue'
import FlagIcon from 'vue-flag-icon'


Vue.use(FlagIcon)

Теперь я могу использовать компонент flag в любом месте моего приложения - я этого не хочу !!!

Я хочу загружать плагины ТОЛЬКО в те компоненты, которые в них нуждаются.

Я попытался загрузить их как компонент, например: 

components:{
 'flag': ()=> import('path to plugin') // @/plugins/vue-flag-icon
}

Это не работает.

Я изменил свой скрипт плагинов на: 

import Vue from 'vue'
import FlagIcon from 'vue-flag-icon'

export default () => {
  Vue.use(FlagIcon)
}

А затем попытался зарегистрировать плагин в компонентах следующим образом: 

   import flag from '@/plugins/vue-flag-icon';

    created(){
       flag()
   }

Мои вопросы на самом деле:

  1. Как я могу зарегистрировать плагин в компоненте, не импортируяvue экземпляр?(Я думаю, это называется шиной)
  2. Это плохая практика для импорта плагинов непосредственно в компоненты?
  3. Регистрация всех плагинов в nuxt.config.js создает больший файл загрузки для пользователей, чтобы загрузить(пример: регистрация vue-twix не требуется на страницах, на которых нет текстовых областей), или nuxt / webpack будет обрабатывать удаление ненужных плагинов на странице за страницей или компонент за компонентом (так что мне даже не нужно беспокоиться оэтот)?.Если это так, то я копаю нукст.

Спасибо

1 Ответ

0 голосов
/ 13 июня 2019

Если вы хотите использовать FlagIcon только для определенных компонентов, вы должны импортировать его и использовать для каждого компонента, который вы хотите использовать. 

<template>
  <flag iso="ca" />
</template>

<script>
import FlagIcon from 'vue-flag-icon'
export default () => {
  components: {
    FlagIcon
  }
</script>

Это должно работать.

Длядругие компоненты, не забудьте импортировать любые таблицы стилей, которые могут потребоваться компоненту: 

<style lang="scss" scoped>
  @import 'path/to/plugin/style.css';
</style>
...