#pinia — Public Fediverse posts

Давай заключим контракт?

Принципы SOLID , DRY , KISS во фронтенде работают ровно так же, как в любой другой разработке. Но если открыть почти любой проект, всё равно натыкаешься на мешанину. Причём дело обычно не в том, что код «грязный» — он как раз бывает типизирован и проходит linter . Дело в том, что эти принципы отвечают на вопрос « как написать », а не « зачем мы вообще это пишем ». А без ответа на « зачем » чистый код превращается в красиво оформленную путаницу. На примере такой вещи, как store попробуем ответить на вопрос: что вообще такое контракт, зачем же нужна типизация и действительно ли это помогает в разработке .

https://habr.com/ru/articles/1041838/

#архитектура #pinia #vue #store #typescript #javascript

Давай заключим контракт?

Принципы SOLID , DRY , KISS во фронтенде работают ровно так же, как в любой другой разработке. Но если открыть почти любой проект, всё равно натыкаешься на мешанину. Причём дело обычно не в том, что код «грязный» — он как раз бывает типизирован и проходит linter . Дело в том, что эти принципы отвечают на вопрос « как написать », а не « зачем мы вообще это пишем ». А без ответа на « зачем » чистый код превращается в красиво оформленную путаницу. На примере такой вещи, как store попробуем ответить на вопрос: что вообще такое контракт, зачем же нужна типизация и действительно ли это помогает в разработке .

https://habr.com/ru/articles/1041838/

#архитектура #pinia #vue #store #typescript #javascript

Давай заключим контракт?

Принципы SOLID , DRY , KISS во фронтенде работают ровно так же, как в любой другой разработке. Но если открыть почти любой проект, всё равно натыкаешься на мешанину. Причём дело обычно не в том, что код «грязный» — он как раз бывает типизирован и проходит linter . Дело в том, что эти принципы отвечают на вопрос « как написать », а не « зачем мы вообще это пишем ». А без ответа на « зачем » чистый код превращается в красиво оформленную путаницу. На примере такой вещи, как store попробуем ответить на вопрос: что вообще такое контракт, зачем же нужна типизация и действительно ли это помогает в разработке .

https://habr.com/ru/articles/1041838/

#архитектура #pinia #vue #store #typescript #javascript

Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере

Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.

https://habr.com/ru/articles/1028052/

#vuejs #store #pinia

Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере

Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.

https://habr.com/ru/articles/1028052/

#vuejs #store #pinia

Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере

Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.

https://habr.com/ru/articles/1028052/

#vuejs #store #pinia

Идеальный Store в Pinia (Vue)

Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас. Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.

https://habr.com/ru/articles/1020074/

#pinia #vue

Идеальный Store в Pinia (Vue)

Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас. Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.

https://habr.com/ru/articles/1020074/

#pinia #vue

Идеальный Store в Pinia (Vue)

Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас. Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.

https://habr.com/ru/articles/1020074/

#pinia #vue

ООП для управления состоянием во Vue

Чувак, уже есть Pinia , Pinia Colada , TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue? Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар. Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода. И это возможно, покажу, как это работает на примере. Погнали, если интересно

https://habr.com/ru/articles/1010774/

#vue #pinia #tanstack #store #ооп_программирование #solid #ddd #архитектура_фронтенда #typescript #javascript

ООП для управления состоянием во Vue

Чувак, уже есть Pinia , Pinia Colada , TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue? Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар. Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода. И это возможно, покажу, как это работает на примере. Погнали, если интересно

https://habr.com/ru/articles/1010774/

#vue #pinia #tanstack #store #ооп_программирование #solid #ddd #архитектура_фронтенда #typescript #javascript

ООП для управления состоянием во Vue

Чувак, уже есть Pinia , Pinia Colada , TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue? Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар. Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода. И это возможно, покажу, как это работает на примере. Погнали, если интересно

https://habr.com/ru/articles/1010774/

