☕️ 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 #русский

Todo list на Vue

Типичное приложение, которое пишет разработчик, начинающий изучение фреймворка. Изучив данную реализацию, можно познакомиться с синтаксисом Vue и возможно начать изучение нового для себя фреймворка.

👁‍🗨Практика Vue JS - создание CRM системы

▪️Урок 1. Создание приложения с Vue CLI 3 - Смотреть
▪️Урок 2. Страницы и layouts - Смотреть
▪️Урок 3. Основной layout - Смотреть
▪️Урок 4. Создание фильтра даты + меню - Смотреть
▪️Урок 5. Валидация с Vuelidate - Смотреть
▪️Урок 6. Как создать плагин сообщений - Смотреть
▪️Урок 7. Добавление Firebase - Смотреть
▪️Урок 8. Регистрация через Firebase - Смотреть
▪️Урок 9. Работа с API, валютами и компонентами - Смотреть
▪️Урок 10. Добавление категорий - Смотреть

@itlecture

#песочница #javascript #vue #css
Интересная анимационная панель кнопок на Vue

Ссылка на песочницу

Неплохие, хотя и достаточно очевидные (для меня во всяком случае) советы по улучшению вашего кода Vue

https://betterprogramming.pub/5-principles-for-writing-clean-and-maintainable-vue-js-code-35dfcf5ef08c

Vue | Динамический компонент

При построении списков в цикле может случиться так что некоторые элементы должны быть ссылками, а некоторые нет. Для того чтобы не усложнять разметку можно воспользоваться динамическим компонентом.

👉 @web_craft

​Фронтенд-разработка в Docker

Эта статья поможет фронтенд-разработчикам, которые работают или будут работать над совместным проектом. Здесь вы научитесь разрабатывать фронтенд, используя Docker, который поможет избавиться от проблем с совместимостью у разных людей и не только.

Подробнее в статье:

https://tprg.ru/o1vz

#docker #фронтенд