Сергей delphinpro

Оставьте бэкэнд в покое. Пусть просто выплевывает блоки сплошным потоком:

computed:{
  classes(){
    return {
      pagination__btn_disabled: !this.prevPage,
      [`pagination__btn_theme_${this.theme}`]: !!this.theme,
    }
  }
}
<button
  class="pagination__btn"
  :class="classes"
  :disabled="!prevPage"
  type="button"
  title="Назад"
  @click="onPrevPage"
>
  <img class="pagination__icon" src="/svg/admin/pagination/prev.svg" alt="Назад">
</button>

Дофига лишний компонентов на первый взгляд..
Но фиг с ним. Пилите роутер-вью на месте меняемых компонентов:

<div id="app">
    <router-view></router-view>
</div>

<main class="main">
    <app-aside></app-aside>
    <router-view></router-view>
</main>

<section class="app__section">
    <section-header></section-header>
    <router-view></router-view>
</section>

Ну а дальше изучать https://router.vuejs.org/ru/guide/essentials/neste...

<slot name="one" v-if="$slots.one"></slot>
<div v-else>Контент по умолчанию</div>

Когда вы пишете на вью, вы должны ориентироваться на состояние данных. Грубо говоря, императивный подход здесь не совсем в тему.
Вы не должны писать "по клику присвоить класс"
Вместо этого вы должны делать так

data() {
  return {
    isShowHelloBlock: false,
  }
}
<div :class="{someClass : isShowHelloBlock}">Hello</div>
<button @click="isShowHelloBlock = true">toggle block</button>

Изменяя состояние, вы изменяете представление.

У инпута есть своя дефолтная ширина.

2-й блок как будто не видит ширины основного блока, которую задает 1-й блок (sometext)

А вот почему вы решили, что именно первый блок должен задавать ширину?
Второй блок имеет на это ровно такое же право. И он этим пользуется.

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

.inp {
  flex: 1 1 auto;
  width: 0;
}

Там хороший поиск по настройкам, если что =)

File | Settings | Editor | General | Smart Keys
CSS -> Select whole CSS identifiers on double click

<TermsConfirm
  :by="`clicking '${name}'`"
>

<div v-for="(league, index) in leagues.countrys"
     v-if="league.strFanart1"
>
    <h3>{{ league.strLeague }}</h3>
    <h5>{{ league.strFanart1 }}</h5>
</div>

Второй вариант:

computed: {
    leagues() {
      return this.$store.state.leagues.filter(item => !!item.strFanart1);
    }
},

в каждый url путь подставьте
сейчас вы только eot подключили

И уж, коли на Vue пилите, а значит более или менее современные браузеры, то подключайте только woff и woff2 — покроют всё.

@font-face {
  font-family: 'Geometria';
  src: local('Geometria Thin'), local('Geometria-Thin'),
    url('~@/assets/fonts/geometria/Geometria-Thin.woff2') format('woff2'),
    url('~@/assets/fonts/geometria/Geometria-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

Потому что дробных пикселей не бывает. Это неделимая величина.

Тогда почему мне на экран вывело все элементы масива а не один? (тоесть результат их сложения). Почему не вывело 55?

Потому что javascript. $out изначально — строка. Когда вы выполняете конкатенацию строки с числом, число приводится к строке. Когда вы складываете строки — они склеиваются. Вот вам и результат.
Замените строку var out= " "; на var out= 0; и получите на выходе 55.

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

• Отсутствует темная тема
  
• Периодически, хоть и не часто, падает без предупреждения
  
• Можно настроить только один ssh-ключ, а другие приходится импортировать в каждой сессии. Это больше всего напрягает.
  
• Убогая организация репозиториев. В последней версии запилили неограниченную вложенность категорий, но не сделали, сука, перемещение реп по категориям мышкой!
  

и т.д.

Но с этими недостатками можно мириться. В других клиентах бывает, отсутствуют функциональные возможности, а это уже жопа. Например, построчное индексирование изменений.

Рендер на стороне сервера (SSR) — вы будете запускать ваш бандл в node среде, и он будет выплевывать готовую наполненную html разметку.

Второй вариант — Пререндер при сборке (prerender spa). Билд будет рендерить готовые страницы. Этот вариант годится для статичных сайтов.

В обоих случаях вам не нужно по идее лезть в созданный html.
Но, чувствую, вам нужно что-то другое. Поясните точнее.

Возможно вам не требуется делать всю страницу вью-аппликухой. Бывает достаточно делать на нем отдельные блоки/виджеты.

Еще вариант — сделать-таки всю страницу под вью, подключить полную сборку фреймворка (включающую в себя рантайм-компилятор).
Тогда, по идее вы можете формировать страницу другими средствами (php) и использовать в ней свои компоненты.

У меня два SSD: один под систему, второй рабочий.
И третий HDD под фильмы, музычку и т.д.

Оба SSD менял по разу. Проработали примерно года по три. Потом начались глюки. Но современные диски намного лучше стали

Определенно, работать лучше с SSD. Скорость в разы больше.