Fosstodon

0 posts0 participants0 posts today

HabrСоздание анонимного чата в Telegram: Бот с MiniApp интерфейсом. Часть 2 — VueJS3 + Centrifugo с монетизацией приложенияВ первой части мы построили бэкенд на FastAPI, Aiogram, Redis и Centrifugo, заложив основу для анонимного чата в Telegram. Теперь пришло время развернуть фронтенд и создать стильный и отзывчивый интерфейс с использованием VueJS 3 в формате Telegram MiniApp. В этой статье мы: - Разработаем интерактивный UI с фильтрами поиска, анимациями загрузки и real-time чатом. - Настроим мгновенный обмен сообщениями через Centrifugo без лишних запросов к серверу. - Интегрируем монетизацию для заработка на рекламе в приложении. - Выполним деплой на удаленный сервер и подготовим проект к продакшену. Если вы хотите создать быстрый, удобный и монетизируемый анонимный чат в Telegram, который работает без задержек и перезагрузок, — эта статья для вас!<a href="https://habr.com/ru/companies/amvera/articles/893250/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://habr.com/ru/companies/amvera/articles/893250/</a><a href="https://zhub.link/tags/telegram_mini_app" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#telegram_mini_app</a> <a href="https://zhub.link/tags/telegram_webapp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#telegram_webapp</a> <a href="https://zhub.link/tags/vuejs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs</a> <a href="https://zhub.link/tags/vue3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vue3</a> <a href="https://zhub.link/tags/vuejs3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs3</a> <a href="https://zhub.link/tags/centrifuge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#centrifuge</a> <a href="https://zhub.link/tags/centrifugo_v6" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#centrifugo_v6</a> <a href="https://zhub.link/tags/websocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#websocket</a> <a href="https://zhub.link/tags/centrifugo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#centrifugo</a> <a href="https://zhub.link/tags/vuetg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuetg</a>

HabrFastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтендДрузья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс». Я напоминаю, что в рамках этой небольшой серии мы создаем телеграм-бота с MiniApp, основная задача которого — дать пользователям возможность записаться к врачу в удобный день и время. В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3. К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.<a href="https://habr.com/ru/companies/amvera/articles/874970/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://habr.com/ru/companies/amvera/articles/874970/</a><a href="https://zhub.link/tags/vuejs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs</a> <a href="https://zhub.link/tags/vue3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vue3</a> <a href="https://zhub.link/tags/typescript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typescript</a> <a href="https://zhub.link/tags/api" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#api</a> <a href="https://zhub.link/tags/vuejs_api" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs_api</a> <a href="https://zhub.link/tags/vuejs3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs3</a> <a href="https://zhub.link/tags/tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tailwind</a> <a href="https://zhub.link/tags/tailwind_css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tailwind_css</a> <a href="https://zhub.link/tags/vue_tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vue_tailwind</a> <a href="https://zhub.link/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a>

Qirolab🔥 Effortless Real-Time Chat Apps with Laravel Reverb and Vue.js 3 In this video, you'll learn: - The magic of Laravel Reverb for real-time features - Integrating Reverb with Vue.js 3 for a seamless frontend - Building a real-time chat application step-by-step👉 <a href="https://youtu.be/8ykxcM0-3Yg" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://youtu.be/8ykxcM0-3Yg</a><a href="https://mastodon.social/tags/LaravelReverb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LaravelReverb</a> <a href="https://mastodon.social/tags/laravel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#laravel</a> <a href="https://mastodon.social/tags/Vuejs3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Vuejs3</a> <a href="https://mastodon.social/tags/RealTimeChatApp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RealTimeChatApp</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/CodingTutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodingTutorial</a> <a href="https://mastodon.social/tags/qirolab" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#qirolab</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/laravel11" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#laravel11</a> <a href="https://mastodon.social/tags/laravelphp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#laravelphp</a> <a href="https://mastodon.social/tags/laravel_tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#laravel_tutorial</a> <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#100DaysOfCode</a> <a href="https://mastodon.social/tags/freeCodeCamp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#freeCodeCamp</a> <a href="https://mastodon.social/tags/CodeNewbies" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodeNewbies</a>

