Aetae

Вот навскидку накидал франкенштейна(больше под свои задачи):

function escapeRegExp(string) {
  return String(string).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// для оптимизации неплохо бы завернуть в memoize-one
const toSpacedRegExp = (needle, ignoreCase = true) => new RegExp(
  needle
  .trim()
  .split(/\s+/)
  .map(chunk => '(' + escapeRegExp(chunk) + ')')
  .join('(\\S*(?:\\s+\\S*)+?)'), 
  ignoreCase ? 'i' : ''
);
// для оптимизации неплохо бы завернуть в memoize-one
const toSomeRegExp = (needle, ignoreCase = true) => new RegExp(
  needle
  .trim()
  .split(/\s+/)
  .map(chunk => '(' + escapeRegExp(chunk) + ')')
  .join('([\\S\\s]*)'), 
  ignoreCase ? 'i' : ''
);

// Возвращает либо false, либо массив разделённых совпадний
// smartFind('start found rest', 'found') // ['start ', 'found', ' rest']
// smartFind('start found rest', 'start') // ['', 'start', ' found rest']
// удобно для подсвечивания найденного тупо через i % 2
function smartFind(haystack, needle) {
  if (!haystack) return false;
  if (!needle) return ['', haystack, ''];

  // ищем сначала разделённые пробелами: ва ся => ВАся СЯпкин
  let result = haystack.split(toSpacedRegExp(needle));
  if (result.length > 1) return result;

  // ищем хоть какое-то совпадение: ва ся => ВАСЯ пупкин
  result = haystack.split(toSomeRegExp(needle));
  return result.length > 1 && result;
}

По ключевым словам "fuzzy search" можно найти куда оптимальнее и красивее вещи, но тут уж сам.:)

Вот например сайт icio.us на http(хз что за сайт, нагуглен из списка "popular websites loaded insecurely") , прекрасно грузит иконку сверху слева.
Так что это не стандартное поведение браузера.

Дайте ссылку на ваш сайт или хотя-бы запросите картинку с вашего сервера руками и покажите какие заголовки он отдаёт.

Пока единственное разумное предположение, что там вместо image/<что-то> идёт какая-то ересь и браузер решает попытать счастья на https. Тогда надо поправить MIME types на сервере.

Ещё вариант, что на сайте когда-то был https с включенным HSTS. Тогда надо руками удалить из браузера сохранённую метку.

Но это всё гадание на кофейной гуще.

Поменяй: props.item.office на 'office' in props.item.
Ты не можешь обращаться к свойству которого нет сразу во всех типах union'a. Но ты можешь проверить его наличие, а дальше ts, в зависимости от результата, сузит тип до того, в котором оно присутствует.

Преобразует любые на входе в универсальные:

class CompatibleBounds {
  northEast = [0, 0];
  southWest = [0, 0];

  constructor(bounds) {
    Object.assign(this, bounds);
  }

  static new(bounds) {
    return new this(bounds);
  }

  get south(){ return this.southWest[1] }
  get west(){ return this.southWest[0] }
  get north(){ return this.northEast[1] }
  get east(){ return this.northEast[0] }
  set south(value){ this.southWest[1] = value }
  set west(value){ this.southWest[0] = value }
  set north(value){ this.northEast[1] = value }
  set east(value){ this.northEast[0] = value }
}

const compatibleBounds = CompatibleBounds.new({
  "south": 43.106491921792255,
  "west": 76.71745650634767,
  "north": 43.4065384633472,
  "east": 77.13974349365236
});
// или
const compatibleBounds = CompatibleBounds.new({
  "northEast": [
    76.92894332280319,
    43.25695003829279
  ],
  "southWest": [
    76.92825667730312,
    43.256449960663694
  ]
});

// на выходе универсальный динамический объект:
compatibleBounds.southWest = [1, 2];
console.log(compatibleBounds.south); // 2

compatibleBounds.south = 3
console.log(compatibleBounds.southWest); // [1, 3]

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

Как уже сказали в комментах: создаёт регулярку с помощью которой можно найти отдельно-стоящее переданное слово(в начале строки, в конце или между пробелами).
Что не сказали:
1. Переданное слово не экранируется на спецсимволы регулярных выражений, потому внезапно может сломаться.
2. Не учитывает знаки препинания(возможно не нужно, если задача специфичкская).

Делая так:
const ThemeProvider: FC = ...;
Ты говоришь ts, что у тебя ThemeProvider имеет тип FC, и пофиг что ты там дальше пишешь. Тип FC по умолчанию не имеет children.

Пиши либо так:
const ThemeProvider: FC<{children: ...}> = ...;

Либо так:
const ThemeProvider = ({ children }: ...) => ...;
* Кстати обрати внимание на деструктуризацию, в react component всегда приходят props, children это поле props, а не верхний аргумент.

Либо так:
const ThemeProvider: FC<PropsWithChildren> = ...
* PropsWithChildren - тип помощник, добавляющий children к объекту, например

