Vue компонент во всех шаблонах без импорта?
Всем привет, подскажите пожалуйста как сделать так, что бы мой Vue компонент был доступен во всех шаблонах Vue, но при этом его не нужно было каждый раз его импортировать?
Использую Vue фреймворк Quasar.
Ответы (1 шт):
Есть два варианта.
1. Зарегистрировать компонент через Vue.component()
Регистрация компонентов таким образом позволяет использовать эти компоненты во всех Vue шаблонах без дополнительной регистрации.
Пример кода:
import {LoaderSent} from "shared";
import {SunEditor} from "shared";
Vue.component("LoaderWait", LoaderWait);
Vue.component("SunEditor", SunEditor);
Что бы в Quasar-Framework этот код отработал в нужное время его необходимо поместить в boot секцию.
2. Сделать автоматический импорт через webpack Provide плагин
Используем webpack Provide плагин.
Этот способ регистрирует в сборщике Webpack компоненты, позволяя не импортировать их каждый раз в каждом файле.
Пример кода в файла quasar.config.js:
build: {
...
extendWebpack(cfg) {
cfg.plugins.push(
new webpack.ProvidePlugin({
Vue: ['vue', 'default'],
sunImport: ['src/utils/sunImport', 'default'],
request: ['src/utils/request', 'default']
}));
}
}
В этом коде мы регистрируем Vue, sunImport и request компоненты.
Примеры кода взяты с проекта GitHub SunEngine / Client.