Сергей delphinpro

Использовать стрелочные функции

methods: {
    login() {
        this.$auth.login({
            params: {
                email: this.email,
                password: this.password
            },
            success: () => {
                // handle redirection
                const redirectTo = this.$auth.redirect()
                    ? this.$auth.redirect().from.name
                    : this.$auth.user().role === 2
                        ? 'admin.dashboard'
                        : 'dashboard'
                this.$router.push({name: redirectTo})
            },
            error: error => {
                this.has_error = true
                this.errors = error.response.data.errors || {}
                this.error = error.response.data.error
            },
            rememberMe: this.remember_me,
            fetchUser: true
        })
    },
    ........
}

Вы брикпойнты по ресайзу что ли пересчитываете? Это мрак.
Попробуйте использовать matchMedia
Такие брикопойнты отлично уживаются с реактивностью. Проверено.

На примере одного пойнта (в App.mounted()):

const mqDesktop = window.matchMedia('(min-width: 992px)');
const mqMobile  = window.matchMedia('(max-width: 991px)');
mqDesktop.addListener(e => { if (e.matches) this.setBreakpoint('desktop');});
mqMobile.addListener(e => { if (e.matches) this.setBreakpoint('mobile'); });
if (mqDesktop.matches) this.setBreakpoint('desktop');
if (mqMobile.matches) this.setBreakpoint('mobile');

Здесь this.setBreakpoint() — это мутация вьюкса.

Проксируйте через свой сервер.
Делайте запрос к себе, у себя сервером забирайте разметку с чужого сайта, парсите и отдавайте нужные значения на фронт.

props: ['color'], !!!

<Card :color="color"/>
<Card color="#f00"/>

if (method_exists($controller, $action)) {
    /** @var MyClass $cObj */
    $cObj->$action();
    $cObj->getView(); // PhpStorm ругается, что метод не найден
} else {
    echo "<code>Метод {$controller}::{$action} не найден</code>";
}

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

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;
}