PropsWithChildren<{
 prop2: string; 
 prop3: number
}>

но без дженерика просто отдаёт тип вида

{
    children?: ReactNode | undefined;
}

В принципе ts позволяет при желании извратиться и побуквенно наклепать нужные типы:

type Lettrer = 'a' | 'b' | ...
type Digit = 1 | 2 | ...
...

Но делать так, очевидно, не стоит. :)
Оставьте просто string и просто number.
Разве что для удобства чтения и понимания (а также как задел на случай если ts поумнеет в будущем и сможет в более сложные типы) сделайте так:

type ZipCode = string;
type GeoCoord = number;

С одной стороны для кастомных компонентов тебе потребовался бы transformAssetUrls. Однако открыв доки я вижу там:

Converts src to provider optimized URLs

В связи с чем вопрос: а путь то такой вообще работает?
Что будет в img если ты делаешьimport img from '~/assets/images/header.jpg'?

Очевидно transform: rotate(-90deg); и какой-нить transform-origin, наиболее удобный.
Условно так:

Других (адекватных) вариантов собственно и нет.

Подстановка путей к динамическим ассетам осуществляется на этапе сборки. Со строками из js сборка напрямую не работает.

1. Ты можешь сделать так:

import Wordpress from '../assets/wordpress-logotype-wmark.png';
import Bitrix from '@/assets/logotip/1c_bitrix_logo.svg.png';
const brandImgs = {
  '1C Bitrix': Bitrix,
  Wordpress,
};

По сути сделать руками то, что делает сборщик vue с src под капотом.

2. Ты можешь просто сразу положить иконки в папку /public и указывать не относительные пути в рамках проекта, а абсолютные от корня:

const brandImgs = {
  '1C Bitrix': '/logotip/1c_bitrix_logo.svg.png',
  'Wordpress': '/logotip/wordpress-logotype-wmark.png',
 };

3. Ты можешь использовать динамический import().

4. Ты можешь использовать import.meta.glob в vite или require.context в webpack.
(Тут стоит помнить, что все ограничения упомянутые для п.3 применимы и здесь.)

Используй getters, оно именно для этого и предназначено. Точно также как computed в самом vue.

export default createStore({
  state: {
    list1: [],
  },
  getters: {
    list2(state) {
      return state.list1.filter(...) 
    }
  }
})

P.S. И да, нахрен vuex, используй pinia.

Ну так а с чего бы ему что-то прижимать? Они вообще в разных блоках и никак не связаны.
Ну и flex-grow это не про "прижимание", это про "заполнение имеющегося места".

Чтобы что-то "прижимало" .twitter_swipe тебе надо .twitter__row слать flex column, не забыть задать высоту и задать уже для .twitter__body flex-grow.

Если ты не используешь SSR, то тебе достаточно просто reactive/ref объекта, чтоб получить эрзац-стор, тупо:

// где-нибудь 
export const basket = reactive([]); // или ref([]) по вкусу. 
// везде где надо
import { basket } from './...'

Реактивность будет прекрасно работать.

Почему кто-то использует специальные store если можно делать так? Потому что сторы учитывают работу в режиме SSR, а также позволяют удобную отладку в случае множества запутанных связей.
Вам я бы тоже рекомендовал использовать таки store - только pinia, а не vuex. Не вижу причин его не использовать.

По поводу EventBus: с одной стороны новичку её использовать категорически не рекомендуется, т.к. работа со store куда удобнее, очевиднее и надёжнее. Однако и совсем отрицать её использование тоже не следует, шина отлично подходит для случаев когда мы имеем дело именно с событиями, а не изменением состояния. Т.е. послать какой-нить notification или лог - самое оно, использовать для изменения basket, как в вашем случае - нет.

1. no-cors на клиенте это не "отключение cors", иначе не было никакого смысла в cors, это метка "мне похрен на ответ, я просто отправляю". Соответственно с такой меткой ты не можешь читать ответ никак.
2. Если при обычном запросе возникакет ошибка cors - значет сервер не посылает allow-* заголовков и cors не разрешён.
3. Заголовок Set-Cookie ставит, очевидно, cookie. Напрямую его читать в любом случае нельзя.
3.1. Но можно читать поставленную cookie
3.1.1. Но читать её можно только на том домене доя которого она поставлена.
3.1.2. Читать её можно только если она не (как в данном случае) HTTP-only.
5. Возможно вам и не нужно ничего ни откуда доставать: HTTP-only куки передаются браузером в запросе самостоятельно, из скрипта к ним доступа нет. Однако он и не нужен. Отправляйте все запросы с credentials: "include" и значение автоматически будет присутствовать в заголовке Cookie..

compilerOptions.path влияет только собсно на "красные подчёркивания", tsconfig никак не управляет настоящими путями.
Тебе надо руками прописывать alias в конфиге webpack.