#vue #pinia #tanstack #store #ооп_программирование #solid #ddd #архитектура_фронтенда #typescript #javascript

Персональный ГеоОрганайзер «Места»

Есть множество специальных программ, работающих с метаданными — всевозможные (не будем показывать пальцем) медиаплееры с нескучными обоями, сортировкой и фильтрами по чему и как угодно (особенно как угодно), созданием и редактированием плейлистов, подгружаемыми обложками, текстами и барышнями. Есть, с позволения сказать, просмотрщики изображений с теми же барышнями, коллекциями оных с описаниями, редактированием, тэггированием, гистограммами, спектрограммами и телепрограммами. И один лишь рынок особой категории геоданных, именующих себя детьми лейтенанта Шмидта, находится в хаотическом состоянии. Анархия раздирала корпорации вроде Гугла… Ладно, я увлёкся. Но в самом деле…

https://habr.com/ru/articles/1009226/

#Vue #Pinia #Open_Source #geo #геоданные #карты #SPA #Batch_Update #pwa #typescript

Персональный ГеоОрганайзер «Места»

Есть множество специальных программ, работающих с метаданными — всевозможные (не будем показывать пальцем) медиаплееры с нескучными обоями, сортировкой и фильтрами по чему и как угодно (особенно как угодно), созданием и редактированием плейлистов, подгружаемыми обложками, текстами и барышнями. Есть, с позволения сказать, просмотрщики изображений с теми же барышнями, коллекциями оных с описаниями, редактированием, тэггированием, гистограммами, спектрограммами и телепрограммами. И один лишь рынок особой категории геоданных, именующих себя детьми лейтенанта Шмидта, находится в хаотическом состоянии. Анархия раздирала корпорации вроде Гугла… Ладно, я увлёкся. Но в самом деле…

https://habr.com/ru/articles/1009226/

#Vue #Pinia #Open_Source #geo #геоданные #карты #SPA #Batch_Update #pwa #typescript

Персональный ГеоОрганайзер «Места»

Есть множество специальных программ, работающих с метаданными — всевозможные (не будем показывать пальцем) медиаплееры с нескучными обоями, сортировкой и фильтрами по чему и как угодно (особенно как угодно), созданием и редактированием плейлистов, подгружаемыми обложками, текстами и барышнями. Есть, с позволения сказать, просмотрщики изображений с теми же барышнями, коллекциями оных с описаниями, редактированием, тэггированием, гистограммами, спектрограммами и телепрограммами. И один лишь рынок особой категории геоданных, именующих себя детьми лейтенанта Шмидта, находится в хаотическом состоянии. Анархия раздирала корпорации вроде Гугла… Ладно, я увлёкся. Но в самом деле…

https://habr.com/ru/articles/1009226/

#Vue #Pinia #Open_Source #geo #геоданные #карты #SPA #Batch_Update #pwa #typescript

Переезд с Nuxt 2 на Nuxt 3: почему для крупного интернет-магазина мы выбрали рерайт, а не миграцию

Пять лет назад мы запустили интернет-магазин на Nuxt 2. За это время он превратился в классический монолит: вносить правки стало дорого, а сайт начал «задыхаться» под нагрузкой. Когда вышел Nuxt 3, перед нами встал выбор: пытаться оживить проект через Nuxt Bridge или переписать всё с нуля. Мы проанализировали код и поняли: плавная миграция для нас — это путь к созданию «зомби-проекта». Слишком много фундаментальных отличий: Options API против Composition API, Vuex против Pinia, смена логики роутинга и несовместимость ключевых библиотек. В этой статье я рассказываю, как мы решились на полный рерайт крупного магазина стройматериалов и почему это было единственно верным стратегическим решением. Внутри кейса: — 4 технических «фаталити» , которые делают миграцию легаси-монолита невозможной. — Архитектура FSD + Nuxt 3: как мы подружили фронтенд с бэкендом на Symfony и навели порядок в зависимостях. — Паттерн «Фабрика»: как упростить сложную логику доставки в Composition API. — Бонус: почему благодаря правильному старту недавнее обновление с Nuxt 3 до Nuxt 4 заняло у нас минимум времени, в отличие от мучений с Nuxt 2. Если вы всё еще поддерживаете проекты на второй версии и боитесь подступиться к обновлению — этот опыт для вас.

