OverVue gets an Overhaul

https://medium.com/@ryanbender/overvue-gets-an-overhaul-a5a0e1bc4657?source=rss------vuejs-5
Rapid Vue.js Prototyping For Your Dev TeamContinue reading on Medium »

Moving to a mono-repo: Part 2, The Destination

https://medium.com/empathyco/moving-to-a-mono-repo-part-2-the-destination-a47e597ff50d?source=rss------vuejs-5
The adventure continues, Empathy.co’s experience moving to a mono-repo to go open source with Interface X.Continue reading on empathy.co »

5 things I struggled with when learning React with a Vue background

https://medium.com/geekculture/5-things-i-struggled-with-when-learning-react-with-a-vue-background-5e23fccb04d2?source=rss------vuejs-5
This article aims to help others (with or without a Vue background) understand React functional components and to get up to speed with…Continue reading on Geek Culture »

In a recent interview, Manaf, a software developer at Turing.com,

https://medium.com/@Turingcom/in-a-recent-interview-manaf-a-software-developer-at-turing-com-24543c0d1753?source=rss------vuejs-5
Owing to the framework’s massive popularity, the Vue.js community continues to grow with contributions from front-end developers across…Continue reading on Medium »

Computed Properties in React vs. Vue

https://medium.com/@shore.jeremiah/computed-properties-in-react-vs-vue-f942e4c763ea?source=rss------vuejs-5
As a software engineer familiar with front-end JavaScript frameworks like React and Vue, you may have a preference for the idioms and…Continue reading on Medium »

VueJS: The Minimum Vars to Use a Component

https://paulxiong.medium.com/vuejs-the-minimum-vars-to-use-a-component-1e3ea89430ff?source=rss------vuejs-5
Div class name, component name, import name, export name, … all those confused me when I was studying Vue.JSContinue reading on Medium »

Vue 3 API Composition

https://medium.com/wedge-digital/vue-3-api-composition-e4317451cc04?source=rss------vuejs-5
VueJs chez Wedge DigitalContinue reading on Wedge Digital »

CRUD Laravel 8 Tutorial + Inertia.js

https://medium.com/@premanterminal.id/crud-laravel-8-tutorial-inertia-js-ffaafd5f7635?source=rss------vuejs-5
Hewo netizen produktif, kali ini aku akan bagi-bagi ilmu dikit. 
Sudah pada pernah pakai laravel? Di sesi kali ini aku akan perkenalin…Continue reading on Medium »

Выбираем алгоритм, или Когда ждать уже невыносимо

https://habr.com/ru/post/582316/?utm_campaign=582316&utm_source=habrahabr&utm_medium=rss
При разработке бизнес-логики приложений нужно продумать действия с множествами – с пересечением, разницей массивов или двойной разницей. Недостатки в этом алгоритме могут привести к рискам. Например, если вам нужно в реальном времени обработать объем данных, превышающий определенную границу, система может «тормозить» – до минуты и даже больше. Такие ситуации требуют лишнего расхода ресурсов, отталкивают пользователей и вызывают другие проблемы.Рассмотрим один из способов, которым мы пользуемся в работе для устранения подобных негативных эффектов. Статья будет полезна как разработчикам с опытом, которые ищут новые способы оптимизации своих продуктов, так и новичкам, которые только погружаются в тему оптимизации. Читать далее

Vue.js для проекта на Bitrix

https://habr.com/ru/post/584130/?utm_campaign=584130&utm_source=habrahabr&utm_medium=rss
Привет, Хабр!Меня зовут Дмитрий Матлах. Я тимлид в AGIMA. Мы с коллегами обратили внимание, что в сообществе часто возникает вопрос о том, как совместить на одном проекте Bitrix-компоненты и реактивные фронтовые движки. Мы неоднократно сталкивались с подобными задачами, и поэтому я решил подробно рассказать, как мы их решаем. Думаю, если вы используете Bitrix-фреймворк в своих проектах, прочитать будет интересно. Ну и забегая вперед, если вы решаете те же задачи по-другому, то интересно в комментариях узнать поподробнее. Читать далее

SEO Analyzer — библиотека для поиска SEO дефектов

https://habr.com/ru/post/586728/?utm_campaign=586728&utm_source=habrahabr&utm_medium=rss
Всем привет!Сегодня хотел бы рассказать об одном решении самой частой проблемы в командной разработке, которое в итоге вылилось в целый npm пакет.И как вы поняли, речь пойдёт о SEO анализаторе, инструменте, который поможет отлавливать SEO дефекты на разных стадиях разработки (и, конечно же, сохранить хорошие отношения с SEO специалистами 😊). Читать далее