pablolarah📄 Pages CMS by Ronan Berder @hunvreus The No-Hassle CMS for GitHub <a href="https://mastodon.social/tags/cms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cms</a> <a href="https://mastodon.social/tags/Github" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Github</a> <a href="https://mastodon.social/tags/jekyll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jekyll</a> <a href="https://mastodon.social/tags/staticsitegenerator" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#staticsitegenerator</a> <a href="https://mastodon.social/tags/cms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cms</a> <a href="https://mastodon.social/tags/vuejs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs</a> <a href="https://mastodon.social/tags/vue" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vue</a> <a href="https://mastodon.social/tags/hugo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hugo</a> <a href="https://mastodon.social/tags/nextjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#nextjs</a> <a href="https://mastodon.social/tags/gatsby" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gatsby</a> <a href="https://mastodon.social/tags/staticsite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#staticsite</a> <a href="https://mastodon.social/tags/astro" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#astro</a> <a href="https://mastodon.social/tags/ssg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ssg</a> <a href="https://mastodon.social/tags/docusaurus" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#docusaurus</a> <a href="https://mastodon.social/tags/eleventy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eleventy</a> <a href="https://mastodon.social/tags/vuepress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuepress</a> <a href="https://mastodon.social/tags/vuejs3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs3</a> <a href="https://mastodon.social/tags/11ty" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#11ty</a> <a href="https://mastodon.social/tags/vitepress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vitepress</a> <a href="https://github.com/pages-cms/pages-cms" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/pages-cms/pages-cms</a> <a href="https://pagescms.org/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://pagescms.org/</a>

artfulrobotWhat's the simplest bundler that can compile <a href="https://fosstodon.org/tags/sass" class="mention hashtag" rel="tag">#sass</a> <a href="https://fosstodon.org/tags/svelte" class="mention hashtag" rel="tag">#svelte</a> <a href="https://fosstodon.org/tags/svelte4" class="mention hashtag" rel="tag">#svelte4</a> <a href="https://fosstodon.org/tags/vuejs" class="mention hashtag" rel="tag">#vuejs</a> <a href="https://fosstodon.org/tags/vuejs3" class="mention hashtag" rel="tag">#vuejs3</a> and vanilla <a href="https://fosstodon.org/tags/javascript" class="mention hashtag" rel="tag">#javascript</a> files these days?I've been using <a href="https://laravel-mix.com/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://laravel-mix.com/</a> ... which has served me well but the svelte plugin is dead to me because of an error I'm not able to fix myself and the maintainer has no time <a href="https://github.com/wewowweb/laravel-mix-svelte/issues/36" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://github.com/wewowweb/laravel-mix-svelte/issues/36</a>I just want something that can take sass → css files; and can compile app.js (which imports an svelte app form various .svelte files, ditto for <a href="https://fosstodon.org/tags/vue" class="mention hashtag" rel="tag">#vue</a> )

senthu :vue:Finally I can start my <a href="https://fosstodon.org/tags/100daysofcode" class="mention hashtag" rel="tag">#100daysofcode</a> Day 0 of 99:I've tried to follow a tutorial on how to program a Single Page application with <a href="https://fosstodon.org/tags/vuejs3" class="mention hashtag" rel="tag">#vuejs3</a> , <a href="https://fosstodon.org/tags/vite" class="mention hashtag" rel="tag">#vite</a> and <a href="https://fosstodon.org/tags/Pinia" class="mention hashtag" rel="tag">#Pinia</a> .I must say it was a very challenging and I've realized that I'm missing the basics. So tomorrow I will start reading the official vuejs guide/tutorial again.

LukasGibt es ein frei und quelloffenes (Open Source) Softwareprojekt mit dem sich Texte auf Webseiten offline über längerem Touch auf den Text vorlesen lassen können?:boost_ok: <a href="https://nerdculture.de/tags/barrierefreiheit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#barrierefreiheit</a> <a href="https://nerdculture.de/tags/vuejs3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vuejs3</a> <a href="https://nerdculture.de/tags/html5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html5</a> <a href="https://nerdculture.de/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://nerdculture.de/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://nerdculture.de/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://nerdculture.de/tags/inklusion" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#inklusion</a> <a href="https://nerdculture.de/tags/followerpower" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#followerpower</a> <a href="https://nerdculture.de/tags/followerinnenpower" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#followerinnenpower</a> <a href="https://nerdculture.de/tags/boostokay" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#boostokay</a> <a href="https://nerdculture.de/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> <a href="https://nerdculture.de/tags/freelibreopensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#freelibreopensource</a> <a href="https://nerdculture.de/tags/floss" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#floss</a> <a href="https://nerdculture.de/tags/foss" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#foss</a> <a href="https://nerdculture.de/tags/audio" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#audio</a> <a href="https://nerdculture.de/tags/texttospeech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#texttospeech</a> <a href="https://nerdculture.de/tags/tts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tts</a> <a href="https://nerdculture.de/tags/offlinetts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#offlinetts</a> <a href="https://nerdculture.de/tags/localtts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#localtts</a> <a href="https://nerdculture.de/tags/fediversepower" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fediversepower</a> <a href="https://nerdculture.de/tags/softwaredev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#softwaredev</a> <a href="https://nerdculture.de/tags/development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#development</a> <a href="https://nerdculture.de/tags/swdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#swdevelopment</a>

Recent searches

Search options

Administered by:

Server stats:

#vuejs3