https://habr.com/ru/articles/968118/

#nuxtjs #pinia #feature_sliced_design #vite #composition_api #интернетмагазин #typescript

Переезд с Nuxt 2 на Nuxt 3: почему для крупного интернет-магазина мы выбрали рерайт, а не миграцию

Пять лет назад мы запустили интернет-магазин на Nuxt 2. За это время он превратился в классический монолит: вносить правки стало дорого, а сайт начал «задыхаться» под нагрузкой. Когда вышел Nuxt 3, перед нами встал выбор: пытаться оживить проект через Nuxt Bridge или переписать всё с нуля. Мы проанализировали код и поняли: плавная миграция для нас — это путь к созданию «зомби-проекта». Слишком много фундаментальных отличий: Options API против Composition API, Vuex против Pinia, смена логики роутинга и несовместимость ключевых библиотек. В этой статье я рассказываю, как мы решились на полный рерайт крупного магазина стройматериалов и почему это было единственно верным стратегическим решением. Внутри кейса: — 4 технических «фаталити» , которые делают миграцию легаси-монолита невозможной. — Архитектура FSD + Nuxt 3: как мы подружили фронтенд с бэкендом на Symfony и навели порядок в зависимостях. — Паттерн «Фабрика»: как упростить сложную логику доставки в Composition API. — Бонус: почему благодаря правильному старту недавнее обновление с Nuxt 3 до Nuxt 4 заняло у нас минимум времени, в отличие от мучений с Nuxt 2. Если вы всё еще поддерживаете проекты на второй версии и боитесь подступиться к обновлению — этот опыт для вас.

https://habr.com/ru/articles/968118/

#nuxtjs #pinia #feature_sliced_design #vite #composition_api #интернетмагазин #typescript

Переезд с Nuxt 2 на Nuxt 3: почему для крупного интернет-магазина мы выбрали рерайт, а не миграцию

Пять лет назад мы запустили интернет-магазин на Nuxt 2. За это время он превратился в классический монолит: вносить правки стало дорого, а сайт начал «задыхаться» под нагрузкой. Когда вышел Nuxt 3, перед нами встал выбор: пытаться оживить проект через Nuxt Bridge или переписать всё с нуля. Мы проанализировали код и поняли: плавная миграция для нас — это путь к созданию «зомби-проекта». Слишком много фундаментальных отличий: Options API против Composition API, Vuex против Pinia, смена логики роутинга и несовместимость ключевых библиотек. В этой статье я рассказываю, как мы решились на полный рерайт крупного магазина стройматериалов и почему это было единственно верным стратегическим решением. Внутри кейса: — 4 технических «фаталити» , которые делают миграцию легаси-монолита невозможной. — Архитектура FSD + Nuxt 3: как мы подружили фронтенд с бэкендом на Symfony и навели порядок в зависимостях. — Паттерн «Фабрика»: как упростить сложную логику доставки в Composition API. — Бонус: почему благодаря правильному старту недавнее обновление с Nuxt 3 до Nuxt 4 заняло у нас минимум времени, в отличие от мучений с Nuxt 2. Если вы всё еще поддерживаете проекты на второй версии и боитесь подступиться к обновлению — этот опыт для вас.

https://habr.com/ru/articles/968118/

#nuxtjs #pinia #feature_sliced_design #vite #composition_api #интернетмагазин #typescript

@[email protected] #vuejs #javascript #architecture #dev #pinia

@[email protected] #vuejs #javascript #architecture #dev #pinia

@[email protected] #vuejs #javascript #architecture #dev #pinia

