При работе с проектами где не используется SSR (Server Side Rendering) или внедрение его невозможно, возникает проблема, что некоторые функции или логика пишутся два раза для статических элементов которые распечатывает backend и для компонентов которые рендерит Vue.

К примеру нам нужно реализовать компонент сниппета товара у которого есть ряд требований:

• Его можно распечатать статично с бекенда со всей нужной информацией для SEO и логики
• Его можно использовать как обычный компонент Vue, передавая параметры через v-bind, навешивая события click и т.д.
• Он должен отображать актуальное состояние кнопки купить
• После нажатия на кнопку «Купить», должен появится прелоудер ожидающий статус корзины