[Перевод] Стилизация однофайловых Vue компонентов

https://habr.com/ru/post/587604/?utm_campaign=587604&utm_source=habrahabr&utm_medium=rss
Если у вас есть опыт написания однофайловых Vue компонентов, вы, вероятно, сталкивались с написанием CSS в своем компоненте. Они позволяют разработчикам группировать код более логическими способами, а не разбивать компоненты по используемому языку (HTML, CSS или JavaScript). Возможность группировать стили компонентов непосредственно рядом с HTML-кодом, к которому он применяется, является одним из основных преимуществ Vue, включая возможность применять CSS к компоненту, чтобы он не влиял на другие части пользовательского интерфейса.Однако есть ряд функций взаимодействия Vue с CSS, с которыми вы, возможно, не знакомы, например, применение стилей непосредственно к элементам со слотами или новейшие функции, доступные в Vue 3.2. Давайте рассмотрим некоторые из этих других способов стилизации однофайловых Vue компонентов и их преимущества для ваших приложений. Читать далее

‍Какой JS-фреймворк выбрать новичку — мнения шести экспертов

https://habr.com/ru/post/587204/?utm_campaign=587204&utm_source=habrahabr&utm_medium=rss
Привет! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс.Практикума, Head of Frontend в СберМаркете.



В первой статье о JS-фреймворках я рассказал о самых популярных из них: Angular, React, Vue и других. В комментариях опытные разработчики спорили о том, какой фреймворк лучше, а новички спросили у меня, какой же инструмент выбрать для проекта и с чего начать знакомство с библиотеками.







Большую часть пути разработчика я писал на React. Хоть я и начинал с AngularJS, но убеждён, что это не единственный путь и можно начать с любого другого фреймворка, поэтому для статьи я решил собрать мнения знакомых разработчиков, которые пишут на разных фреймворках. Статья не даст однозначного ответа на вопрос «Что же выбрать?», но поможет решить, в каком направлении двигаться. А ещё подскажет, какие инструменты лучше применять в пет-проектах, а какие — в энтерпрайзе. Если нет времени читать статью целиком, в конце я собрал список лучших фреймворков для новичков на основе личных мнений экспертов.
Читать дальше →

Как устроены мобильные номера. Давайте разберемся

https://habr.com/ru/post/587872/?utm_campaign=587872&utm_source=habrahabr&utm_medium=rss
Привет всем. Последнее время я писал код полей ввода input для номеров телефона и др. И мне пришлось углубиться в эту тему и разобраться как устроены мобильные номера телефонов. И в этой статье я хочу с вами поделиться своим опытом. Я постараюсь очень кратко, так что присоединяйтесь, потратьте 15 минут, если вы этого не знаете и вам любопытно.Если вы занимаетесь программированием на vue.js, то вот вам ссылка на компонент, который включает различные input поля в том числе для номеров телефонов. Мне кажется данный компонент может сильно облегчить вам жизнь, ниже ссылка на github и гифка как работает одно из полей. На этом по вступлению все, дальше только по теме.https://github.com/fakt309/inputv ЧИТАТЬ

Улучшаем производительность vue с помощью selective-object-reuse

https://habr.com/ru/post/587946/?utm_campaign=587946&utm_source=habrahabr&utm_medium=rss
Одна из причин тормозов vue приложения - излишний рендеринг компонентов. Разбираемся, с чем это обычно связано в vue2 и vue3, а затем применяем одну простую технику, которая лечит все эти случаи и не только их. Данная техника уже пол года хорошо работает в продакшене.Примеры этой статьи собраны в двух репозиториях (один для vue2, другой для vue3), с идентичным исходным кодом. Читать далее

Запрещаем браузеру Google Chrome сохранять и предлагать сохраненный пароль в нашем приложении на Vue.js(v2)

https://habr.com/ru/post/589481/?utm_campaign=589481&utm_source=habrahabr&utm_medium=rss
Мир стоит вверх ногами. Корпорация добра печется о нашей безопасности. И в то же время делает все, чтобы наши секреты стали достоянием гласности. Это я о политике гугл в плане сохранения логин-паролей в браузере, через него в аккаунте и о доступности всего нашего секретного добра всем, кто сможет подойти к нашим компьютерам.Да, удобно. Но небезопасно. И временами очень вредно. Запустил я очередной проект на работе. И самой большой проблемой по опыту старого проекта было то, что сотрудники вовсю пользовались автосохраненим паролей, поэтому под Васей мог сидеть Сергей и ни о какой нормальной аутентификации, а тем более разраничении прав доступа речи идти не могло. Читать далее

Управление данными в системе автоматизации на Vue и Vuex и решение проблем тестирования с помощью Jest