@[email protected] #vuejs #javascript #architecture #dev #pinia

Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить

Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код. В этой статье разберём: Устаревшие паттерны, от которых лучше избавиться. Проверенные подходы, которые остаются актуальными. Альтернативы из Vue 3, которые можно адаптировать уже сейчас

https://habr.com/ru/articles/928578/

#vue3 #pinia #typescript #javascript #vue2 #vue27

Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить

Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код. В этой статье разберём: Устаревшие паттерны, от которых лучше избавиться. Проверенные подходы, которые остаются актуальными. Альтернативы из Vue 3, которые можно адаптировать уже сейчас

https://habr.com/ru/articles/928578/

#vue3 #pinia #typescript #javascript #vue2 #vue27

Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить

Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код. В этой статье разберём: Устаревшие паттерны, от которых лучше избавиться. Проверенные подходы, которые остаются актуальными. Альтернативы из Vue 3, которые можно адаптировать уже сейчас

https://habr.com/ru/articles/928578/

#vue3 #pinia #typescript #javascript #vue2 #vue27

Kenne ich Leute mit Erfahrung in #vue und #Pinia?

Kenne ich Leute mit Erfahrung in #vue und #Pinia?

Kenne ich Leute mit Erfahrung in #vue und #Pinia?

Kenne ich Leute mit Erfahrung in #vue und #Pinia?

Kenne ich Leute mit Erfahrung in #vue und #Pinia?

#devlog #MyRuckClub

- Moved #turso from #libSql to fetch to mitigate CORS issues.
- Realized through the migration step above, that each time the events page refreshes each event item made a turso call, thus to mitigate this setup a #pinia store.
- The pinia store has made the app faster, since the all turso calls done on first load and then functions off of that data.

Обзор различных тактик работы с реактивным стейтом во Vue

В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то: - Prop drilling - Provide/Inject - Composition API - Pinia - Event Bus

https://habr.com/ru/articles/878722/

#state #pinia #store

Обзор различных тактик работы с реактивным стейтом во Vue

В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то: - Prop drilling - Provide/Inject - Composition API - Pinia - Event Bus

https://habr.com/ru/articles/878722/

#state #pinia #store

Обзор различных тактик работы с реактивным стейтом во Vue

В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то: - Prop drilling - Provide/Inject - Composition API - Pinia - Event Bus

https://habr.com/ru/articles/878722/

#state #pinia #store

#Nuxt latest, installé par npx, crashe si on lui installe le module #Pinia.

wtf les gars, testez vos outils un peu.

#Nuxt latest, installé par npx, crashe si on lui installe le module #Pinia.

wtf les gars, testez vos outils un peu.

#Nuxt latest, installé par npx, crashe si on lui installe le module #Pinia.

wtf les gars, testez vos outils un peu.

#Nuxt latest, installé par npx, crashe si on lui installe le module #Pinia.

wtf les gars, testez vos outils un peu.

#Nuxt latest, installé par npx, crashe si on lui installe le module #Pinia.

wtf les gars, testez vos outils un peu.

Vue 3 в деле: Как мы обновили большой внутренний сервис и что из этого вышло

Привет, Хабр! Меня зовут Егор Прокопьев, и я фронтенд-разработчик в Ozon. Третья версия полюбившегося многими фреймворка Vue вышла уже давно, и большинство использующих его произвели обновление до новой версии. Но всегда будут такие, как наша команда, кто откладывал этот переход в дальний ящик техдолга — ведь есть более приоритетные задачи! Однако рано или поздно этот день настаёт, и вот и для нас он пришёл. В этой статье я хочу рассказать, как мы переходили на новую версию при том, что сервис является достаточно большим и очень важным для пользователей. Но обо всём по порядку.

https://habr.com/ru/companies/ozontech/articles/844074/

#vue3 #nuxt #ozon #ozon_tech #frontend #frontendразработка #pinia

