@suffering_frontender

Vue — как встроенное приложение?

Сделано приложение на vue, которое добавляется на сайт. Во vue приложении используется библиотека vuetify, которая перебивает стили сайта. Как решить данную проблему, чтобы стили vuetify использовались только в рамках приложения на vue(без использования iframe)?
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
Aetae
@Aetae Куратор тега Vue.js
Тлен
Если не нужна поддержка IE11 и Safari - можно использовать web-компоненты и просто подключать стили внутри компонента - они инкапсулируются, иначе придётся покорячиться.

Как это сработает с vuetify не скажу, но в похожей ситуации я использовал postcss-prefix-selector, просто добавив с помощью него короткий класс-префикс для всех стилей либы. Соответственно этот класс назначаешь на контейнер с vue и, при удаче, всё заработает.)

Мне, увы, там ещё кастомный трансформ пришлось добавить для корневых (body, :root и т.п.) селекторов, попатчить саму либу местами и проследить чтобы теперь основные стили сайта не перебивали классы либы, но это уже отдельная история.)

P.S. Для работы postcss-prefix-selector с vue-cli не обязательно вручную вкорячивать loader, можно его просто добавить в .postcssrc.js в plugins:
require('postcss-prefix-selector')({
    prefix: '.prefix'
}),
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
без использования iframe

Переписать стили vuetify с учётом специфичности селекторов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы