Артем Прохоров

Вот по-быстрому накидал в качестви зарядки такой кастомный дерьмохук (который ни в коем случае нельзя использовать в проде, только в целях демонстрации. :) ):

import { Ref, computed, ref, watch, onMounted, onUnmounted } from 'vue';

function isHTMLElement(arg: unknown): arg is HTMLElement {
  return !!arg && arg instanceof HTMLElement;
}

function useCSSVariable(
  variable: string,
  el: HTMLElement | Ref<HTMLElement> = document.documentElement
) {
  if (!variable.startsWith('--')) variable = `--${variable}`;
  if (!isHTMLElement(el)) watch(el, value => (el = value), { immediate: true });

  const prev = ref();

  let timeoutId: number;
  const interval = () => {
    const current = isHTMLElement(el)
      ? getComputedStyle(el).getPropertyValue(variable)
      : null;

    if (current !== prev.value) prev.value = current;

    timeoutId = window.setTimeout(interval, 100);
  };

  onMounted(() => {
    interval();
  });

  onUnmounted(() => {
    clearTimeout(timeoutId);
  });

  return computed<string>({
    set(value) {
      let current: null | string = null;

      if (isHTMLElement(el)) {
        el.style.setProperty(variable, value);
        current = el.style.getPropertyValue(variable);
      }

      if (prev.value !== current) prev.value = current;
    },
    get() {
      return prev.value;
    }
  });
}

Ещё раз - использовать это не надо, это скорее шутка. Что надо - выяснить твою задачу и решать её нормально по-человечески.

Вопрос по большому счёту не относится к vue.

Решения:
1. Использовать класс-модификатор, который порасит как надо.

<template>
  <input class="hover--red"/>
</template>

<style>
.hover--red:hover {
  color: #f00
}
</style>

2. Использовать css (не путать с scss) переменные.

<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input :style="{'--hover-color': hoverColor}"/>
</template>

<style>
input:hover {
  color: var(--hover-color)
}
</style>

...upd: совсем забыл про такую фичу vue:
3. Если стили лежат в sfc можно использовать переменные через v-bind в <style>:

<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input />
</template>

<style>
input:hover {
  color: v-bind(hoverColor)
}
</style>

А забыл я про неё потому, что категорически против такого смешения кода и стилей. Но я не могу вам запретить.:)

Значения по умолчанию для этого не предназначены.
Сделай computed значение в которым смежри входящее с дефалтным как тебе нвдо.

Поле depends_on определяет только последовательность запуска и удаления сервисов, к остановке отношения не имеет.
Искомое вами поведение задаётся через healthcheck проверки доступности базы в backend и бэкенда во frontend... или простой docker compose -f путь/до/docker-compose.yaml stop, т.е. просто остановить все сервисы.

На том же самом 443 порту прослушать не получится, потому придётся прослушивать на отдельном, и проксировать через nginx.
Нужно добавить отдельный блок server для поддомена (или несколько блоков), но со своими настройками и без default_server. Не старые блоки заменить, а дописать новые. Что-то вроде этого:

server {
    listen [::]:80;
    listen 80;

    server_name api.example.com;
    return 301 https://$host$request_uri;
}

server {
    listen [::]:443 ssl;
    listen 443 ssl;
    http2  on;
    server_name api.example.com;
    ssl_certificate путь_к_серту_для_api.example.com;
    ssl_certificate_key путь_к_ключу_для_api.example.com;
    location / {
        proxy_pass 127.0.0.1:порт_вашего_приложения;
        ........
        ........
    }
}

Запрещено, если сайт действует в России, его владелец россиянин и его использует россиянин.

Соответственно ты можешь иностранным пользователям давать иностранные сервисы аутентификации.

Если сайт не доступен в России, то тоже можно использовать все сервисы.

Если в России доступен, то перед аутентификацией надо спросить у пользователя, откуда он и не показывать иностранные сервисы тем, кто в россии

Читайте закон.

Владелец сайта и (или) страницы сайта в сети "Интернет", и (или) информационной системы, и (или) программы для электронных вычислительных машин, являющийся российским юридическим лицом или гражданином Российской Федерации и осуществляющий свою деятельность в сети "Интернет" на территории Российской Федерации, в случае, если доступ к информации, размещенной на его сайте и (или) странице сайта в сети "Интернет", и (или) в его информационной системе, и (или) программе для электронных вычислительных машин, предоставляется пользователям, прошедшим авторизацию, обязан проводить ее в отношении пользователей, находящихся на территории Российской Федерации, одним из следующих способов: ...

потому left - это то, сколько останется до края при прилипании, а в примере даже предыдущая колонка шире. Кажется, в данном случае лучше всего использовать offsetLeft для этого значения.

как-то так:
https://codepen.io/FragsterAt/pen/XWwYBbg?editors=1010

Ну как-то так

let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

Хотя в версии 3 уже работает и так

<router-link :to="{ name: 'routeName'}" target="_blank">
Текст
</router-link>

Контейнеру прописать:

overflow: hidden;

! - приведение к булевому значению и смена его «знака» на противоположный.
!! – приведение к булевому значению и двойная смена его «знака» на противоположный. То есть упрощение любого типа данных до true или false.

!42 -> false
!!42 -> true

Никак, для отслеживания изменения ширины элемента нужно цепляться с помощью ResizeObserver непосредственно к dom элементу. Ну и обращение к $parent выглядит как какой-то костыль.

Ответ: по ситуации. :)

В идеальном мире: сторонние компоненты должны поддерживать всю возможную стилизацию стандартизированным образом: либо через props, либо (реже и хуже) через документированные классы разрешённые к изменению сверху. В ином случае всегда будет оставаться шанс, что всё развалится при обновлении компонента.

Теперь собственно к нашему, катящемуся в бездну, миру: да, смотреть шаблон компонента и менять стили через :deep или глобально. Обязательно писать к этому тесты, чтобы отвал после какого-то обновления не пролез незаметно на прод.
Если править классы становится слишком сложно, то форкать к себе, и править как хочешь. Также можно форкнуть если компонент простой.

Обратно к идеальному миру: при желании можно попробовать пропихнуть пул реквест автору оригинального компонента, поддерживающий нужную кастомизацию(естественно в универсальном и удобном виде).

Зачем? Просто в public положить и сервер отдаст файл по прямой ссылке.

В Vite, метод require() по умолчанию недоступен. Вместо этого Vite использует импорт ES6 для обработки зависимостей. Чтобы импортировать модуль fs, вы можете использовать следующий код:
import fs from 'fs';

Свойства, Сменить значок.

- <Form @submit="onSubmit" :validation-schema="schema">
+ <Form @submit="onSubmit" :validation-schema="schema" validate-on-mount>

Открыть компанию (или местный ИП) и мерчант на нее.
Ну или тупо прямыми платежами на карту (при значительных оборотах заблокируют быстро).
Либо прокладки типа PayPal, etc.