Сергей delphinpro

Использую расширение PerfectPixel, как правильно им пользоваться?

Наложить картинку. Верстать.

А если у меня разрешение меньше, то как настроить его?

Купить FullHD монитор (минимум)

На каких браузерах проверяется соответствие макета с версткой

По факту на тех, что есть в наличии у заказчика (ну и у вас). В теории совпадать должно везде (плюс-минус).

Как должен работать адаптив?

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

Сделать экшн, в котором выполнить запрос.

actions.loadMenu     = async ({ commit, state }, payload) => {
    if (!state.menus[payload.menu] || payload.force) {
        let response = await Vue.axios.get('/menu/' + payload.menu);
        if (response.status === 200) {
            commit('setMenu', { menu: payload.menu, data: response.data });
        }
    }
};

UPDATE:

store.js

import axios from 'axios';
export default new vuex.Store({
    state: {
        params: null,
    },
    mutations:{
        setParams(state, payload){
            state.params = payload;
        }
    },
    actions: {
        async getParams({comit, state}){
            let response = await axios.get('information/account');
            if (response.status === 200) {
                commit('setParams', response.data);
            }
        }
    }
});

IdWeb.vue

import { mapState } from 'vuex';
export default {
    name: 'IdWeb',
    computed: {
        ...mapState([
            'params'
        ])
    },
    mounted() {
        this.$store.dispath('getParams');
    },
}

<template>
    <li class="state_account_id" v-if="params">
        ID: {{params.id}}
    </li>
</template>

Основная фишка — элемент не трансформируется в реальную модалку.
Сначала вычисляется положение элемента и модалки.
Далее анимация элемента (положение, размеры)
И на месте элемента отображается модалка.
Для большей плавности можно добавить фэйд эффектов. Отобразить модалку сжатую на месте элемента прозрачную. Потом синхронно с элементом анимировать до реального положения. Во время анимации прозрачность модалки увеличивается, прозрачность элемента уменьшается.

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

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