#vue-js — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #vue-js, aggregated by home.social.
-
Бесшовный переезд с Perl на Nuxt: история одного 20-летнего монолита
Привет, Хабр! Меня зовут Эрнест Гилязов, я тимлид группы разработки интерфейсов Рунити. В этой статье расскажу, как мы переносим на новый стек проект Рег.ру, кодовой базе которого исполняется 20 лет, и почему в итоге Nuxt-приложение само раздает шапку и футер в легаси-монолит через обычный JSON-эндпоинт.
https://habr.com/ru/companies/runity/articles/1070084/
#Nuxt #Vuejs #SSR #легаси #миграция #Template_Toolkit #Perl #микрофронтенды #серверный_рендеринг #Vite
-
Как я собрал браузерный хоррор на Three.js: GLB-контракт, аномалии и PS1-рендеринг для слабых устройств
Как я сделал браузерную 3D-игру на Three.js и Vue: система аномалий, GLB-сцена, PS1-рендеринг и оптимизация под слабые устройства.
https://habr.com/ru/articles/1069580/
#threejs #webgl #JavaScript #TypeScript #Vuejs #blender #glTF #Разработка_игр #браузерные_игры #оптимизация_производительности
-
Hexnome: моя первая игра, 245 промптов и один выброшенный бэкенд
Тридцать лет я собирался написать игру, а потом за десять рабочих сессий довёл до продакшена браузерную Hexnome: 3D-поле, одиночный режим, онлайн-мультиплеер и серверный журнал команд. Получилось 245 промптов и 99 коммитов в основной ветке. Ещё 30 коммитов пришлось выбросить, когда первая архитектура мультиплеера оказалась «играбельной, но ненадёжной». Рассказываю, что именно ускорил AI — и какие решения он за меня не принял.
-
История одного архитектурного круга: реактивность Vue
Vue снова меняет способ обновления интерфейса: теперь на горизонте Vapor и рендеринг без Virtual DOM. Зачем очередная архитектурная перестройка и что не устраивает команду Vue в нынешнем подходе? Чтобы ответить, проследим путь Vue от Object.defineProperty до Proxy и зачем теперь понадобился Vapor. Это поможет лучше понимать поведение ref, reactive и computed, вникнуть в причины архитектурных изменений Vue и подготовиться к дальнейшим изменениям.
https://habr.com/ru/companies/first/articles/1069048/
#vue #vuejs #vue3 #signals #reactivity #reactivity_javascript #proxy #virtualdom #vapor #dom
-
𝗩𝘂𝗲-𝗴𝗼𝗼𝗱-𝘁𝗮𝗯𝗹𝗲:
#DataTable #VueJS #VueGoodTable
https://thewhale.cchttps://thewhale.cc/posts/vue-good-table
A powerful data table plugin for VueJS. Get features like sorting / column filtering / paging with minimal setup. Easily customize anything from table cells to column headers. Leverage checkbox table, grouped rows and remote workflow for your table.
-
𝗩𝘂𝗲-𝗴𝗼𝗼𝗱-𝘁𝗮𝗯𝗹𝗲:
#DataTable #VueJS #VueGoodTable
https://thewhale.cchttps://thewhale.cc/posts/vue-good-table
A powerful data table plugin for VueJS. Get features like sorting / column filtering / paging with minimal setup. Easily customize anything from table cells to column headers. Leverage checkbox table, grouped rows and remote workflow for your table.
-
@Chao-c'BTW I had account on identi.ca, which was StatusNet powered (I believe).
It was. At least until Evan and Erin could no longer justify it running on that janky OStatus protocol. The result was the ActivityPump protocol, the pump.io software and Identi.ca's switch to pump.io with all hands on board.Yes, and it should not be implemented in Ruby or PHP or something like that. I have seen one online discussion forum being rewritten from PHP to Rust few years ago, and the improvement in responsiveness of the web platform was amazing. (I do C, not Rust, but C is too oldschool now, and the performance penalty of Rust is minor, probably not noticeable at all)
This reminds me of how the Fediverse is all over the place in terms of programming languages. Everyone has their own Holy Grail.
Friendica and its descendants are written in PHP. They may not be the fastest (even though what bogged down early Friendica were its heavyweight federation connectors to everywhere, especially the one for Facebook that came in 2011). Mike either discarded or rewrote these when he rewrote Red. But they happily run on a run-of-the-mill LAMP stack.
Mastodon is written in Ruby on Rails. Hubzilla runs circles around it in terms of performance per account/channel, and that has to say something. The only thing that managed to top this was early diaspora*, written in Ruby on Rails for Mac with MongoDB as the database system.
The *omas are built in Elixir. Granted, they're utter featherweights, especially considering their features. They're legendary for their low server impact. Then again, Pleroma apparently is spaghetti code straight from hell. Its own devs often don't have a clue where to go look for bugs, much less how to fix them. (Miraculously, the Akkoma devs do manage to get ride of quite a number of them.)
The *keys are built in TypeScript and Vue.js. I guess one reason why Misskey is infamous for having so many forks and forks of forks is because there are tons of people who can code in JavaScript, the primary mobile programming language.
Iceshrimp.NET is a still very incomplete "rewrite" of old Iceshrimp in C#. It was largely tackled to get rid of all those nasty bugs inherited from Misskey that even Misskey doesn't manage to get rid of. I've heard quite some outcry: Iceshrimp.NET is a sell-out to Microsoft. I guess whoever uttered that didn't go check who owns TypeScript.
PieFed is a dead giveaway: Python. And PieFed makes more headlines in the Threadiverse for server politics than for its underlying technology, except that Lemmy pales in comparison.
GoToSocial is a dead giveaway, too: Go. And it was one of the first Fediverse server applications to not come with a Web UI. Those who use it for a single-user server often don't even bother installing one and use some Mastodon app or other instead. Besides, why drag around a Web UI if there are much better third-party Web UIs than whatever you could whip up?
#Long #LongPost #CWLong #CWLongPost #FediMeta #FediverseMeta #CWFediMeta #CWFediverseMeta #Mastodon #Friendica #Hubzilla #Pleroma #Akkoma #Misskey #Forkey #Forkeys #Iceshrimp #IceshrimpJS #Iceshrimp.NET #PieFed #GoToSocial #PHP #RubyOnRails #Elixir #JavaScript #TypeScript #VueJS #C# #Python #Go -
@Chao-c'BTW I had account on identi.ca, which was StatusNet powered (I believe).
It was. At least until Evan and Erin could no longer justify it running on that janky OStatus protocol. The result was the ActivityPump protocol, the pump.io software and Identi.ca's switch to pump.io with all hands on board.Yes, and it should not be implemented in Ruby or PHP or something like that. I have seen one online discussion forum being rewritten from PHP to Rust few years ago, and the improvement in responsiveness of the web platform was amazing. (I do C, not Rust, but C is too oldschool now, and the performance penalty of Rust is minor, probably not noticeable at all)
This reminds me of how the Fediverse is all over the place in terms of programming languages. Everyone has their own Holy Grail.
Friendica and its descendants are written in PHP. They may not be the fastest (even though what bogged down early Friendica were its heavyweight federation connectors to everywhere, especially the one for Facebook that came in 2011). Mike either discarded or rewrote these when he rewrote Red. But they happily run on a run-of-the-mill LAMP stack.
Mastodon is written in Ruby on Rails. Hubzilla runs circles around it in terms of performance per account/channel, and that has to say something. The only thing that managed to top this was early diaspora*, written in Ruby on Rails for Mac with MongoDB as the database system.
The *omas are built in Elixir. Granted, they're utter featherweights, especially considering their features. They're legendary for their low server impact. Then again, Pleroma apparently is spaghetti code straight from hell. Its own devs often don't have a clue where to go look for bugs, much less how to fix them. (Miraculously, the Akkoma devs do manage to get ride of quite a number of them.)
The *keys are built in TypeScript and Vue.js. I guess one reason why Misskey is infamous for having so many forks and forks of forks is because there are tons of people who can code in JavaScript, the primary mobile programming language.
Iceshrimp.NET is a still very incomplete "rewrite" of old Iceshrimp in C#. It was largely tackled to get rid of all those nasty bugs inherited from Misskey that even Misskey doesn't manage to get rid of. I've heard quite some outcry: Iceshrimp.NET is a sell-out to Microsoft. I guess whoever uttered that didn't go check who owns TypeScript.
PieFed is a dead giveaway: Python. And PieFed makes more headlines in the Threadiverse for server politics than for its underlying technology, except that Lemmy pales in comparison.
GoToSocial is a dead giveaway, too: Go. And it was one of the first Fediverse server applications to not come with a Web UI. Those who use it for a single-user server often don't even bother installing one and use some Mastodon app or other instead. Besides, why drag around a Web UI if there are much better third-party Web UIs than whatever you could whip up?
#Long #LongPost #CWLong #CWLongPost #FediMeta #FediverseMeta #CWFediMeta #CWFediverseMeta #Mastodon #Friendica #Hubzilla #Pleroma #Akkoma #Misskey #Forkey #Forkeys #Iceshrimp #IceshrimpJS #Iceshrimp.NET #PieFed #GoToSocial #PHP #RubyOnRails #Elixir #JavaScript #TypeScript #VueJS #C# #Python #Go -
Oh, my first commit and PR is merged in the #vuejs #documentation !!
`87113 docs: update nodejs expected version (#3415) bdae3ed · 1 hour ago`
That's just a little versionning fix but I'm a bit proud of it. 🤓️ 😊️
-
Morning lovely peopl of the Fediverse.
My current contract will come to an end in August, so I am on the lookout for my next gig.
- Frontend JavaScript developer with 15+ years experience
- Fond of VueJS, minimal frameworks, Vanilla JS (but also React experience over the years)
- CSS advocate. Currently using super modern CSS on this project which has been awesome, feel free to ask me about it if you like.
- Accessibility advocate, trying to push to make sure code and markup is as accessible as it can be. WCAG, ARIA and A11Y.
- Communication skills - Advanced! (love being a team player)
- All round nice fellow you could introduce to your friends and family.
- Contract ideally, will consider Perm but has to be a good fit.
I am UK based (in the East Midlands) but really looking for remote.
Also I know the market is odd now, maybe not once what it was, and LinkedIn seems to be a bit flaky, so if you have recommendations for other platforms, hit me with it.
Retoots very welcome 😊
#JavaScript #Frontend #FrontendDeveloper #Hire #SeekingWork #OpenToWork #Contract #Vue #VueJS #React #CSS #SASS #SCSS #FediHire #FediHired
-
Morning lovely peopl of the Fediverse.
My current contract will come to an end in August, so I am on the lookout for my next gig.
- Frontend JavaScript developer with 15+ years experience
- Fond of VueJS, minimal frameworks, Vanilla JS (but also React experience over the years)
- CSS advocate. Currently using super modern CSS on this project which has been awesome, feel free to ask me about it if you like.
- Accessibility advocate, trying to push to make sure code and markup is as accessible as it can be. WCAG, ARIA and A11Y.
- Communication skills - Advanced! (love being a team player)
- All round nice fellow you could introduce to your friends and family.
- Contract ideally, will consider Perm but has to be a good fit.
I am UK based (in the East Midlands) but really looking for remote.
Also I know the market is odd now, maybe not once what it was, and LinkedIn seems to be a bit flaky, so if you have recommendations for other platforms, hit me with it.
Retoots very welcome 😊
#JavaScript #Frontend #FrontendDeveloper #Hire #SeekingWork #OpenToWork #Contract #Vue #VueJS #React #CSS #SASS #SCSS #FediHire #FediHired
-
How to use Vue and i18n to offer your site in multiple languages
I am genuinely surprised we haven’t covered this topic before, given that it is one of the most powerful ways to instantly level up a web application. Today, we are tackling internationalization, showing you how to easily offer your website in multiple languages. The web is inherently global, and locking your content behind a single language limits your audience from the start. To bridge that gap, we are going to integrate the industry-standard vue-i18n plugin to handle our translations reactively, all while continuing to use the sleek Web Awesome components we’ve been exploring lately. We will look at how to neatly organize your content into JSON files, avoid common reactivity quirks, and instantly swap your UI’s vocabulary with a simple dropdown menu.
What is our goal? Previously, we focused on making your apps accessible to individuals with visual impairments, ensuring they can access your content. This time, we will concentrate on making your content accessible to those who do not understand English. In the header, you will notice a dropdown with the options of English, Spanish, French, and Mandarin. When you select a new language, the content changes.
If you want to modify what the (sample text) poem says, there is a JSON file available for each of the four languages. To obtain translations, you can either consult someone who speaks the language or, as I did, use a translation website.
Example: https://enjoyed-star-jennet.codepen.app
#vueI18n #VueJs #WebAwesome #WebComponents -
How to use Vue and i18n to offer your site in multiple languages
I am genuinely surprised we haven’t covered this topic before, given that it is one of the most powerful ways to instantly level up a web application. Today, we are tackling internationalization, showing you how to easily offer your website in multiple languages. The web is inherently global, and locking your content behind a single language limits your audience from the start. To bridge that gap, we are going to integrate the industry-standard vue-i18n plugin to handle our translations reactively, all while continuing to use the sleek Web Awesome components we’ve been exploring lately. We will look at how to neatly organize your content into JSON files, avoid common reactivity quirks, and instantly swap your UI’s vocabulary with a simple dropdown menu.
What is our goal? Previously, we focused on making your apps accessible to individuals with visual impairments, ensuring they can access your content. This time, we will concentrate on making your content accessible to those who do not understand English. In the header, you will notice a dropdown with the options of English, Spanish, French, and Mandarin. When you select a new language, the content changes.
If you want to modify what the (sample text) poem says, there is a JSON file available for each of the four languages. To obtain translations, you can either consult someone who speaks the language or, as I did, use a translation website.
Example: https://enjoyed-star-jennet.codepen.app
#vueI18n #VueJs #WebAwesome #WebComponents -
УМНЫЙ К1 — контроллер на базе ESP32 с REST, syslog и много опенсорса
Предисловие Возможно то, про что я хочу рассказать в своей первой статье тут, покажется не новым, уже знакомым велосипедом. Речь пойдет о контроллерах на базе ESP32 и программном обеспечении. Да, современных решений, открытых и бесплатных – много. А сейчас зарождается еще одно (а опенсорса мало не бывает, я считаю). В статье я упущу и не буду рассказывать ни про свое знакомство с ардуиной, esp, php, python, js ни про то, что пришел сюда давным-давно гуманитарием. И да простят мой, вероятно не корректный, «жаргон» истинные профессионалы в микроэлектронике и программировании - итак, приступим. Совсем недавно я отключил RPI4 с HA и наконец «воткнул» в котельную очередную, но «готовую к деплою» версию контроллера (разрешите его далее называть «УМНЫЙ К1», спасибо).
https://habr.com/ru/articles/1053764/
#esp32 #rest_api #espidf #tauri #javascript #vuejs #vite #rust #умныйдом #видеонаблюдение
-
I got some bad news: there will be no #Vuejs #Berlin #meetup in July. But we'll be back in August with a new #hackntell and maybe a teeny tiny anniversary...
-
I got some bad news: there will be no #Vuejs #Berlin #meetup in July. But we'll be back in August with a new #hackntell and maybe a teeny tiny anniversary...
-
I got some bad news: there will be no #Vuejs #Berlin #meetup in July. But we'll be back in August with a new #hackntell and maybe a teeny tiny anniversary...
-
I got some bad news: there will be no #Vuejs #Berlin #meetup in July. But we'll be back in August with a new #hackntell and maybe a teeny tiny anniversary...
-
Frontend Status: свежий дайджест фронтенда и AI — 15.06.2026
Привет! Это 18 выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Экосистема TanStack кажется бесконечной, а browser gaming снова стал серьёзной платформой: Jack Herrington собирает 17 библиотек в одном приложении, а Software Engineering Daily с Эриком Дабилбором из Poki разбирает WebAssembly и WebGL/WebGPU на практике — чтобы увидеть, как устроены и стек, и дистрибуция современных веб-игр. 🤖 Старые приёмы промптинга режут точность reasoning-моделей, а закрытая вкладка не останавливает счёт — токены и GPU крутятся впустую — чтобы перестроить работу с ИИ и не платить за отменённую работу. 🛡️ Next.js с дефолтными настройками уязвим к RCE через Server Actions — даже если «серверных функций у нас нет» — чтобы не жить с иллюзией безопасности. 🎨 Центрирование всё ещё ломает голову, а каскадные анимации плодят сотни :nth-child — честный разбор центрирования и новые sibling-index() / sibling-count() — чтобы понимать, почему код работает, а не подбирать методом тыка. ⚡ Зелёные async-тесты врут, PDF застревает в iframe, геометрия — в sin/cos, DI падает на проде — PDFSlick, Geometric.js, InferDI и разбор ловушек Jest — чтобы ловить ошибки до деплоя, а не в три часа ночи. ⚛️ React-зоопарк, неделя конфигов и ручная мемоизация: карта Robin Wieruch на 2026-й, Rockpack из коробки, TanStack AI без вендорного замка, visx 4.0, RSC в TanStack Start и React Compiler — чтобы собирать стек без споров и вычистить лишний шум из кодбейза. 👁️ TanStack Table почти убил типы и автокомплит во Vue — честный разбор на Habr — чтобы брать библиотеку только под ту боль, которую не решить за час на чистом Vue. 🌎 Chrome подставляет тяжёлые блоки по ходу стрима, Firefox говорит с железом через Web Serial, canvas наконец принимает DOM — чтобы меньше костылей в вёрстке и проще UI поверх графики. 🦮 aria-label на div — ложная доступность, которую скринридер проглатывает — чтобы не тратить время на иллюзию a11y. 📦 Код пишут агенты, а ценность — в суждении: cpojer, автор Jest, о том, что осталось важно инженеру — чтобы направлять систему, а не печатать быстрее. ⚡ Node молча жрёт память, если стримы игнорируют backpressure — чтобы баг не всплыл только на по-настоящему большом датасете.
https://habr.com/ru/articles/1047986/
#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs #ux
-
Frontend Status: свежий дайджест фронтенда и AI — 15.06.2026
Привет! Это 18 выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Экосистема TanStack кажется бесконечной, а browser gaming снова стал серьёзной платформой: Jack Herrington собирает 17 библиотек в одном приложении, а Software Engineering Daily с Эриком Дабилбором из Poki разбирает WebAssembly и WebGL/WebGPU на практике — чтобы увидеть, как устроены и стек, и дистрибуция современных веб-игр. 🤖 Старые приёмы промптинга режут точность reasoning-моделей, а закрытая вкладка не останавливает счёт — токены и GPU крутятся впустую — чтобы перестроить работу с ИИ и не платить за отменённую работу. 🛡️ Next.js с дефолтными настройками уязвим к RCE через Server Actions — даже если «серверных функций у нас нет» — чтобы не жить с иллюзией безопасности. 🎨 Центрирование всё ещё ломает голову, а каскадные анимации плодят сотни :nth-child — честный разбор центрирования и новые sibling-index() / sibling-count() — чтобы понимать, почему код работает, а не подбирать методом тыка. ⚡ Зелёные async-тесты врут, PDF застревает в iframe, геометрия — в sin/cos, DI падает на проде — PDFSlick, Geometric.js, InferDI и разбор ловушек Jest — чтобы ловить ошибки до деплоя, а не в три часа ночи. ⚛️ React-зоопарк, неделя конфигов и ручная мемоизация: карта Robin Wieruch на 2026-й, Rockpack из коробки, TanStack AI без вендорного замка, visx 4.0, RSC в TanStack Start и React Compiler — чтобы собирать стек без споров и вычистить лишний шум из кодбейза. 👁️ TanStack Table почти убил типы и автокомплит во Vue — честный разбор на Habr — чтобы брать библиотеку только под ту боль, которую не решить за час на чистом Vue. 🌎 Chrome подставляет тяжёлые блоки по ходу стрима, Firefox говорит с железом через Web Serial, canvas наконец принимает DOM — чтобы меньше костылей в вёрстке и проще UI поверх графики. 🦮 aria-label на div — ложная доступность, которую скринридер проглатывает — чтобы не тратить время на иллюзию a11y. 📦 Код пишут агенты, а ценность — в суждении: cpojer, автор Jest, о том, что осталось важно инженеру — чтобы направлять систему, а не печатать быстрее. ⚡ Node молча жрёт память, если стримы игнорируют backpressure — чтобы баг не всплыл только на по-настоящему большом датасете.
https://habr.com/ru/articles/1047982/
#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs
-
MiniMin: как я написал свой велосипед для управления Minecraft-серверами и клиентскими сборками
Частенько ли у вас возникает желание пойти в одну очень популярную песочницу ? Я думаю раз в пол года - год у многих возникает такое желание. И также часто возникает желание поставить парочку сотен модов…
-
The template is what you'd expect (if you come from #vuejs ) but it renders entirely on the server, and can be updated surgically DOM-side, simply by calling Backflip's generated update function for that component.
Benefits:
- single source of truth for your HTML
- fast rendering in the language of your choice on the server
- minimal surgical updates on the frontend -
The template is what you'd expect (if you come from #vuejs ) but it renders entirely on the server, and can be updated surgically DOM-side, simply by calling Backflip's generated update function for that component.
Benefits:
- single source of truth for your HTML
- fast rendering in the language of your choice on the server
- minimal surgical updates on the frontend -
Назад в будущее UI-kit: как мы перевели живую библиотеку на дизайн-токены и ничего не сломали
UI-kit, которым пользуются несколько продуктовых команд, нельзя просто отправить в будущее и переписать под новый дизайн. За ним тянется прошлое: старые CSS-переменные, публичный API, кастомизации у потребителей и независимые релизные циклы. При этом бренд уже меняется, дизайнеры приносят новую палитру, типографику, motion, скругления и тёмную тему и всё это нужно аккуратно посадить на компоненты, которые продолжают работать в продакшене. Привет, Хабр! Меня зовут Амир, я Senior Vue.js Frontend Developer в экосистеме Лукоморье . Уже шесть лет я развиваю фронтенд большой внутренней ERP-платформы, в том числе внутренний UI-kit: около 50 компонентов на Vue 3 и TypeScript, которыми пользуются несколько продуктовых команд в Ростелекоме. В этой статье расскажу, как мы устроили для UI-kit такое «назад в будущее»: в одной долгоживущей ветке sova провели редизайн поверх работающих компонентов, сохранили публичный API для команд-потребителей и перевели визуальный слой на новую архитектуру. Мы внедрили 3-tier-систему дизайн-токенов, собрали pipeline на Style Dictionary и Tokens Studio for Figma, оставили старые CSS-переменные через legacy-алиасы, а заодно закрыли несколько долгов библиотеки: типизацию шаблонов, встроенный SVG-спрайт на 816 иконок, утилиту темизации и вынос runtime-зависимостей с сокращением бандла с 940 до 150 КБ. Материал будет полезен инженерам дизайн-систем, фронтенд-архитекторам и тимлидам, которые поддерживают UI-kit для нескольких продуктовых команд и думают, как провести редизайн без поломки потребителей. Внутри — код, архитектурные решения, компромиссы и честные выводы по итогам миграции.
https://habr.com/ru/companies/lukit_ru/articles/1046493/
#uikit #дизайнтокены #лукоморье #фронтенд #фронтендразработка #фронтенд_разработка #фронтэнд_javascript #vuejs #vuejs #javascript
-
Join us at Vuejs//Berlin #107!
https://platform.openmeet.net/events/vuejsberlin-107-6-upjs
#vuejs #meetup #berlin -
Join us at Vuejs//Berlin #107!
https://platform.openmeet.net/events/vuejsberlin-107-6-upjs
#vuejs #meetup #berlin -
Join us at Vuejs//Berlin #107!
https://platform.openmeet.net/events/vuejsberlin-107-6-upjs
#vuejs #meetup #berlin -
RE: https://fosstodon.org/@rauschma/116693909245609071
First the @nuxt team got bought by vercel, now the @vite team by cloudflare ...
Time will tell how that shapes the future but more #vuejs ecosystem usage is always nice 😁 -
RE: https://fosstodon.org/@rauschma/116693909245609071
First the @nuxt team got bought by vercel, now the @vite team by cloudflare ...
Time will tell how that shapes the future but more #vuejs ecosystem usage is always nice 😁 -
Building a full web form using Vue and Web Awesome
Previously, we learned how to build dropdowns, radio button groups, buttons, and combo boxes. I figure the next step is to put it all together and build a full web form. In today’s demo, we are going to build a “feedback” form where someone provides their name, contact information, and what they think of you. It doesn’t actually send it anywhere, but it shows the result, and it is easy enough to add something to record the results.
The last time around, we created https://grand-block-gar.codepen.app using the data files in https://github.com/steinbring/data/tree/main/v1/locations/us_states_municipalities_zctas to let the user select a state (using a list of suggestions), select a municipality (using a list of suggestions that are based upon the selected state), and select a zip code / postal code (using a list of suggestions that are based upon the selected municipality). In that demo, state management and form data are handled in App.vue, and the options for states, municipalities, and zip codes/postal codes use computed properties. ComboBox is imported from ComboBox.vue, accepts the properties “label”, “placeholder”, “disabled”, “options”, and “modelValue”, emits a new value for “modelValue” when the value of the web awesome combobox changes, and it only creates
<wa-combobox>inside the component.So, what are we doing this time? In this week’s demo, we are doing the same thing (the Web Awesome components are in Vue child components and the data and computed properties are in parent components), except the form itself is in a child of App.vue.
The form asks for your name, your opinion, your contact information, and your preferred contact method. If you select that you want to be contacted by phone, it uses the radio group element to ask about when you would like to be called.
To use the form “in anger”, you would want to add an API call to an endpoint that could send an email and/or save the submission to a database record. Since the web component is added to the Vue component, and the form elements’ Vue components are as generic as possible, swapping out Web Awesome for something like Bootstrap or Bulma is pretty easy.
Example: https://optimal-brook-eft.codepen.app
#VueJs #WebAwesome #WebComponents -
Building a full web form using Vue and Web Awesome
Previously, we learned how to build dropdowns, radio button groups, buttons, and combo boxes. I figure the next step is to put it all together and build a full web form. In today’s demo, we are going to build a “feedback” form where someone provides their name, contact information, and what they think of you. It doesn’t actually send it anywhere, but it shows the result, and it is easy enough to add something to record the results.
The last time around, we created https://grand-block-gar.codepen.app using the data files in https://github.com/steinbring/data/tree/main/v1/locations/us_states_municipalities_zctas to let the user select a state (using a list of suggestions), select a municipality (using a list of suggestions that are based upon the selected state), and select a zip code / postal code (using a list of suggestions that are based upon the selected municipality). In that demo, state management and form data are handled in App.vue, and the options for states, municipalities, and zip codes/postal codes use computed properties. ComboBox is imported from ComboBox.vue, accepts the properties “label”, “placeholder”, “disabled”, “options”, and “modelValue”, emits a new value for “modelValue” when the value of the web awesome combobox changes, and it only creates
<wa-combobox>inside the component.So, what are we doing this time? In this week’s demo, we are doing the same thing (the Web Awesome components are in Vue child components and the data and computed properties are in parent components), except the form itself is in a child of App.vue.
The form asks for your name, your opinion, your contact information, and your preferred contact method. If you select that you want to be contacted by phone, it uses the radio group element to ask about when you would like to be called.
To use the form “in anger”, you would want to add an API call to an endpoint that could send an email and/or save the submission to a database record. Since the web component is added to the Vue component, and the form elements’ Vue components are as generic as possible, swapping out Web Awesome for something like Bootstrap or Bulma is pretty easy.
Example: https://optimal-brook-eft.codepen.app
#VueJs #WebAwesome #WebComponents -
WebDev poll:
My current go-to front-end framework/s for building web applications is/are?
Please consider boosting for a larger sample.
#poll #programming #webdev #frameworks #angular #vuejs #react #frontend