Vue 3 в деле: Как мы обновили большой внутренний сервис и что из этого вышло

Привет, Хабр! Меня зовут Егор Прокопьев, и я фронтенд-разработчик в Ozon. Третья версия полюбившегося многими фреймворка Vue вышла уже давно, и большинство использующих его произвели обновление до новой версии. Но всегда будут такие, как наша команда, кто откладывал этот переход в дальний ящик техдолга — ведь есть более приоритетные задачи! Однако рано или поздно этот день настаёт, и вот и для нас он пришёл. В этой статье я хочу рассказать, как мы переходили на новую версию при том, что сервис является достаточно большим и очень важным для пользователей. Но обо всём по порядку.

https://habr.com/ru/companies/ozontech/articles/844074/

#vue3 #nuxt #ozon #ozon_tech #frontend #frontendразработка #pinia

Vue 3 в деле: Как мы обновили большой внутренний сервис и что из этого вышло

Привет, Хабр! Меня зовут Егор Прокопьев, и я фронтенд-разработчик в Ozon. Третья версия полюбившегося многими фреймворка Vue вышла уже давно, и большинство использующих его произвели обновление до новой версии. Но всегда будут такие, как наша команда, кто откладывал этот переход в дальний ящик техдолга — ведь есть более приоритетные задачи! Однако рано или поздно этот день настаёт, и вот и для нас он пришёл. В этой статье я хочу рассказать, как мы переходили на новую версию при том, что сервис является достаточно большим и очень важным для пользователей. Но обо всём по порядку.

https://habr.com/ru/companies/ozontech/articles/844074/

#vue3 #nuxt #ozon #ozon_tech #frontend #frontendразработка #pinia

https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet

https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet

https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet

https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet

https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet

【Vue】Piniaを使った状態管理
https://qiita.com/k12da/items/ad7d6e38f5edeb8750f3?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #Vue_js #Nuxt #Composition_API #Vue3 #Pinia

【Vue】Piniaを使った状態管理
https://qiita.com/k12da/items/ad7d6e38f5edeb8750f3?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #Vue_js #Nuxt #Composition_API #Vue3 #Pinia

State management in #Vue 3: Why you should try out #Pinia

https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/

#vuejs #javascript

State management in #Vue 3: Why you should try out #Pinia

https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/

#vuejs #javascript

State management in #Vue 3: Why you should try out #Pinia

https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/

#vuejs #javascript

State management in #Vue 3: Why you should try out #Pinia

https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/

#vuejs #javascript

State management in #Vue 3: Why you should try out #Pinia

https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/

#vuejs #javascript

Авторизация и управление доступом на основе ролей для фронтенда

В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным. Мы сфокусируемся на разработке системы авторизации и управления доступом на основе ролей для фронтенда. Этот аспект веб-разработки играет ключевую роль в обеспечении безопасности приложения и определении функциональных возможностей, доступных разным пользователям. Давайте начнем наше путешествие в мире фронтенд-разработки, изучая, как эффективно реализовывать авторизацию и управление доступом с использованием современных инструментов и лучших практик. Приготовьтесь к увлекательному погружению в мир безопасности фронтенда!

https://habr.com/ru/articles/798403/

#авторизация #доступы #роли #фронтенд #vue #pinia

Авторизация и управление доступом на основе ролей для фронтенда

В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным. Мы сфокусируемся на разработке системы авторизации и управления доступом на основе ролей для фронтенда. Этот аспект веб-разработки играет ключевую роль в обеспечении безопасности приложения и определении функциональных возможностей, доступных разным пользователям. Давайте начнем наше путешествие в мире фронтенд-разработки, изучая, как эффективно реализовывать авторизацию и управление доступом с использованием современных инструментов и лучших практик. Приготовьтесь к увлекательному погружению в мир безопасности фронтенда!

https://habr.com/ru/articles/798403/

#авторизация #доступы #роли #фронтенд #vue #pinia

