Aetae

Есть много способов сделать это разной паршивости, но правильный метод: сделать компонент-обёртку, который и навесит весь нужный функционал внутри себя.
Самый примитивный пример:

Vue.component('m-tooltip', {
  mounted() {
    const tooltip = M.Tooltip.init(this.$el, {enterDelay: 400});
    this.$once('hook:beforeDestroy', () => tooltip.destroy());
  },
  render() {
    return this.$slots.default
  }
})

Если нужно что-то большее - всегда можно усложнить.

Правильный ответ: querySelectorAll никак не переделывается под Vue.
Забудь про прямую с работу DOM. В Vue ты работаешь с данными и только данными. Изменения в данных автоматически отражаются на отображении, но отображение ты руками вообще не трогаешь.

Если есть проблемы с пониманием - дай более конкретный пример, и тогда мы подскажем более конкретное решение.

Если тебе это нужно для разработки - то тебе это не нужно.)
Используй webpack devserver(из коробки в vue-cli) и настрой proxy до бэка. Для фронта всё будет "на одном сервере" и не нужно никаких заморочек.

Подсмотрел такую фишку в codepen: задавать корню принудительно нужную ширину и использовать

transform: scale(реальная ширина/установленная ширина)

, вписывая обратно.

А по поводу особого vue-фрейма - а собсвенно что такого вы от него хотите? Обычный фрейм справляется со своей задачей.)

Запускать его надо не через обычный yarn serve, а через yarn electron:serve. Как и билдить. Читайте описание тех модулей, что подключаете.

Если совсем просто, можно утащить например отсюда карту мира в svg и навешать обработчики вручную.
Если посложнее - оттуда же стащить geojson версию и использовать любую либу, умеющую с ним работать.
Если слишком толстые карты - можно их прогнать через соответстующие оптимизаторы.

Локальный модуль можно указывать через link: или через file:. В первом случае создаётся симлинк на модуль в node_modules, во втором модуль туда просто копируется. В первом случаем может не завестись по разным эзотерическим причинам, но если завелось - удобнее конечно использовать его.

Если же использовать не npm, а yarn - добавляются ещё удобные варианты:
1. yarn workspaces: вы кладёте несколько ваших модулей\приложений в один реп, и yarn собирает все зависимости в один node_modules и линкует использующийся модули туда же. В итоге отсутствует дубликация файлов и все модули работают с одними и теми же либами - что полезно в деве если используется расширение сторонних модулей. Очень удобно.
2. yarn link: это чисто локальная фишка для разработки, вы делаете yarn link в корне одного модуля и он регистрируется глобально, после чего в другом модуле где хотите использовать делаете yarn link "имя" и он линкуется.

Если не нужна поддержка 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'
}),

Переменные удобнее всего подключать глобально через prependData.
Соответственно и менять удобно в одном месте. По условию или ещё как.

А вот как у вас три проекта в одном репозитории - вопрос отдельный.

Typescript работает только с кодом, он не знает что-там в Vue шаблоне, увы. Потому в $refs у него лежат голые компоненты Vue или Element'ы.
Я лично вручную указываю через объединение интерфейсов - внизу добавляю перекрывающий:

@Component
export default class Login extends Vue { 
  // ...
}
export default interface Login {
  $refs: {
     loginForm: any; // на самом деле не any, а интерфейс компонента, поддерживающий нужные методы
  }
}

Если альтернатив со стороны сервера не предусмотрено(websocket или хотяб олдовый long polling), то только долбиться.

Тупой вариант: как в циклом выводите, так в цикле инициализируйте(при v-for в this.$refs.dropdow лежит массив).
Правильный вариант: сделать отдельный компонент m-dropdown, который внутри проводит всю нужную инициализацию и расставляет нужную вёрстку, после чего подключать циклом именно этот компонент.
Идеальный вариант: использовать либы написанные на vue, дабы избежать лишнего оверхеда.

Модуль распространяется в формате umd, так что нет никаких проблем использовать его без всяких сборок:
Другое дело, что системы сборки вам стоит изучить и чем раньше тем лучше, т.к. первоначальные трудности с лихвой компенсируются последующим удобством.

Стили же вручную подключаются, из описания:

import 'vue-toast-notification/dist/theme-default.css';
//import 'vue-toast-notification/dist/theme-sugar.css';

Просто скопируй css в проект, изменяй и подключай напрямую: import './theme-default.css'; или типа того.
Ну элементарная логика же.

А изменения в node_modules в любом случае только локальны, в этом вся суть - не таскать код библиотек с кодом проекта. Если очень надо - можно сделать копию библиотеки и подключить через file:\link:, но это не ваш случай.