https://habr.com/ru/post/590753/?utm_campaign=590753&utm_source=habrahabr&utm_medium=rss
Привет! Меня зовут Артём Карачёв, я фронтенд-разработчик в Sportmaster Lab. Сейчас мы пишем модуль автоматизации физической фотостудии, где работают несколько фотографов, менеджеров, фоторедакторов, кладовщиков и других. Все фото кроссовок, которые вы видите в интернет-магазинах Спортмастера, снимают и загружают в базу данных именно эти люди. Благодаря модулю автоматизации они смогут их выгружать быстрее и легче. Возможно, наш опыт организации vuex-хранилища и слоя получения данных, а также последующего интеграционно-компонентного тестирования окажется кому-то полезным. Читать далее

‍Как мы ускоряли комментарии Хабра

https://habr.com/ru/post/590111/?utm_campaign=590111&utm_source=habrahabr&utm_medium=rss
Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было.



Вы когда-нибудь открывали в старом дизайне Хабра пост с большим числом комментариев? Страничка даже с тысячей сообщений грузится шустро, на ней без серьёзных задержек работает форма для ответа, кнопки голосования и закладок. Но когда мы начали переход на новую версию Хабра, стало понятно, что добиться такой же скорости будет непросто.



Этому есть несколько причин. Во-первых, Хабр стал одностраничным приложением (SPA, Single Page Application) на Vue, то есть теперь переходы между страницами рисуются на клиенте с помощью JS вместо классического серверного рендеринга (Server-Side Rendering, SSR). Такие SPA-страницы отображаются быстрее на современных устройствах, но на старых девайсах могут тормозить.



Во-вторых, движок старого Хабра — это больше десяти лет оптимизаций, костылей и заплаток. Вполне естественно, что если попытаться переписать их с нуля на современных технологиях, придётся учесть эту историю поиска и устранения бутылочных горлышек в производительности.



В октябре мы постепенно выкатывали на часть пользователей обновлённую версию комментариев, над которой трудились последние полгода. Наши новые комментарии должны рендериться быстрее и доставлять удовольствие всем, а не только обладателям топовых MacBook Pro c M1 Max.



Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.
Читать дальше →

How to Increment and Decrement Number Using Vue 3 Composition Api

https://dev.to/larainfo/how-to-increment-and-decrement-number-using-vue-3-composition-api-48c7
In this tutorial we will create simple vuejs counter app using options api and composition api.
Quick Way to Start Project with Vite Vue 3 Headless UI Tailwind CSS



Simple Vue 3 Counter App using (Options Api) Example




Counter.vue


<template>
<div class="flex items-center justify-center gap-x-4">
<button
class="px-4 py-2 text-white bg-blue-600 focus:outline-none"
@click="increment">
Increment
</button>
{{ number }}
<button
class="px-4 py-2 text-white bg-red-600 focus:outline-none"
@click="decrement">
Decrement
</button>
</div>
</template>
<script>
export default {
data() {
return {
number: 0,
};
},
methods: {
increment() {
this.number++;
},
decrement() {
this.number--;
},
},
};
</script>






Vue 3 Counter App using (Composition Api) Example




Counter.vue


<template>
<div class="flex items-center justify-center gap-x-4">
<button
class="px-4 py-2 text-white bg-blue-600 focus:outline-none"
@click="increment">
Increment
</button>
{{ number }}
<button
class="px-4 py-2 text-white bg-red-600 focus:outline-none"
@click="decrement">
Decrement
</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const number = ref(0);
function increment() {
number.value++;
}
function decrement() {
number.value--;
}
return { number, increment, decrement };
},
};
</script>

Intro To Using Pinia For State Management In VueJS

https://dev.to/aaronksaunders/intro-to-using-pinia-for-state-management-in-vuejs-1n39
Intro To Using Pinia For State Management In VueJS
Pinia - The Vue Store that you will enjoy using... Intuitive, type safe, and flexible Store for Vue
I guess this is the new goto for state management in Vue3 and what is really awesome is that it works great with vue-devtools
This is a simple application that allows you to add students to and array that is managed in the global store and then perform the traditional CRUD actions against the store.
We show how to subscribe to changes in the store for updating the user interface
We discuss some of the benefits of this approach and its integration of typescript and how great it works with the vue-devtools.






Source Code






aaronksaunders
/
vite-pinia










Vue 3 + Typescript + Vite
This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup


VSCode + Volar



Type Support For .vue Imports in TS
Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.




View on GitHub

A home cloud open source project

https://dev.to/linkleong/a-home-cloud-open-source-project-2jnk
Welcome your comments

https://github.com/IceWhaleTech/CasaOS