7 паттернов Vue, которые стоит использовать чаще

Если вы используете фреймворк Vue, то рекомендуем вам обратить внимание на несколько паттернов, которые присутствуют в официальной документации, но могли быть не замечены:

https://tprg.ru/Pjlc

#vue

#english #article

Как структурировать проект на Vue

https://itnext.io/how-to-structure-my-vue-js-project-e4468db005ac

#english #article #important

Как организовать удобный API-шлюз во Vue

Smart api module for VueJS

https://itnext.io/vue-tricks-smart-api-module-for-vuejs-b0cae563e67b

#english #article #important

Автоматическое создание роутов на основе структуры каталогов в папке views.

Довольно интересное решение, правда, несколько смущает использование async/await

https://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50

Готовый пакет с этой штукой.
https://www.npmjs.com/package/vue-automatic-router

​​Перестанут ли PWA работать в Chrome 93?

Пользователь medium.com по имени Кевин Бэйсит предположил в своем блоге, что 52% всех Progressive Web Apps (PWA) перестанут работать с выходом Chrome 93 и Edge 93. Для решения проблемы Кевин Бэйсит разработал ресурс Progressier, который позволяет создать PWA-приложение за считанные минуты.

https://highload.today/perestanut-li-pwa-rabotat-v-chrome-93/

#google #chrome #mozilla #microsoft #samsung #apple #pwa #edge #progressier

☕️ 5 продвинутых советов по повышению производительности Vue

Рассмотрим советы и рекомендации по оптимизации памяти и уменьшению повторного рендеринга, которые могут быть применены к любому приложению на vue2/vue3.

https://proglib.io/w/1b444261

#vue

Nuxt | Создание файла с глобальными переменными

Хранить глобальные переменные, вроде адреса api для axios, можно и во vuex store, но это получается очень громоздко и избыточно.

Можно создать файл в папке plugins:

// globalvars.js
export default ({ app }, inject) => {
    inject("vars", {
        apiUrl: "some_url",
    });
};

Подключить его в nuxt.config.js:

export default {
  plugins: ['~/plugins/globalvars.js']
}

И использовать в компонентах:

this.$vars.apiUrl

Vue Cheatsheet (шпора по вьюхе)

https://marozed.com/vue-cheatsheet/

Nuxt + Strapi = ❤️

Strapi — это headless CMS с открытым исходным кодом, сокращающая время затрачиваемое на разработку API.

Strapi предоставляет ряд встроенных возможностей: панель администратора, аутентификацию и управление доступами, управление контентом, генерацию API и т.д.

Серия статей расскажет как подружить Nuxt и Strapi на примере создания сервиса по доставке еды.

Топ-10 библиотек UI-компонентов для Vue

Для Vue существует множество различных библиотек, которые предлагают готовые к использованию UI-компоненты. У каждой из них есть свои особенности.

В этой статье представлены наиболее популярные из них:

https://tprg.ru/VFyH

#vue

Руководство по прогрессивным веб-приложениям, которое вы давно искали

Преобразуйте свои старые веб-сайты в PWA https://betterprogramming.pub/the-progressive-web-apps-guide-youve-been-looking-for-5ae3fa2cea83

Попиксельная анимация нас Canvas

Двухчасовой урок по прикольным анимациям.

https://www.freecodecamp.org/news/create-pixel-effects-with-javascript-and-html-canvas/

Working with Vue.js

Автор: sitepoint
Год издания: 2019

Скачать книгу pdf
Скачать книгу epub

#vue #english

Почему фронтэндеру надо быть экспертом в Webpack

https://link.medium.com/XvXzbtqp4eb

Nuxt | Определение типа устройства

@nuxtjs/device - вставляет флаги, указывающие тип устройства, доступные во всём приложении:

$device.isDesktop
$device.isMobile
$device.isTablet
$device.isMobileOrTablet
$device.isDesktopOrTablet
$device.isIos
$device.isWindows
$device.isMacOS
$device.isAndroid

Для использования в стилях можно добавить флаги в виде классов на родительский элемент:

<div id="app" :class="{ ...$device }">

4 лучших альтернативы Tailwind CSS на 2021 год

https://areknawo.com/top-4-tailwind-css-alternatives-for-2021/

Vue | Тестирование компонентов

Коллекция коротких примеров тестирования компонентов с использованием vue-test-utils – официальной библиотекой для тестирования vue компонентов. Также используется Jest – современный фреймворк для тестирования. Рассматривается vue-test-utils API и лучшие практики тестирования.

​​Как интегрировать нужную библиотеку или инструмент во Vue.js? Схема фронтенд-разработчика GitLab Ильи Климова

Фронтенд-разработчик в GitLab Илья Климов создал гайд о том, как интегрировать модули в проекте на Vue.js. Незнание часто ведет к проблемам, которых можно избежать, если применять простую схему.

Полный текст читайте на нашем сайте — https://highload.today/kak-integrirovat-nuzhnuyu-biblioteku-ili-instrument-vo-vue-js-shema-frontend-razrabotchika-gitlab-ili-klimova/

#vuejs #websocket #npm #apollo

Переписываем Nuxt Hacker News с помощью Fastify, Vite и Vue 3

https://vuejsdevelopers.com/2021/03/23/nuxt-vite-fastify/

Принципы юнит-тестирования

Автор: Хориков Владимир

Год издания: 2021

Скачать книгу

#testing #русский