Ответы пользователя по тегу Vue.js
  • Как подключить vue-компонент к сайту(без SPA) и настроить ssr?

    mr_T
    @mr_T
    Web-разработчик
    SSR подразумевает исполнение кода vue компонентов на сервере, так что именно ssr сделать на php не получится. Для этого нужно поднимать node сервер, сделать нормальную сборку и т.п.
    2 более простых варианта:
    1) Использовать пререндеринг для страниц с vue компонентами, что всё равно потребует установки node сервера, но само приложение менять не придётся.
    2) Тупо дублировать разметку в компоненте и на сервере.

    В общем, какой-то чудесной серебряной пули, которая быстро и без геморроя решит задачу, не существует.
    Ответ написан
    Комментировать
  • Компонент из двух строк таблицы?

    mr_T
    @mr_T
    Web-разработчик
    Именно повторить - никак. Каждый компонент должен иметь единственный элемент верхнего уровня, и с этим ничего не поделать. Так что либо через tbody, как писали выше, либо дробить на несколько компонентов, либо оставить всё в цикле template v-for.
    Ответ написан
    Комментировать
  • Как добавлять в Webpack сборку кастомный код на лету?

    mr_T
    @mr_T
    Web-разработчик
    Если не давать сторонним разработчикам вклиниваться в процесс сборки и вообще не давать возможность пересобирать проект, то силами webpack такое вряд ли можно провернуть. В webpack модули должны быть предсказуемыми на момент сборки и, насколько я знаю, динамически их загружать из внешних источников не выйдет.
    Можно либо всё-таки пересобирать проект при добавлении сторонних плагинов и просто подгружать все плагины из определённых папок (с помощью require.context), либо писать собственный динамический загрузчик.
    Передача зависимостей плагинам - вообще не проблема при любом из подходов. Просто каждый плагин должен иметь какую-то функцию инициализации, в которую вы можете передать нужные зависимости в качестве аргументов. При желании можно даже какой-нибудь DI замутить.
    Ответ написан
    Комментировать
  • Какой JavaScript фреймворк выбрать?

    mr_T
    @mr_T
    Web-разработчик
    ВАЖНО! Ниже строго ИМХО.

    Если коротко, то либо Angular 4, либо Vue.

    Angular (почти) привязан к TypeScript (что не плохо, но стоит иметь в виду) и строг с точки зрения подходов к разработке. Он отлично подходит для крупных компаний, где много разработчиков трудятся над одним проектом. По крайней мере из всех существующих фреймворков/библиотек он лучший в сегменте.
    Ну и, разумеется, Angular 1 уже можно даже не рассматривать - это фактически совсем другой фреймворк, да и плюс один из первых в своём роде. На нём была произведена своеобразная работа над ошибками, результат которой мы видим сейчас не только в Angular 2/4, но и во многих других фреймворках/библиотеках.

    Vue - это вариант гораздо более простой и понятный, но оттого не менее крутой. Он даёт больше свободы, что скорее плохо для больших команд, но зато писать на нём одно удовольствие. Я бы сказал, что Vue вобрал в себя всё лучшее от Angular и React, в итоге став полноценной альтернативой первому и заменой второму. Он сейчас очень активно развивается и вангую, что рано или поздно он вытеснит React.
    И я не утверждаю, что React плохой, просто Vue объективно лучше по всем параметрам. Пока что кроме сообщества в силу разницы в возрасте, но это временно.

    Все остальные фреймворки/библиотеки стоят внимания только разве что в целях ознакомления, так как они не дают никаких ощутимых преимуществ перед Vue или Angular.
    Ответ написан
    Комментировать
  • Как изменить другой компонент при изменение пути(vue-router)?

    mr_T
    @mr_T
    Web-разработчик
    Если app-header опирается именно но роутер и только на роутер (то есть другие компоненты не будут непосредственно влиять на показ каких-то элементов), то можно сделать очень красиво и изящно через computed, что-то типа такого:
    computed: {
        headerTab() { return this.$route.path === '/result'; }
    }


    Если предполагается что-то более сложное, то можно аналогичным образом воспользоваться полем this.$route.meta (подробнее)

    Если же переменная должна зависеть от каких-то плохо предсказуемых внутренних состояний компонентов, то либо использовать подход с событиями, либо уже переходить к тяжёлой артиллерии - брать vuex и опираться на state. Но если вы думаете, что этот способ подходит для данной задачи, то я почти уверен, что вы делаете что-то не так :)
    Ответ написан
    3 комментария
  • Как сделать авторизацию у SSR приложения?

    mr_T
    @mr_T
    Web-разработчик
    1. Для начала по SSR не нужно заморачиваться - пускай рендеринг всегда исходит из того, что пользователь не авторизован. Всё остальное можно подгрузить на клиенте при необходимости.
    Какой порядок аутентификации нужен
    - довольно странный вопрос, так как это решать вам в зависимости от того, какие условия задачи :) Предполагая, что вам нужно узнать, какие есть варианты, могу сказать, что в общем их 2 - стандартная для сайтов история с куками и сессиями или получение токена и дальнейшая авторизация по нему, то есть стандартная история для всяких REST API.
    2. Если имеется в виду stateless авторизация на клиенте через OAuth, то есть замечательная библиотека для этого. Если не хочется тянуть такую большую зависимость, то можно и самому реализовать - там всё довольно просто. Могу подсказать конкретнее, если интересно. На бэкенде можно взять готовое решение, коих куча для любого языка/фреймворка/CMS.
    3. Тонкостей особо нет. Получил токен или куку сессии и всё. Дальше уже всё зависит от того, что конкретно нужно реализовать.

    Всё, что касается процесса подтверждения email относится к бэкенду, так что тут всё стандартно, и SSR ничего не меняет. Опять же, есть куча готовых решений для любой платформы. OAuth можно тоже полностью отдать бэкенду, но тут нужно понимать, что тогда не получится этот бэкенд использовать для stateless API.
    Ответ написан
  • Как правильно построить SPA на Laravel + vue.js?

    mr_T
    @mr_T
    Web-разработчик
    Blade шаблоны обрабатываются исключительно сервером, vue файлы же собираются системой сборки и попадают в js/css/..., которые подключаются на уже загруженной браузером странице.
    Если у вас SPA, то blade шаблонов вообще может не быть (или просто будет один, но без содержимого, так как всё содержимое будет создано на клиенте с помощью vue).
    Как следствие, мультиязычность может быть реализована или силами клиентского JavaScript кода, или подгрузкой данных через API с указанием нужного языка. Варианты, само собой, не взаимоисключающие :)
    Соответственно, при вызове функций API нужно будет так же передавать каким-либо образом желаемый язык. Например, в куках, сессии или вообще в дополнительном параметре запроса.
    Ответ написан
    Комментировать
  • Переход по страницам с get параметром. Как реализовать в vue.js?

    mr_T
    @mr_T
    Web-разработчик
    Вот это должно решить проблему. Там примеры с параметрами пути, но с query тоже должно сработать. В любом случае, если не сработает beforeRouteUpdate, то watch $route точно сработает.
    Ответ написан
    Комментировать