This past autumn, I started playing around with the Composition API, and at the October 2023 Hack and Tell, I put that knowledge into writing a “Job Tracker“.  The job tracker used Vuex and Firebase Authentication to log a user in using their Google credentials.  With const store = useStore() on your view, you can do something like Welcome, {{user.data.displayName}} but using this technique you can also use …

const LoginWithGoogle = async () => {
try {
await store.dispatch('loginWithGoogle')
router.push('/')
}
catch (err) {
error.value = err.message
}
}

… to kick off the authentication of the user.  I want to use it to finally finish the State Parks app but I also want to use Pinia instead of Vuex, I wanted the resulting app to be a PWA, and I wanted to allow the user to log in with more than just Google credentials.  So, this past week, I wrote my “Offline Vue Boilerplate“.  It is meant to be a starting point for the State Parks app and a few other apps that I have kicking around in my head.  I figured that this week, we should go over what I wrote.

Overview

The whole point of this “boilerplate” application was for it to be a common starting point for other applications that use Firebase for authentication and a NoSQL database.  It uses:

• Vue.js
• Pinia
• The Composition API
• Bulma
• The vite-plugin-PWA plugin
• Font Awesome (I’m putting that pro account to use)
• Crypto-JS (It was needed for Gravatar)
• Firebase Authentication (So you can log in using Google or Microsoft credentials)
• Firebase Cloud Firestore (Much easier to work with than Firebase Realtime Database)
• Vite

I was using a lot of this stack for work projects, also.  It is nice because Firebase is cheap and robust and you don’t need to write any server-side code.  Hosting of the front-end code is “cheap-as-chips”, also.  The Job Tracker is hosted using Firebase Hosting (which is free on the spark plan) and The Boilerplate App is hosted using Render, which is just as free.

Authentication

I am most proud of how I handled authentication with this app.  Here is what the Pinia store looks like:

From your view, you can access {{ user }} to get to the values that came out of the single sign-on (SSO) provider (the user’s name, email address, picture, etc).  For this app, I used Google and Microsoft but Firebase Authentication offers a lot of options beyond those two.

Adding Google is pretty easy (after all, Firebase is owned by Google) but adding Microsoft was more difficult. To get keys from Microsoft, you need to register your application with the Microsoft identity platform.  Unfortunately, the account that you use for that must be an Azure account with at least a Cloud Application Administrator privileges and it can not be a personal account.  The account must be associated with an Entra tenant.  This means that you need to spin up an Entra tenant to register the application and get the keys.

The third SSO provider that I was tempted to add was Apple but to do that, you need to enroll in the Apple Developer program, which is not cheap.

Firebase Cloud Firestore

I have become a big fan of Firebase Cloud Firestore over the years (at least for situations where a NoSQL database makes sense).  The paradigm that I started playing around with last year involved putting the Firebase CRUD functions in the composable.

Here is an example <script> block from the Job Tracker:

The author of the view doesn’t even need to know that Firebase Cloud Firestore is part of the stack.  You might wonder how security is handled.

Here is what the security rule looks like behind the job tracker:

The rule is structured so that any authenticated user can create a new record but users can only read, delete, or update if they created the record.

How I made it into a Progressive Web App (PWA)

This is the easiest bit of the whole process.  You just need to add vite-plugin-pwa to the dev dependencies and let it build your manifest.  You do need to supply icons for it to use but that’s easy enough.

The Next Steps

I am going to be using this as a stepping-stone to build 2-3 apps but you can look forward to a few deep-dive posts on the stack, also.

Have any questions, comments, etc?  Please feel free to drop a comment, below.

[ Cover photo by Barn Images on Unsplash ]

https://jws.news/2024/wrote-a-thing-with-vue-and-firebase/

#CompositionAPI #Firebase #pinia #StateParksApp #VueJs #vuex

