gpyshenko

Например, вот так:

it('Request', () => {
    cy.server()
    cy.route("POST", '/oauth/token').as('getToken')

    cy.get(['data-cy="button-get-token"]').click()

    cy.wait('@getToken').its('status').should('eq', 200)
  })

<transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>

проблема в том что в одних браузерах document.body в других document.documentElement
scroll к элементу на js

scrollToFollowBtn.addEventListener("click", function() {
    scrollToElement(followBlock, 600)
}, false);

function scrollToElement(element, duration) {
    var to = element.getBoundingClientRect().top;
    var from = window.pageYOffset;
    var start = performance.now();
    requestAnimationFrame(function animate(time) {
        var progress = (time - start) / duration;
        1 <= progress && (progress = 1);
        window.scrollTo(0, from + (to - from) * progress | 0);
        1 > progress && requestAnimationFrame(animate)
    })
};

Нужно добавить header'у класс header

// Что то типа этого
const links = document.querySelectorAll(`.link`);

filterSport.addEventListener(`click`, () => {
  for (let link of links) {
    if (!link.classList.contains(`isSport`)) {
      link.style.display = `none`;
    }
  }
}, false);

https://codepen.io/delphinpro/pen/oweQqg?editors=1010

<div class="filters">
  <button class="filter" data-filter="isSport">Sport</button>
  <button class="filter" data-filter="isFood">Food</button>
  <button class="filter" data-filter="isWears">Wears</button>
</div>
<div class="wrapper">
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isWears">WEARS</div>
  <div class="link link_visible isWears">WEARS</div>
  <div class="link link_visible isWears">WEARS</div>
</div>

let filters = document.querySelector('.filters');
let filterButtons = filters.querySelectorAll('.filter');
let wrapper = document.querySelector('.wrapper');
let links = wrapper.querySelectorAll('.link');

filters.addEventListener('click', e => {
  if (e.target.dataset.filter) {

    if (e.target.classList.contains('filter_active')) {
      
      e.target.classList.remove('filter_active');
      links.forEach(item => item.classList.add('link_visible'));
    
    } else {
    
      filterButtons.forEach(btn => btn.classList.remove('filter_active'));
      e.target.classList.add('filter_active');

      links.forEach(item => {
        item.classList.toggle(
          'link_visible',
          item.classList.contains(e.target.dataset.filter)
        );
      });

    }
  }
});

Варианта два: цепочка функций с задержкой или отлагать на текущий i.
UPD: Исправил последствия недосыпа
UPD: Исправили окончательно(в прошлый раз почему-то слетело)

https://jsfiddle.net/6v0q08w1/

Прогрессивный jpg гугли
Вот статья на хабре https://habrahabr.ru/post/165645/

https://www.liquidlight.co.uk/blog/article/how-do-...

Вообще есть обертка: https://github.com/creotip/vue-particles

<template>
  <div id="particles-js"></div>
</template>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

через npm глобально ставьте vue-cli, затем запускайте vue-init webpack-simple, добавляйте vue-router и что вам там еще нужно руками через npm.
Шаблон "webpack" работает, но только в том объеме, в котором он есть. По крайней мере bootstrap-vue не заработал (css не подключились, в отличии от шаблона webpack-simple). Ну, или я его не умею готовить.

Вся магия происходит сама, если все делать в .vue файлах, ответственным за это является vue-loader:

• Поддержка ES2015 по умолчанию;
  
• Позволяет использовать разные загрузчики Webpack для разных частей Vue компонента, например, SASS для <style> и Jade для <template>;
  
• Позволяет использовать пользовательские секции во .vue-файлах, применяя к ним пользовательские цепочки загрузчиков
  
• Обращается со статическими ресурсами, указанными в <style> и <template>, как с зависимостями модуля, и обрабатывает их Webpack загрузчиками;
  
• Может эмулировать scoped CSS для компонентов;
  
• Поддерживает горячую замену модулей.
  

Подробнее тут: vue-loader.vuejs.org/ru/configurations/pre-process...