This past autumn, I started playing around with the Composition API, and at the October 2023 Hack and Tell, I put that knowledge into writing a “Job Tracker“.  The job tracker used Vuex and Firebase Authentication to log a user in using their Google credentials.  With const store = useStore() on your view, you can do something like Welcome, {{user.data.displayName}} but using this technique you can also use …

const LoginWithGoogle = async () => {
try {
await store.dispatch('loginWithGoogle')
router.push('/')
}
catch (err) {
error.value = err.message
}
}

… to kick off the authentication of the user.  I want to use it to finally finish the State Parks app but I also want to use Pinia instead of Vuex, I wanted the resulting app to be a PWA, and I wanted to allow the user to log in with more than just Google credentials.  So, this past week, I wrote my “Offline Vue Boilerplate“.  It is meant to be a starting point for the State Parks app and a few other apps that I have kicking around in my head.  I figured that this week, we should go over what I wrote.

Overview

The whole point of this “boilerplate” application was for it to be a common starting point for other applications that use Firebase for authentication and a NoSQL database.  It uses:

• Vue.js
• Pinia
• The Composition API
• Bulma
• The vite-plugin-PWA plugin
• Font Awesome (I’m putting that pro account to use)
• Crypto-JS (It was needed for Gravatar)
• Firebase Authentication (So you can log in using Google or Microsoft credentials)
• Firebase Cloud Firestore (Much easier to work with than Firebase Realtime Database)
• Vite

I was using a lot of this stack for work projects, also.  It is nice because Firebase is cheap and robust and you don’t need to write any server-side code.  Hosting of the front-end code is “cheap-as-chips”, also.  The Job Tracker is hosted using Firebase Hosting (which is free on the spark plan) and The Boilerplate App is hosted using Render, which is just as free.

Authentication

I am most proud of how I handled authentication with this app.  Here is what the Pinia store looks like:

From your view, you can access {{ user }} to get to the values that came out of the single sign-on (SSO) provider (the user’s name, email address, picture, etc).  For this app, I used Google and Microsoft but Firebase Authentication offers a lot of options beyond those two.

Adding Google is pretty easy (after all, Firebase is owned by Google) but adding Microsoft was more difficult. To get keys from Microsoft, you need to register your application with the Microsoft identity platform.  Unfortunately, the account that you use for that must be an Azure account with at least a Cloud Application Administrator privileges and it can not be a personal account.  The account must be associated with an Entra tenant.  This means that you need to spin up an Entra tenant to register the application and get the keys.

The third SSO provider that I was tempted to add was Apple but to do that, you need to enroll in the Apple Developer program, which is not cheap.

Firebase Cloud Firestore

I have become a big fan of Firebase Cloud Firestore over the years (at least for situations where a NoSQL database makes sense).  The paradigm that I started playing around with last year involved putting the Firebase CRUD functions in the composable.

Here is an example <script> block from the Job Tracker:

The author of the view doesn’t even need to know that Firebase Cloud Firestore is part of the stack.  You might wonder how security is handled.

Here is what the security rule looks like behind the job tracker:

The rule is structured so that any authenticated user can create a new record but users can only read, delete, or update if they created the record.

How I made it into a Progressive Web App (PWA)

This is the easiest bit of the whole process.  You just need to add vite-plugin-pwa to the dev dependencies and let it build your manifest.  You do need to supply icons for it to use but that’s easy enough.

The Next Steps

I am going to be using this as a stepping-stone to build 2-3 apps but you can look forward to a few deep-dive posts on the stack, also.

Have any questions, comments, etc?  Please feel free to drop a comment, below.

[ Cover photo by Barn Images on Unsplash ]

https://jws.news/2024/wrote-a-thing-with-vue-and-firebase/

#CompositionAPI #Firebase #pinia #StateParksApp #VueJs #vuex

is sitting at an Irish bar, listening to music from last year's Eurovision, and trying to figure out #Pinia.

#VueJS

is sitting at an Irish bar, listening to music from last year's Eurovision, and trying to figure out #Pinia.

#VueJS