3861 lines
180 KiB
HTML
3861 lines
180 KiB
HTML
<p align="center">
|
||
<br>
|
||
<img width="400" src="./assets/logo.svg" alt="logo of vue-awesome repository">
|
||
<br> <br>
|
||
</p>
|
||
<h2 id="awesome-vue.js-awesome-track-awesome-list">Awesome Vue.js <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a> <a
|
||
href="https://www.trackawesomelist.com/vuejs/awesome-vue"><img
|
||
src="https://www.trackawesomelist.com/badge.svg"
|
||
alt="Track Awesome List" /></a></h2>
|
||
<blockquote>
|
||
<p>A curated list of awesome things related to Vue.js</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a href="#awesome-vuejs--">Awesome Vue.js</a></li>
|
||
<li><a href="#resources">Resources</a>
|
||
<ul>
|
||
<li><a href="#official-resources">Official Resources</a></li>
|
||
<li><a href="#external-resources">External Resources</a></li>
|
||
<li><a href="#job-portal">Job Portal</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#conferences">Conferences</a></li>
|
||
<li><a href="#podcasts">Podcasts</a></li>
|
||
<li><a href="#official-examples">Official Examples</a></li>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#blog-posts">Blog Posts</a></li>
|
||
<li><a href="#courses">Courses</a></li>
|
||
<li><a href="#documentaries">Documentaries</a></li>
|
||
</ul></li>
|
||
<li><a href="#companies-using-vuejs">Companies Using Vue.js</a></li>
|
||
<li><a href="#projects-using-vuejs">Projects Using Vue.js</a>
|
||
<ul>
|
||
<li><a href="#open-source">Open Source</a></li>
|
||
<li><a href="#commercial-products">Commercial Products</a></li>
|
||
<li><a href="#appswebsites">Apps/Websites</a></li>
|
||
<li><a href="#interactive-experiences">Interactive Experiences</a></li>
|
||
<li><a href="#enterprise-usage">Enterprise Usage</a></li>
|
||
<li><a href="#a11y">A11y</a></li>
|
||
</ul></li>
|
||
<li><a href="#components--libraries">Components & Libraries</a>
|
||
<ul>
|
||
<li><a href="#frameworks">Frameworks</a>
|
||
<ul>
|
||
<li><a href="#responsive">Responsive</a></li>
|
||
<li><a href="#mobile">Mobile</a></li>
|
||
<li><a href="#component-collections">Component Collections</a></li>
|
||
<li><a href="#admin-template">Admin Template</a></li>
|
||
<li><a href="#server-side-rendering">Server-side rendering</a></li>
|
||
<li><a href="#static-website-generator">Static website
|
||
generator</a></li>
|
||
<li><a href="#other">Other</a></li>
|
||
</ul></li>
|
||
<li><a href="#ui-layout">UI Layout</a></li>
|
||
<li><a href="#ui-components">UI Components</a>
|
||
<ul>
|
||
<li><a href="#table">Table</a></li>
|
||
<li><a href="#notification">Notification</a></li>
|
||
<li><a href="#loader">Loader</a>
|
||
<ul>
|
||
<li><a href="#progress-bar">Progress Bar</a></li>
|
||
</ul></li>
|
||
<li><a href="#tooltip">Tooltip</a></li>
|
||
<li><a href="#overlay">Overlay</a></li>
|
||
<li><a href="#icons">Icons</a></li>
|
||
<li><a href="#marquee">Marquee</a></li>
|
||
<li><a href="#menu">Menu</a></li>
|
||
<li><a href="#carousel">Carousel</a></li>
|
||
<li><a href="#charts">Charts</a></li>
|
||
<li><a href="#time">Time</a></li>
|
||
<li><a href="#calendar">Calendar</a></li>
|
||
<li><a href="#map">Map</a></li>
|
||
<li><a href="#audio--video">Audio / Video</a></li>
|
||
<li><a href="#infinite-scroll">Infinite Scroll</a></li>
|
||
<li><a href="#markdown">Markdown</a></li>
|
||
<li><a href="#pdf">PDF</a></li>
|
||
<li><a href="#tree">Tree</a></li>
|
||
<li><a href="#graph">Graph</a></li>
|
||
<li><a href="#social-sharing">Social Sharing</a></li>
|
||
<li><a href="#qr-code">QR Code</a></li>
|
||
<li><a href="#search">Search</a></li>
|
||
<li><a href="#miscellaneous">Miscellaneous</a></li>
|
||
<li><a href="#tabs">Tabs</a></li>
|
||
<li><a href="#form">Form</a>
|
||
<ul>
|
||
<li><a href="#phone-number-input-formatter">Phone Number Input
|
||
Formatter</a></li>
|
||
<li><a href="#picker">Picker</a></li>
|
||
<li><a href="#generator">Generator</a>
|
||
<ul>
|
||
<li><a href="#date-picker">Date Picker</a></li>
|
||
</ul></li>
|
||
<li><a href="#select">Select</a></li>
|
||
<li><a href="#drag-and-drop">Drag and Drop</a></li>
|
||
<li><a href="#autocomplete">Autocomplete</a></li>
|
||
<li><a href="#type-select">Type Select</a></li>
|
||
<li><a href="#color-picker">Color Picker</a></li>
|
||
<li><a href="#switch">Switch</a></li>
|
||
<li><a href="#masked-input">Masked Input</a></li>
|
||
<li><a href="#rich-text-editing">Rich Text Editing</a></li>
|
||
<li><a href="#image-manipulation">Image Manipulation</a></li>
|
||
<li><a href="#file-upload">File Upload</a></li>
|
||
<li><a href="#context-menu">Context Menu</a></li>
|
||
<li><a href="#miscellaneous-1">Miscellaneous</a></li>
|
||
<li><a href="#wizard">Wizard</a></li>
|
||
</ul></li>
|
||
<li><a href="#canvas">Canvas</a></li>
|
||
<li><a href="#link-preview">Link Preview</a></li>
|
||
<li><a href="#tour">Tour</a></li>
|
||
</ul></li>
|
||
<li><a href="#ui-utilities">UI Utilities</a>
|
||
<ul>
|
||
<li><a href="#event-handling">Event Handling</a></li>
|
||
<li><a href="#responsive-design">Responsive Design</a></li>
|
||
<li><a href="#form-1">Form</a>
|
||
<ul>
|
||
<li><a href="#validation">Validation</a></li>
|
||
</ul></li>
|
||
<li><a href="#resize">Resize</a></li>
|
||
<li><a href="#scroll">Scroll</a></li>
|
||
<li><a href="#routing">Routing</a></li>
|
||
<li><a href="#lazy-load">Lazy Load</a></li>
|
||
<li><a href="#pagination">Pagination</a></li>
|
||
<li><a href="#animation">Animation</a></li>
|
||
<li><a href="#meta-tags">Meta Tags</a></li>
|
||
<li><a href="#portal">Portal</a></li>
|
||
<li><a href="#svg">SVG</a></li>
|
||
<li><a href="#miscellaneous-2">Miscellaneous</a></li>
|
||
<li><a href="#webgl">WebGL</a></li>
|
||
<li><a href="#fullscreen">Fullscreen</a></li>
|
||
<li><a href="#printing">Printing</a></li>
|
||
</ul></li>
|
||
<li><a href="#utilities">Utilities</a>
|
||
<ul>
|
||
<li><a href="#typescript">Typescript</a></li>
|
||
<li><a href="#http-requests">HTTP Requests</a></li>
|
||
<li><a href="#i18n">i18n</a></li>
|
||
<li><a href="#custom-events">Custom Events</a></li>
|
||
<li><a href="#persistence">Persistence</a></li>
|
||
<li><a href="#state-management">State Management</a>
|
||
<ul>
|
||
<li><a href="#mobx">Mobx</a></li>
|
||
<li><a href="#pinia">Pinia</a></li>
|
||
<li><a
|
||
href="#authenticationauthorization">Authentication/Authorization</a></li>
|
||
<li><a href="#vuex-utilities">Vuex Utilities</a></li>
|
||
</ul></li>
|
||
<li><a href="#graphql">GraphQL</a></li>
|
||
<li><a href="#code-style">Code Style</a></li>
|
||
<li><a href="#css">CSS</a></li>
|
||
<li><a href="#asset-management">Asset Management</a></li>
|
||
<li><a href="#page-navigation">Page Navigation</a></li>
|
||
<li><a href="#miscellaneous-3">Miscellaneous</a></li>
|
||
<li><a href="#web-sockets">Web Sockets</a></li>
|
||
<li><a href="#payment">Payment</a>
|
||
<ul>
|
||
<li><a href="#stripe">Stripe</a></li>
|
||
</ul></li>
|
||
</ul></li>
|
||
<li><a href="#integrations">Integrations</a>
|
||
<ul>
|
||
<li><a href="#vue-cli-plugins">Vue CLI Plugins</a>
|
||
<ul>
|
||
<li><a href="#google-analytics">Google Analytics</a></li>
|
||
</ul></li>
|
||
</ul></li>
|
||
<li><a href="#dev-tools">Dev Tools</a>
|
||
<ul>
|
||
<li><a href="#inspect">Inspect</a></li>
|
||
<li><a href="#docs">Docs</a></li>
|
||
<li><a href="#test">Test</a></li>
|
||
<li><a href="#source-code-editing">Source Code Editing</a>
|
||
<ul>
|
||
<li><a href="#vim">Vim</a></li>
|
||
<li><a href="#visual-studio-code">Visual Studio Code</a></li>
|
||
<li><a href="#intellij">Intellij</a></li>
|
||
<li><a href="#emacs">Emacs</a></li>
|
||
</ul></li>
|
||
</ul></li>
|
||
<li><a href="#scaffold">Scaffold</a>
|
||
<ul>
|
||
<li><a href="#universal">Universal</a></li>
|
||
<li><a href="#electron">Electron</a></li>
|
||
</ul></li>
|
||
<li><a href="#prerendering">Prerendering</a></li>
|
||
</ul></li>
|
||
</ul>
|
||
<!-- md-parser-start -->
|
||
<h2 id="resources">Resources</h2>
|
||
<h3 id="official-resources">Official Resources</h3>
|
||
<ul>
|
||
<li><a href="https://vuejs.org/">Documentation</a></li>
|
||
<li><a href="http://vuejs.org/api/">API Reference</a></li>
|
||
<li><a href="https://github.com/vuejs/">GitHub Repo</a></li>
|
||
<li><a href="https://github.com/vuejs/core/releases">Release
|
||
Notes</a></li>
|
||
<li><a href="https://vuejs.org/v2/style-guide/">Style Guide</a></li>
|
||
<li><a href="https://news.vuejs.org/">Vue.js News</a></li>
|
||
<li><a
|
||
href="https://github.com/vuejs/language-tools?tab=readme-ov-file#vue-language-tools">IDE
|
||
Language Support</a></li>
|
||
<li><a href="https://github.com/vitejs/awesome-vite">Awesome
|
||
Vite</a></li>
|
||
</ul>
|
||
<h3 id="external-resources">External Resources</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://gist.github.com/hashrock/f575928d0e109ace9ad0">Vue.js
|
||
資料まとめ(for japanese)</a> by <span class="citation"
|
||
data-cites="hashrock">@hashrock</span></li>
|
||
<li><a href="https://en.wikipedia.org/wiki/Vue.js">Vue.js
|
||
Wikipedia</a></li>
|
||
<li><a href="https://mokkapps.de/newsletter">Weekly Vue.js
|
||
Newsletter</a> - Weekly Vue.js news & tips by <span class="citation"
|
||
data-cites="mokkapps">@mokkapps</span></li>
|
||
<li><a href="https://vuenews.io">Vue News</a> - Social website focusing
|
||
on the latest Vue.js news and information.</li>
|
||
<li><a href="https://hackr.io/tutorials/learn-vue-js">Vue Curated
|
||
Resources</a> - Recommended Vue.js courses and tutorials.</li>
|
||
<li><a href="https://vueschool.io">Vue School</a> - Learn Vue.js from
|
||
video courses by core members and industry experts</li>
|
||
<li><a href="https://vuedose.tips">VueDose</a>. Tips & tricks about
|
||
the Vue ecosystem, for busy devs.</li>
|
||
<li><a href="https://dev.to/t/vue">Vue.js DEV Community</a> - Official
|
||
tag for the Vue.js JavaScript Framework on DEV.to</li>
|
||
<li><a href="https://classpert.com/vuejs">Vue.js Online Courses
|
||
Directory</a> - Vue.js courses from top e-learning platforms curated by
|
||
Classpert, a online course search engine.</li>
|
||
<li><a
|
||
href="https://webtechsurvey.com/technology/vue.js">WebTechSurvey.com</a>
|
||
- An extensive list of websites created with the Vue.js Javascript
|
||
framework.</li>
|
||
<li><a href="https://www.vuemastery.com/">Vue Mastery</a> - The ultimate
|
||
learning resource for Vue developers</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLMLZt4pr7Aq6AfC_ynfeDbEk2hbMFGpHO">Vue
|
||
3 Video Playlist</a> - Amazing Vue 3 tutorials and experiments</li>
|
||
<li><a href="https://public.vuejsworkshops.com">Vue.js Workshops</a> -
|
||
Learn Vue 2, in browser, by building 3 applications: Landing page, Todos
|
||
App and Podcasts aggregator.( Vue.js, Vue-Router, Vuex, Vue-Axios,
|
||
Vue-Apollo )</li>
|
||
<li><a href="https://thewebdev.info/category/javascript/vue/">Vue.js
|
||
Articles</a> - Assorted Vue 2 and 3 tutorials and articles.</li>
|
||
<li><a
|
||
href="https://www.nbshare.io/blog/best-vue-js-courses-on-youtube/">Best
|
||
vue.js Courses On YouTube</a> - Handpicked list of best Vue.js tutorials
|
||
on YouTube</li>
|
||
<li><a href="https://notes-on-vue.ackzell.dev/">Notes on Vue</a> - A
|
||
personal guide to Vue development.</li>
|
||
<li><a href="https://vue-faq.org/">Vue-FAQ</a> - FAQ about frontend in
|
||
general and Vue.js in particular.</li>
|
||
<li><a
|
||
href="https://www.monterail.com/stateofvue?utm_source=Github&utm_medium=awesomevue">State
|
||
of Vue Report</a> - The 5th edition of the most comprehensive Vue
|
||
publication. Co-created with Evan You, the Vue & Nuxt Core
|
||
Teams</li>
|
||
</ul>
|
||
<h3 id="job-portal">Job Portal</h3>
|
||
<ul>
|
||
<li><a href="https://vuejobs.com/">Vue.js Jobs - VueJobs</a> - A Vue.js
|
||
job portal to hire or get hired for all your Vue.js jobs.</li>
|
||
<li><a
|
||
href="https://github.com/sudheerj/vuejs-interview-questions">Vue.js
|
||
Interview Questions</a> - A List of 300 VueJS Interview Questions and
|
||
Answers</li>
|
||
</ul>
|
||
<h3 id="community">Community</h3>
|
||
<ul>
|
||
<li><a href="https://x.com/vuejs">X (Twitter)</a></li>
|
||
<li><a href="http://forum.vuejs.org/">Official Forum</a></li>
|
||
<li><a href="https://t.me/vue_en">VueJS English community</a></li>
|
||
<li><a href="https://telegram.me/vue_js">VueJS Iran - Telegram Channel
|
||
& group (group link available in channel bio)</a></li>
|
||
<li><a href="https://t.me/vuejs_ru">VueJS Russia - Telegram Group
|
||
[Russian]</a></li>
|
||
<li><a href="https://www.facebook.com/groups/vuejsvietnam/">VueJS Viet
|
||
Nam - Facebook group</a></li>
|
||
<li><a href="https://www.facebook.com/groups/VuejsThailand/">VueJS
|
||
Thailand - Facebook Group</a></li>
|
||
<li><a href="https://t.me/vuejsbrasil">VueJS Brasil - Telegram Group
|
||
[Portuguese]</a></li>
|
||
<li><a href="https://www.facebook.com/vuejsbrasil/">VueJS Brasil -
|
||
Facebook Page [Portuguese]</a></li>
|
||
<li><a href="https://www.facebook.com/groups/vuejsbr/">VueJS Brasil -
|
||
Facebook Group [Portuguese]</a></li>
|
||
<li><a href="https://www.facebook.com/groups/vue.es/">VueJS en español -
|
||
Facebook Group [Spanish]</a></li>
|
||
<li><a href="https://goo.gl/mYXKUv">VueJS India 🇮🇳 - Discord chat
|
||
server</a></li>
|
||
<li><a href="https://t.me/vuejsindonesia">VueJS Indonesia - Telegram
|
||
Group [Indonesian]</a></li>
|
||
<li><a href="https://www.facebook.com/groups/1675298779418239/">VueJS
|
||
Indonesia - Facebook Group [Indonesian]</a></li>
|
||
<li><a href="https://www.facebook.com/groups/887185518120024">VueJS Hong
|
||
Kong - Facebook group</a></li>
|
||
<li><a href="https://t.me/vuejsarab">VueJS Arab - Telegram
|
||
Group</a></li>
|
||
<li><a href="https://t.me/vuejsvix">VueJS Vix - Telegram Group
|
||
[Portuguese]</a></li>
|
||
<li><a href="https://www.facebook.com/officalVuejsIsrael/">VueJS Israel
|
||
🇮🇱 - Facebook Page</a></li>
|
||
<li><a href="https://www.facebook.com/vuejsfinland/">VueJS Finland -
|
||
Facebook Page</a></li>
|
||
<li><a href="https://t.me/vuejsEs">Hablemos de Vue.js - Telegram Group
|
||
[Castellano]</a></li>
|
||
<li><a href="http://bit.ly/vueblr-whatsapp">VueBLR - WhatsApp
|
||
Group</a></li>
|
||
<li><a href="https://www.facebook.com/groups/vue.blr/">VueBLR - Facebook
|
||
Group</a></li>
|
||
<li><a href="https://events.vuejs.org/meetups/#united-states">VueJS USA
|
||
- Meetups</a></li>
|
||
<li><a href="https://discord.gg/mDr2z8V">VueJS CZ/SK - Discord
|
||
group</a></li>
|
||
<li><a href="https://chat.whatsapp.com/L5rFQpme22IHmmyOMI1MWA">VueJS DOM
|
||
- WhatsApp group</a></li>
|
||
<li><a href="https://t.me/vuejsuzbekcommunity">VueJS Uzbekistan -
|
||
Telegram Group [Uzbek]</a></li>
|
||
<li><a href="https://t.me/vuejs_uz">VueJS Uzbekistan - Telegram
|
||
Community and Support Group [Uzbek]</a></li>
|
||
<li><a href="https://t.me/vuejsTR">VueJS Turkey - Telegram
|
||
Group</a></li>
|
||
<li><a href="https://twitter.com/Vue_Turkey">Vue Turkey - Twitter
|
||
Account</a></li>
|
||
<li><a href="https://kommunity.com/vue-turkey">Vue Türkiye - Kommunity
|
||
Page</a></li>
|
||
<li><a href="https://t.me/vuejssg">VueJS Singapore - Telegram
|
||
Group</a></li>
|
||
<li><a href="https://t.me/joinchat/pqiJOgi8byQ5Y2E0">VueJS Bootcamp
|
||
kablosuzkedi - Turkey - Telegram Group</a></li>
|
||
<li><a href="https://t.me/vuejs_ukraine">VueJS Translations Ukraine</a>
|
||
- Telegram Group (Ukraine)</li>
|
||
<li><a href="https://twitter.com/KenyaVue">VueJS Kenya - Twitter
|
||
Account</a></li>
|
||
<li><a href="https://www.facebook.com/groups/huvuejs/">VueJS Magyar -
|
||
Facebook Group [Hungarian]</a></li>
|
||
<li><a href="https://www.facebook.com/groups/764064325433370">VueJS
|
||
Bangladesh - Facebook Group</a></li>
|
||
</ul>
|
||
<h3 id="conferences">Conferences</h3>
|
||
<ul>
|
||
<li><a href="http://vueconf.us">VueConf US</a></li>
|
||
<li><a href="https://vuetoronto.com">VueConf Toronto</a></li>
|
||
<li><a href="https://vuejs.amsterdam">Vue.js Amsterdam</a></li>
|
||
</ul>
|
||
<h3 id="podcasts">Podcasts</h3>
|
||
<ul>
|
||
<li><a href="http://www.fullstackradio.com/30">Full Stack Radio #30
|
||
(11-23-2015)</a></li>
|
||
<li><a href="https://changelog.com/podcast/184">Changelog #184
|
||
(11-27-2015)</a></li>
|
||
<li><a
|
||
href="http://softwareengineeringdaily.com/2015/12/29/front-end-javascript-with-evan-you/">Software
|
||
Engineering Daily (12-29-2015)</a></li>
|
||
<li><a href="https://javascriptair.com/episodes/2016-03-30/">JavaScript
|
||
Air 016 (03-30-2016)</a></li>
|
||
<li><a
|
||
href="https://soundcloud.com/codecasts/2-falando-sobre-vuejs-e-web-components">Codecasts
|
||
#2 - Falando Sobre Vuejs e Web Components (2016-08-19) [pt-BR]</a></li>
|
||
<li><a href="http://www.fullstackradio.com/50">Full Stack Radio #50
|
||
(09-21-2016)</a></li>
|
||
<li><a href="https://teahour.fm/78">和 Vue.js
|
||
框架的作者聊聊前端框架开发背后的故事 [zh-CN]</a></li>
|
||
<li><a href="https://changelog.com/rfc/12">Request For Commits #12 -
|
||
Crowdfunding Open Source (Vue.js) (06-15-2017)</a></li>
|
||
<li><a href="http://thewebplatformpodcast.com/132-vuejs">The Web
|
||
Platform Podcast 132: Vue.js (07-27-2017)</a></li>
|
||
<li><a
|
||
href="https://softwareengineeringdaily.com/2017/12/01/animating-vuejs-with-sarah-drasner/">Animating
|
||
VueJS with Sarah Drasner(Software Engineering Daily 01-12-2017)</a></li>
|
||
<li><a href="https://qit.cloud/search/vue">Vue podcast list via The QIT
|
||
Tech Podcast Indexer</a></li>
|
||
<li><a
|
||
href="https://devnaestrada.com.br/2018/01/05/vale-pena-vuejs.html">DNE
|
||
138 - Vale a pena VueJS? (01-05-2018)</a></li>
|
||
<li><a href="https://cynicaldeveloper.com/podcast/99/">Cynical Developer
|
||
#99 (10-15-2018)</a></li>
|
||
<li><a
|
||
href="https://syntax.fm/show/130/the-vuejs-show-scott-teaches-wes">Syntax
|
||
#130 (03-27-2019)</a></li>
|
||
<li><a href="https://enjoythevue.io/">Enjoy the Vue: The new Vue.js
|
||
podcast</a></li>
|
||
<li><a
|
||
href="https://mytypeof.dev/episode/s1-e22-que-es-pinia-con-posva">What
|
||
is Pinia? with <span class="citation" data-cites="posva">@posva</span>
|
||
(My typeof Radio) [es-MX]</a></li>
|
||
<li><a
|
||
href="https://mytypeof.dev/episode/s1-e9-evolucion-de-vue-parte-i">Evolution
|
||
of Vue - Part I (My typeof Radio) [es-MX]</a></li>
|
||
<li><a
|
||
href="https://mytypeof.dev/episode/s1-e10-evolucion-de-vue-parte-ii">Evolution
|
||
of Vue - Part II (My typeof Radio) [es-MX]</a></li>
|
||
<li><a
|
||
href="https://mytypeof.dev/episode/s1-e11-evolucion-de-vue-parte-iii">Evolution
|
||
of Vue - Part III (My typeof Radio) [es-MX]</a></li>
|
||
<li><a
|
||
href="https://mytypeof.dev/episode/s1-e8-react-vs-vue-las-comunidades">React
|
||
vs Vue - their communities (My typeof Radio) [es-MX]</a></li>
|
||
<li><a href="https://topenddevs.com/podcasts/views-on-vue">Views on Vue
|
||
(weekly podcast on Vue)</a></li>
|
||
<li><a href="https://dejavue.fm/">DejaVue - The Vue podcast to
|
||
remember</a></li>
|
||
<li><a
|
||
href="https://mytypeof.dev/episode/s3-e7-pinia-y-sus-amigos-en-2025-con-posva">Pinia
|
||
and friends in 2025 with <span class="citation"
|
||
data-cites="posva">@posva</span> (My typeof Radio) [es-MX]</a></li>
|
||
</ul>
|
||
<h3 id="official-examples">Official Examples</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/vuejs/vue/tree/dev/examples/todomvc">Vue.js
|
||
TodoMVC</a></li>
|
||
</ul>
|
||
<h3 id="tutorials">Tutorials</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://laracasts.com/series/learn-vue-3-step-by-step">Learn Vue
|
||
3: Step by Step</a> on Laracasts</li>
|
||
<li><a
|
||
href="https://auth0.com/blog/vuejs2-authentication-tutorial/">Vuejs 2
|
||
Authentication Tutorial</a> on Auth0 blog</li>
|
||
<li><a
|
||
href="https://scotch.io/tutorials/create-a-github-file-explorer-using-vue-js">Create
|
||
a GitHub File Explorer Using Vue.js</a> on Scotch.io</li>
|
||
<li><a href="https://www.youtube.com/watch?v=l1KHL-TX3qs">Vuex
|
||
introduction video - James Browne from London Vue.js Meetup #1</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=TGSJjDahlrQ">Hybrid App
|
||
Example with Laravel and Vue.js in Portuguese</a> by <span
|
||
class="citation" data-cites="vedovelli">@vedovelli</span></li>
|
||
<li><a href="http://oguzhan.in/vue-js-ile-uygulama-gelistirme/">Vue.js
|
||
Introduction Turkish Language</a> on oguzhan.in</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=IlFk3cyRB0Y&list=PLM-Y_YQmMEqD2EWfWpSbiV3WgShRRW3FE&index=7">Vue.js
|
||
VideoTutoral Series in Spanish (3-8-2016)</a> on YouTube by Juan Andrés
|
||
Núñez</li>
|
||
<li><a href="https://styde.net/curso-de-vue-js/">Vue.js Screencast
|
||
Series in Spanish</a> on Styde.net</li>
|
||
<li><a href="https://github.com/bhnddowinf/vuejs-learn"><strong>讲解
|
||
Vue.js 官网 中文-含代码、百度云、youtube</strong></a> on bhnddowinf</li>
|
||
<li><a
|
||
href="https://blog.pusher.com/exploring-real-time-apps-with-vuejs-es2016-and-webpack/">Exploring
|
||
Real Time Apps with VueJS, ES2015 and Webpack</a> on Pusher</li>
|
||
<li><a href="https://www.sekolahkoding.com/track/belajar-vue-js">Vue.js
|
||
in Bahasa Indonesia</a> on sekolahkoding.com</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL5r0NkdgM0UOxb4Hl81FV5UIgexwTf8h7">Vue.js
|
||
from Scratch Series in Russian</a> on YouTube by .dev</li>
|
||
<li><a href="http://codeguida.com/post/526/">Створення сервісу для
|
||
зберігання файлів з Flask, RethinkDB та Vue.js, ч. 1</a> Ukraine</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLjwdMgw5TTLW-mAtlR46VajrKs4dep3y0">VueJS
|
||
2 French tutorial</a> Français par Grafikart</li>
|
||
<li><a
|
||
href="http://wijmo.com/blog/how-to-create-great-vuejs-applications-using-wijmo-controls/">How
|
||
to Create Great VueJS Applications Using Wijmo Controls</a></li>
|
||
<li><a href="https://github.com/bhnddowinf/vuejs2-learn"><strong>讲解
|
||
Vue.js 2 官网 中文-含代码、百度云、youtube</strong></a> on
|
||
bhnddowinf</li>
|
||
<li><a
|
||
href="https://www.theodo.fr/blog/2016/10/medium-like-image-loading-with-vue-js/">Medium
|
||
like Image Loading with Vue.js</a></li>
|
||
<li><a
|
||
href="https://metricloop.com/blog/how-to-use-vuex-in-a-laravel-spark-project">How
|
||
to Use Vuex in a Laravel Spark Project</a> on
|
||
<code>Metric Loop</code></li>
|
||
<li><a
|
||
href="https://metricloop.com/blog/how-to-set-up-modules-in-vuex">How To
|
||
Set Up Modules in Vuex</a> on <code>Metric Loop</code></li>
|
||
<li><a href="https://www.sitepoint.com/up-and-running-vue-js-2-0/">Up
|
||
and Running with the Vue.js 2.0 Framework</a> on SitePoint</li>
|
||
<li><a
|
||
href="https://metricloop.com/blog/how-to-make-api-calls-with-vuex">How
|
||
to make API Calls with Vuex</a> on <code>Metric Loop</code></li>
|
||
<li><a
|
||
href="https://metricloop.com/blog/how-to-use-vuex-to-build-a-feature">How
|
||
to Use Vuex to Build a Feature</a> on <code>Metric Loop</code></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLwAKR305CRO_1yAao-8aZiQnBqJeyng4O">Vue.js
|
||
2.0 Fundamentals</a> on YouTube by DevMarketer</li>
|
||
<li><a
|
||
href="https://medium.com/js-dojo/vuex-for-the-clueless-the-missing-primer-on-vues-application-data-store-33fa51ffc3af#.2j25xpfui">Vuex
|
||
For The Clueless — The Missing Primer On Vue’s Application Data
|
||
Store</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=Jxefsv5Zqkw&t=3s">Real-time
|
||
Grid Component Laravel, Vue.js, Vuex & Socket.io</a></li>
|
||
<li><a href="https://www.udemy.com/vuejs-2-the-complete-guide">VueJS 2 -
|
||
The Complete Guide (incl. Vuex) - Udemy Tutorial</a></li>
|
||
<li><a
|
||
href="https://egghead.io/courses/develop-web-apps-with-vue-js">Develop
|
||
Web Apps with Vue.js</a> on <a
|
||
href="https://egghead.io/">egghead.io</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07">Vue.js
|
||
2 - Getting Started</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL55RiY5tL51pT0DNJraU93FhMzhXxtDAo">Vue.js
|
||
2 & Vuex (Basics)</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLa3NvhdFWNipwk1KXeUpVQnAiAfuBw4El">Türkçe
|
||
VueJS Eğitim Videoları</a> on YouTube by <a
|
||
href="http://fatihacet.com">Fatih Acet</a></li>
|
||
<li><a href="https://youtu.be/7pmw5gvWAf8">Let’s Vue! - OpenLecture
|
||
2017.01 in Russian</a> on YouTube by Illya Klymov (<a
|
||
href="https://github.com/xanf/"><span class="citation"
|
||
data-cites="xanf">@xanf</span></a>)</li>
|
||
<li><a
|
||
href="https://afropolymath.svbtle.com/bootstrapping-your-first-vue-js-project/">Bootstrapping
|
||
your first Vue.js application using vue-cli</a> by <a
|
||
href="https://twitter.com/afropolymath"><span class="citation"
|
||
data-cites="afropolymath">@afropolymath</span></a></li>
|
||
<li><a
|
||
href="https://github.com/Detachment/Build-vue-hackernews-2.0-from-scratch">Build
|
||
vue-hackernews-2.0 from Scratch</a> by <a
|
||
href="https://github.com/Detachment">@ Detachment</a></li>
|
||
<li><a
|
||
href="https://medium.com/@JiriChara/role-based-authorization-for-your-vue-js-and-nuxt-js-applications-using-vue-kindergarten-fd483e013ec5#.kp81np177">Role
|
||
Based Authorization for your Vue.js and Nuxt.js Applications Using
|
||
vue-kindergarten</a></li>
|
||
<li><a
|
||
href="http://matthiashager.com/complete-vuejs-application-tutorial">Complete
|
||
Vue.js Application Tutorial - Creating a Simple Budgeting App with
|
||
Vue</a> by <a href="https://github.com/matthiaswh"><span
|
||
class="citation" data-cites="matthiaswh">@matthiaswh</span></a></li>
|
||
<li><a
|
||
href="https://snipcart.com/blog/vuejs-tutorial-seo-example">Vue.js
|
||
Tutorial: A Prerendered, SEO-Friendly Example</a></li>
|
||
<li><a
|
||
href="https://medium.com/@mattrothenberg/vue-js-introduction-for-people-who-know-just-enough-jquery-to-get-by-eab5aa193d77">Vue.js
|
||
Introduction For People Who Know Just Enough jQuery To Get By</a></li>
|
||
<li><a
|
||
href="https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/">Fetching
|
||
Data from a Third-Party API with Vue.js and Axios</a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/fun-projects-vue-2-video">Fun
|
||
Projects with Vue 2 (Video)</a> by Peter van Meijgaard, Packt. (April
|
||
2017)</li>
|
||
<li><a
|
||
href="https://medium.com/dailyjs/vue-js-simultaneously-running-express-and-webpack-dev-server-292f4a7ed7a3">Vue
|
||
JS: Simultaneously Running Express and Webpack Dev Server</a> on Medium
|
||
by Henrik Fogelberg</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa">Vue
|
||
JS 2 Tutorials</a> on Youtube by <a
|
||
href="https://www.thenetninja.co.uk">The Net Ninja</a></li>
|
||
<li><a
|
||
href="https://www.storyblok.com/tp/add-a-headless-CMS-to-vuejs-in-5-minutes">Add
|
||
a headless CMS to VueJs in 5 Minutes</a></li>
|
||
<li><a
|
||
href="https://github.com/dengwanc/dengwanc.github.io/issues/11">vue
|
||
架构中的 Watcher</a></li>
|
||
<li><a
|
||
href="http://tutorialzine.com/2016/08/building-your-first-app-with-vue-js/">Building
|
||
Your First App With Vue.js</a></li>
|
||
<li><a
|
||
href="http://tutorialzine.com/2016/03/5-practical-examples-for-learning-vue-js/">5
|
||
Practical Examples For Learning Vue.js</a></li>
|
||
<li><a
|
||
href="https://jes.al/2017/05/migrating-from-knockoutjs-to-vuejs/">Migrating
|
||
from KnockoutJS to VueJS</a></li>
|
||
<li><a
|
||
href="https://medium.com/@rap2h/create-a-quiz-with-vue-js-ed1e8e0e8294">Create
|
||
a quiz with Vue.js</a> by <a href="https://twitter.com/rap2h"><span
|
||
class="citation" data-cites="rap2h">@rap2h</span></a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=we4zuQIXmnw">Vue.js 2 &
|
||
Firebase - Building Real Time Single Page Web Applications</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=p-7Zi9xYt2M">Vue.js 2 &
|
||
Vue-Resource - Real-World Application With External API Access</a></li>
|
||
<li><a href="https://scrimba.com/playlist/playlist-38">Interactive
|
||
Vue.js Screencasts For Beginners</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=uC5b2VDATDU">Vue.JS ile
|
||
NASA API’ını Kullanarak Veri Çekme</a> on YouTube</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/web-development-vuejs-2-video">Web
|
||
development with Vue.js 2 (Video)</a> by Olga Filipova, Packt. (June
|
||
2017)</li>
|
||
<li><a
|
||
href="https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/">Build
|
||
a realtime chart with VueJS and Pusher</a></li>
|
||
<li><a href="https://github.com/sdras/intro-to-vue">Intro to Vue, repo
|
||
for Frontend Masters Course</a></li>
|
||
<li><a href="https://css-tricks.com/guides/vue/">Vue Guide on
|
||
CSS-Tricks</a></li>
|
||
<li><a
|
||
href="https://medium.com/coding-blocks/using-typescript-in-your-vue-app-c4aba0bbc8bc">Using
|
||
Typescript in your VueJS app</a></li>
|
||
<li><a href="https://ninghao.net/course/4256">Vue.js 预览</a> on
|
||
ninghao.net</li>
|
||
<li><a
|
||
href="https://www.liquidlight.co.uk/blog/article/building-a-vue-v2-js-app-using-vue-router/">Building
|
||
a Vue v2 JS app using Vue-router</a></li>
|
||
<li><a
|
||
href="https://medium.com/@davidatomhernandez/how-to-a-simple-carousel-with-vue-138715d615d7">Build
|
||
your own carousel with Vue</a> by <a
|
||
href="https://twitter.com/Atom_Hernandez"><span class="citation"
|
||
data-cites="Atom_Hernandez">@Atom_Hernandez</span></a></li>
|
||
<li><a
|
||
href="https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/">Unit
|
||
Testing Vue.js Components with the Official Vue Testing Tools and
|
||
Jest</a> by <a href="https://twitter.com/alexjoverm"><span
|
||
class="citation" data-cites="alexjoverm">@alexjoverm</span></a></li>
|
||
<li><a
|
||
href="https://snipcart.com/blog/vuejs-transitions-animations">Creating
|
||
Vue.js Transitions & Animation: Live Examples</a> by <a
|
||
href="https://twitter.com/UdyUXDev"><span class="citation"
|
||
data-cites="udyuxdev">@udyuxdev</span></a></li>
|
||
<li><a
|
||
href="https://alligator.io/vuejs/creating-custom-plugins/">Creating
|
||
Custom Vue.js Plugins</a></li>
|
||
<li><a
|
||
href="https://medium.com/js-dojo/async-in-vue-js-part-1-28d96f751a2e">Async
|
||
in VueJS part 1</a></li>
|
||
<li><a
|
||
href="https://medium.com/js-dojo/async-in-vuejs-part-2-45e81c836e38">Async
|
||
in VueJS part 2</a></li>
|
||
<li><a
|
||
href="https://www.mikestreety.co.uk/blog/vue-js-using-localstorage-with-the-vuex-store">Using
|
||
localStorage with Vuex store without a plugin</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=ESg0k2zdME4">Using props
|
||
for accessing URL parameters within components with Vue Router</a></li>
|
||
<li><a
|
||
href="https://medium.com/@kamerk22/deploy-vue-js-ssr-vuetify-on-production-with-pm2-and-nginx-ec7b5c0748a3">Deploy
|
||
Vue.js — SSR(Vuetify) on Production with Pm2 and Nginx</a></li>
|
||
<li><a href="http://testingvue.com">Testing Vue Components</a> on <a
|
||
href="https://laracasts.com/series/testing-vue">laracast</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=Fa4cRMaTDUI&t=">Building a
|
||
Full Stack Web App with Vue.js and Express.js</a> by <a
|
||
href="https://twitter.com/CodyLSeibert"><span class="citation"
|
||
data-cites="CodyLSeibert">@CodyLSeibert</span></a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/vuejs-2-recipes-video">Vue.js
|
||
2 Recipes (Video)</a> by Peter van Meijgaard, Packt. (September
|
||
2017)</li>
|
||
<li><a
|
||
href="https://sabe.io/tutorials/getting-started-with-vue-js">Getting
|
||
Started with Vue.js</a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/building-your-first-advanced-crud-application-vue-2-video">Building
|
||
Your First Advanced CRUD Application with Vue 2 (Video)</a> by Peter van
|
||
Meijgaard, Packt. (July 2017)</li>
|
||
<li><a
|
||
href="https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/">프론트엔드
|
||
개발자를 위한 Vue.js 입문서</a></li>
|
||
<li><a
|
||
href="https://www.inflearn.com/course/vue-pwa-vue-js-%EA%B8%B0%EB%B3%B8/">누구나
|
||
다루기 쉬운 Vue.js (Video)</a> on <a
|
||
href="https://www.inflearn.com/">Inflearn</a> by <a
|
||
href="https://joshua1988.github.io/">Captain Pangyo</a></li>
|
||
<li><a href="https://snipcart.com/blog/vuejs-blog-demo#tutorial">Build a
|
||
Vue.js Blog in 2 hours tops</a> on <a
|
||
href="https://snipcart.com/">Snipcart</a></li>
|
||
<li><a href="https://www.udemy.com/getting-started-with-vue-js">Getting
|
||
Started with VueJS 2</a> by Sachin Bhatnagar <a
|
||
href="https://www.twitter.com/sachinbee"><span class="citation"
|
||
data-cites="sachinbee">@sachinbee</span></a> on <a
|
||
href="https://udemy.com/">Udemy</a></li>
|
||
<li><a
|
||
href="https://sabe.io/tutorials/getting-started-with-vuex">Getting
|
||
Started with Vuex: Managing State in Vue.js</a></li>
|
||
<li><a
|
||
href="https://medium.com/@sergiy.stotskiy/vue-acl-with-casl-781a374b987a">Vue2
|
||
ACL using CASL</a> by Sergii Stotskyi</li>
|
||
<li><a
|
||
href="https://www.storyblok.com/tp/how-to-auth0-vuejs-authentication">Vuejs
|
||
2.5+ Authentication Tutorial using Auth0</a> on Storyblok blog</li>
|
||
<li><a href="https://hygraph.com/docs/introduction/">Hygraph
|
||
introduction guide with Vue</a> on Hygraph</li>
|
||
<li><a
|
||
href="https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli">Vue.js
|
||
debugging in Chrome and VS Code</a> This recipe shows how to use the
|
||
Debugger for Chrome extension with VS Code to debug Vue.js applications
|
||
generated by the Vue CLI.</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/getting-started-vue-js-2-video">Getting
|
||
Started with Vue JS 2 (Video)</a> by Sachin Bhatnagar, Packt. (January
|
||
2018)</li>
|
||
<li><a
|
||
href="https://hackernoon.com/building-a-movie-app-interface-with-vue-js-cdc8aeb5db0b">Building
|
||
a movie app interface with Vue.js</a></li>
|
||
<li><a
|
||
href="https://hackernoon.com/lets-build-a-custom-vue-js-router-7de634be87c4">Let’s
|
||
Build a Custom Vue.js Router</a></li>
|
||
<li><a
|
||
href="https://snipcart.com/blog/vuejs-ecommerce-headless-buttercms">Build
|
||
a Vue.Js E-Commerce App with ButterCMS Headless Backend</a></li>
|
||
<li><a href="https://pusher.com/tutorials/voting-app-go-vuejs">Build a
|
||
voting application with Go and Vue.js</a></li>
|
||
<li><a
|
||
href="https://pusher.com/tutorials/collaborative-painting-vuejs">Build a
|
||
collaborative painting app using Vue.js</a></li>
|
||
<li><a
|
||
href="https://pusher.com/tutorials/realtime-payment-dashboard-stripe">Build
|
||
a realtime payment dashboard with Stripe</a></li>
|
||
<li><a
|
||
href="https://pusher.com/tutorials/cryptocurrency-tracker-vue">Build a
|
||
cryptocurrency tracker using Vue.js</a></li>
|
||
<li><a href="https://pusher.com/tutorials/design-feedback-vuejs">Build a
|
||
design feedback app using Vue.js</a></li>
|
||
<li><a
|
||
href="https://testdriven.io/developing-a-single-page-app-with-flask-and-vuejs">Developing
|
||
a Single Page App with Flask and Vue.js</a></li>
|
||
<li><a
|
||
href="https://testdriven.io/accepting-payments-with-stripe-vuejs-and-flask">Accepting
|
||
Payments with Stripe, Vue.js, and Flask</a></li>
|
||
<li><a
|
||
href="https://serversideup.net/courses/api-driven-development-laravel-vuejs/">API
|
||
Driven Development With Laravel and VueJS (Free Course)</a> on
|
||
serversideup.net</li>
|
||
<li><a
|
||
href="https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87">Managing
|
||
State in Vue.js</a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/real-world-projects-vuejs-video">Real
|
||
World Projects with Vue.js</a> by Daniel Khalil, Packt. (August
|
||
2018)</li>
|
||
<li><a href="https://goo.gl/8p3msR">Heartbeat (Vue + NW.js Desktop app
|
||
Video series)</a> by Axel Martínez (2017 - 2020)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=ZYUWsjUxxUQ">Firebase
|
||
Server-Side Render Vue Apps with Nuxt.js (Server-side Rendering with
|
||
JavaScript Frameworks)</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=Y5XX2lruhxs">Firebase
|
||
Measuring Vue SSR Performance with Nuxt.js (Server-side Rendering with
|
||
JavaScript Frameworks)</a></li>
|
||
<li><a
|
||
href="https://dev.to/denisinvader/creating-an-interactive-map-with-d3-and-vue-4158">Creating
|
||
an interactive map with D3 and Vue</a> (October 2018)</li>
|
||
<li><a
|
||
href="https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon">The
|
||
guide to write universal, SSR-ready Vue components</a></li>
|
||
<li><a href="https://vueschool.io/courses/vuejs-fundamentals">Vue.js
|
||
Fundamentals</a></li>
|
||
<li><a href="https://vueschool.io/courses/vuex-for-everyone">Vuex for
|
||
Everyone</a></li>
|
||
<li><a href="https://vueschool.io/courses/vuejs-form-validation">Vue.js
|
||
Form Validation</a></li>
|
||
<li><a href="https://vueschool.io/courses/the-vuejs-master-class">The
|
||
Vue.js Master Class</a></li>
|
||
<li><a
|
||
href="https://vueschool.io/courses/vuejs-firebase-realtime-database">Vue.js
|
||
Firebase Realtime Database</a></li>
|
||
<li><a
|
||
href="https://vueschool.io/courses/vuejs-firebase-authentication">Vue.js
|
||
Firebase Authentication</a></li>
|
||
<li><a href="https://vueschool.io/courses/dynamic-forms-vuejs">Dynamic
|
||
Forms with Vue.js</a></li>
|
||
<li><a
|
||
href="https://vueschool.io/courses/custom-vuejs-directives">Custom
|
||
Vue.js Directives</a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/vuejs-application-development-essentials-video">Vue.js
|
||
Application Development Essentials</a> by Bartłomiej Potaczek, Packt.
|
||
(October 2018)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/troubleshooting-vuejs-video">Troubleshooting
|
||
Vue.js</a> by Christian Hur, Packt. (October 2018)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/nuxtjs-vuejs-steroids-video">Nuxt.js
|
||
- Vue.js on Steroids</a> by Maximilian Schwarzmüller, Packt. (October
|
||
2018)</li>
|
||
<li><a
|
||
href="https://medium.com/quasar-framework/building-an-electron-file-explorer-with-quasar-and-vue-7bf94f1bbf6">Building
|
||
an Electron File Explorer with Quasar (and Vue)</a> by <a
|
||
href="https://github.com/hawkeye64"><span class="citation"
|
||
data-cites="hawkeye64">@hawkeye64</span></a>. (November 2018)</li>
|
||
<li><a
|
||
href="https://www.udemy.com/build-web-apps-with-vuejs-firebase/learn/v4/overview">Build
|
||
Web Apps with Vue JS 2 & Firebase</a> on <code>Udemy</code> by <a
|
||
href="https://www.thenetninja.co.uk/">the Net Ninja</a></li>
|
||
<li><a
|
||
href="https://www.udemy.com/vuejs-2-the-complete-guide/learn/v4/overview">Vue
|
||
JS 2 - The Complete Guide (incl. Vue Router & Vuex)</a> on
|
||
<code>Udemy</code> by Maximilian Schwarzmüller</li>
|
||
<li><a
|
||
href="https://www.jenniferbland.com/spa-application-using-vue-js-vuex-vuetify-and-firebase-part-1/">SPA
|
||
Application using Vue.js, Vuex, Vuetify, and Firebase (Part 1)</a>
|
||
(November 2018)</li>
|
||
<li><a
|
||
href="https://www.jenniferbland.com/spa-application-using-vue-js-vuex-vuetify-and-firebase-part-2/">SPA
|
||
Application using Vue.js, Vuex, Vuetify, and Firebase (Part 2)</a>
|
||
(November 2018)</li>
|
||
<li><a
|
||
href="https://www.jenniferbland.com/spa-application-using-vue-js-vuex-vuetify-and-firebase-part-3/">SPA
|
||
Application using Vue.js, Vuex, Vuetify, and Firebase (Part 3)</a>
|
||
(November 2018)</li>
|
||
<li><a
|
||
href="https://www.jenniferbland.com/spa-application-using-vue-js-vuex-vuetify-and-firebase-part-4/">SPA
|
||
Application using Vue.js, Vuex, Vuetify, and Firebase (Part 4)</a>
|
||
(November 2018)</li>
|
||
<li><a
|
||
href="https://www.jenniferbland.com/adding-internationalization-to-a-vue-application/">Adding
|
||
Internationalization to a Vue Application</a> (November 2018)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/practical-projects-vue-js-2-video">Practical
|
||
Projects with Vue JS 2</a> by Jack Herrington, Packt. (December
|
||
2018)</li>
|
||
<li><a href="https://lessipe.com/course/15">Vue.js 기초 다지기
|
||
(Video)</a> by <a href="https://lessipe.com/">Lessipe</a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/full-stack-web-development-vuejs-and-nodejs-video">Full
|
||
Stack Web Development with Vue.js and Node.js</a> by Haider Rehman,
|
||
Packt. (January 2019)</li>
|
||
<li><a href="https://designcode.io/vue">Vue for Designers</a> by
|
||
Design+Code (February 2019)</li>
|
||
<li><a href="https://www.onbirkod.com/vue-js-giris-1/">Vue Introduction
|
||
in Turkish</a></li>
|
||
<li><a href="https://www.onbirkod.com/vue-js-2-vue-resource/">Data
|
||
pulling using Vue-Resource in Turkish</a></li>
|
||
<li><a
|
||
href="https://www.onbirkod.com/vue-js-3-vue-router-ile-bir-spa-uygulamasi/">Spa
|
||
Application using Vue-router in Turkish</a></li>
|
||
<li><a
|
||
href="https://www.onbirkod.com/vue-js-4-vue-cli-ile-hazir-gelen-proje-sablonlari/">Create
|
||
Vue Projects using Vue-cli in Turkish</a></li>
|
||
<li><a
|
||
href="https://www.onbirkod.com/vue-js-5-bilesenlerin-birbiriyle-haberlesmesi-ve-vuex/">Messaging
|
||
between Vue components and Vuex in Turkish</a></li>
|
||
<li><a
|
||
href="https://michaelnthiessen.com/dynamically-add-class-name/">How to
|
||
Dynamically Add a Class Name in Vue</a> by Michael Thiessen</li>
|
||
<li><a href="https://www.youtube.com/watch?v=FdC4Mjljd3k">Build a
|
||
Library web application with Vue JS, Node JS, and SQL or MongoDB using
|
||
ScaffoldHub</a> By Felipe Lima <a
|
||
href="https://twitter.com/scaffoldhub_io"><span class="citation"
|
||
data-cites="scaffoldhub_io">@scaffoldhub_io</span></a></li>
|
||
<li><a
|
||
href="https://medium.com/saibbyweb/building-a-real-time-location-tracking-app-with-nativescript-vue-under-350-lines-of-code-8b51ad40d657">Building
|
||
a Realtime Location tracking app with NativeScript + Vue</a> by
|
||
Saibbyweb</li>
|
||
<li><a
|
||
href="https://www.pluralsight.com/courses/vue-getting-started">Vue:
|
||
Getting Started, by John Papa</a> on <a
|
||
href="https://www.pluralsight.com">Pluralsight</a></li>
|
||
<li><a href="https://mtlynch.io/simple-vue-pre-rendered/">Building a
|
||
Simple Pre-Rendered Web App Using Vue + Nuxt</a> by Michael Lynch</li>
|
||
<li><a
|
||
href="https://dev.to/hasurahq/vue-and-graphql-with-hasura-video-course-3mpp">Vue
|
||
and GraphQL with Hasura video course</a></li>
|
||
<li><a href="https://www.youtube.com/c/rabbitwerksjavascript">Frontend
|
||
and Fullstack VENM-stack coding tutorials by RabbitWerks
|
||
JavaScript</a></li>
|
||
<li><a href="https://nordschool.com/tag/vue">Nordschool Vue
|
||
Tutorials</a></li>
|
||
<li><a href="https://nordschool.com/vue-props/">Vue Props Validation -
|
||
Best Practices</a></li>
|
||
<li><a href="https://nordschool.com/vue-router/">Vue Router - The
|
||
Complete Guide</a></li>
|
||
<li><a
|
||
href="https://nordschool.com/enable-vs-code-debugger-for-nuxt-and-typescript/">Enable
|
||
VS Code Debugger for Nuxt & Typescript</a></li>
|
||
<li><a
|
||
href="https://nordschool.com/create-a-blog-with-gridsome-and-vue/">Create
|
||
A Blog With Gridsome & Vue</a></li>
|
||
<li><a
|
||
href="https://tutorialedge.net/projects/building-imgur-clone-vuejs-nodejs/">Building
|
||
an Imgur Clone with Vue.js and Serverless</a></li>
|
||
<li><a
|
||
href="https://tutorialedge.net/projects/hacker-news-clone-vuejs/">Building
|
||
a HackerNews clone in Vue.js on AWS</a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/programming/vue-js-build-a-full-stack-app-with-firebase-vuex-and-router-video?utm_source=Vuejs.org&utm_medium=referral&utm_campaign=OutreachV15745">Vue.js:
|
||
Build a Full Stack App with Firebase, Vuex and Router [Video]</a> by
|
||
Chris Dixon (October 2019)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/vue-js-2-academy-learn-vue-step-by-step-video?utm_source=Vuejs.org&utm_medium=referral&utm_campaign=OutreachV15754">Vue.js
|
||
2 Academy: Learn Vue Step by Step [Video]</a> by Chris Dixon (October
|
||
2019)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/in/web-development/blazing-fast-vue-and-graphql-with-gridsome-video?utm_source=vue.js.org&utm_medium=refferal&utm_campaign=OutreachV15688">Blazing-Fast
|
||
Vue and GraphQL with Gridsome [Video]</a> by Reed Barger, Packt</li>
|
||
<li><a
|
||
href="https://raddevon.com/articles/build-your-first-vue-js-app/">Build
|
||
Your First Vue.js App in About 30 Minutes</a> by Rad Devon (Video,
|
||
February 2020)</li>
|
||
<li><a
|
||
href="https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/">How
|
||
to make your components dynamic in Vue JS</a> (September 2019)</li>
|
||
<li><a href="https://blog.logrocket.com/fragments-in-vue-js/">Fragments
|
||
in Vue JS</a> (December 2019)</li>
|
||
<li><a
|
||
href="https://dev.to/blacksonic/build-a-movie-search-app-using-the-vue-composition-api-5218">Build
|
||
a movie search app using the Vue Composition API</a></li>
|
||
<li><a
|
||
href="https://dev.to/blacksonic/vue-testing-crash-course-59kl">Vue
|
||
Testing Crash Course</a></li>
|
||
<li><a
|
||
href="https://blog.bitsrc.io/sharing-and-reusing-vue-mixins-in-the-cloud-with-bit-dev-830104a48d0b">Sharing
|
||
and re-using Vue Mixins in the cloud with Bit.dev</a> (May 2019)</li>
|
||
<li><a
|
||
href="https://blog.bitsrc.io/introducing-watchers-in-vue-js-d3efd4f4e726">Using
|
||
Watchers in Vue JS</a> (June 2019)</li>
|
||
<li><a
|
||
href="https://blog.bitsrc.io/understanding-filters-in-vue-js-7a53b1521dce">Understanding
|
||
Filters in Vue JS</a> (June 2019)</li>
|
||
<li><a
|
||
href="https://vijitail.dev/blog/form-validation-in-vue-using-yup">Form
|
||
Validation In VueJS Using Yup</a> by <a
|
||
href="https://vijitail.dev/">Vijit Ail</a> (May 2020)</li>
|
||
<li><a href="https://chanvinxiao.com/blog/vuejs-tic-tac-toe/">Use Vue.js
|
||
to Rewrite React’s Official Tutorial Tic Tac Toe</a> By <a
|
||
href="https://github.com/vinzid">Chanvin Xiao</a></li>
|
||
<li><a
|
||
href="https://vue-view.com/can-we-use-python-with-vue-js-or-vue-and-django-or-flask/">Can
|
||
we use Python with Vue.js or Vue and Django or Flask?</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks#Vue_tutorials">MDN
|
||
- Vue tutorials</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=ZqgiuPt5QZo&ab_channel=TheEarthisSquare">Learn
|
||
Vue 3 for Beginners - Full 2020 Tutorial Course</a> on Youtube</li>
|
||
<li><a href="https://www.youtube.com/watch?v=bwItFdPt-6M">Vue 3
|
||
Composition Api Introduction - Full Tutorial</a></li>
|
||
<li><a
|
||
href="https://ably.com/blog/airtable-database-realtime-messages">Building
|
||
a VueJS chat app with realtime storage of messages in Airtable</a> by
|
||
Srushtika Neelakantam (December 2020)</li>
|
||
<li><a
|
||
href="https://github.com/ably-labs/realtime-quiz-framework/blob/main/TUTORIAL.md">Building
|
||
a realtime quiz with VueJS using a starter kit</a> by Srushtika
|
||
Neelakantam (October 2020)</li>
|
||
<li><a
|
||
href="https://dev.to/venatus/tutorial-make-an-heart-clicker-with-vue-js-and-firebase-3npe">Make
|
||
an Heart clicker with vue.js and firebase</a></li>
|
||
<li><a
|
||
href="https://codesource.io/building-an-e-commerce-app-with-vue-js-vuex-axios/">Building
|
||
an E-Commerce app with Vue.js, Vuex & Axios</a> by Deven Rathore (
|
||
November 2020)</li>
|
||
<li><a href="https://snipcart.com/blog/vuejs-debugging">Vue.js
|
||
Debugging: A Guide to Fixing Your Frontend</a> - Learn the basics of
|
||
Vue.js debugging. This guide will walk you through a tutorial on how to
|
||
fix your application’s frontend.</li>
|
||
<li><a href="https://github.com/cuixiaorui/mini-vue">Help you learn more
|
||
efficiently vue3 source code - mini-vue</a> by cuixiaorui</li>
|
||
<li><a href="https://snipcart.com/blog/building-a-vuejs-spa">Vue.js SPA:
|
||
Build a Powerful E-Commerce App</a></li>
|
||
<li><a href="https://github.com/chengpeiquan/learning-vue3">Learning Vue
|
||
3.0</a></li>
|
||
<li><a href="https://github.com/hypescale/moralis-vue-boilerplate">Vue
|
||
3.0 and decentralized app (dApp)</a></li>
|
||
<li><a
|
||
href="https://www.loginradius.com/blog/async/implementing-authentication-on-vuejs-using-jwt/">Vuejs
|
||
Authentication Tutorial</a> on LoginRadius blog</li>
|
||
<li><a
|
||
href="https://www.daily.co/blog/build-a-video-chat-app-with-vue-and-daily-prebuilt/">Add
|
||
a prebuilt video chat widget to any Vue app with daily-js</a> by Jess
|
||
Mitchell, via Daily (August 2021)</li>
|
||
<li><a
|
||
href="https://www.daily.co/blog/custom-video-chat-app-with-daily-and-vue/">Build
|
||
a custom video chat app with daily-js and Vue</a> by Jess Mitchell, via
|
||
Daily (November 2021)</li>
|
||
<li><a href="https://snipcart.com/blog/vue-pwa-development">Vue Pwa:
|
||
Build a Progressive Web Application With Nuxt</a> on Snipcart</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLmJs3lfUmCdS8W27OoWj3uGDP6g4ypNyw">Meteor
|
||
+ Vue</a> Youtube playlist by Axel Martínez</li>
|
||
<li><a href="https://scrimba.com/playlist/pDzVxUd">Introduction to Vue
|
||
(Spanish)</a> Scrimba mini-course in Spanish.</li>
|
||
<li><a
|
||
href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3">Intro
|
||
to Vue 3</a> - Free course on Vue 3 with intuitive explanations from Vue
|
||
Mastery</li>
|
||
<li><a
|
||
href="https://mickael-baron.fr/web/vuejs-miseenoeuvre-part2">Developing
|
||
a web application with Vue.js 3 and Vite.js (French)</a> par Mickael
|
||
Baron</li>
|
||
<li><a
|
||
href="https://mickael-baron.fr/web/vuejs-deploiement-part3">Deploying a
|
||
web application powered by Vue.js 3 with Docker (French)</a> par Mickael
|
||
Baron</li>
|
||
<li><a
|
||
href="https://medium.com/@dev.isasari/vuejsin-react-ve-angular-a-g%C3%B6re-avantajlar%C4%B1-6fe1d653beb1">Advantages
|
||
of Vue.js over React, Angular, and other frameworks in Turkish</a> by
|
||
İsa Sarı</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLf-6qk7szL-J4a7xaGf2TbW0p_cGbeMe7">Türkçe
|
||
Vue 3 Dersleri</a> on Youtube by Abdullah Uğraşkan</li>
|
||
<li><a
|
||
href="https://www.bilibili.com/video/BV11z42167J2/">宁皓网独立开发者训练营：Vue
|
||
前端应用开发</a> on bilibili</li>
|
||
<li><a
|
||
href="https://studio.youtube.com/video/7SyviyGuk8k/edit">宁皓网独立开发者训练营：Vue
|
||
前端应用开发</a> on Youtube</li>
|
||
<li><a href="https://intlayer.org/doc/environment/vite-and-vue">Getting
|
||
Started Internationalizing (i18n) with Intlayer and Vite and
|
||
Vue</a></li>
|
||
<li><a
|
||
href="https://dev.to/nagell/creating-a-scalable-monorepo-for-vue-intro-4nnm">Creating
|
||
a scalable Monorepo for Vue</a> by <a
|
||
href="https://github.com/nagell"><span class="citation"
|
||
data-cites="nagell">@nagell</span></a></li>
|
||
</ul>
|
||
<h3 id="examples">Examples</h3>
|
||
<ul>
|
||
<li><a href="https://pengfu.github.io/vue-2048/">Vue 2048 (Vue +
|
||
Webpack)</a> by <a href="https://github.com/pengfu"><span
|
||
class="citation" data-cites="pengfu">@pengfu</span></a>: Popular
|
||
2048-Game implemented using Vue,Webpack,Sass,ES6</li>
|
||
<li><a
|
||
href="https://github.com/TIGERB/easy-vue"><strong>easy-vue</strong></a>
|
||
a easy example using the vue to implement easy web with vue 2.0, vuex
|
||
2.0, vue-router 2.0, vue-infinite-scroll 2.0, vue-progressbar 2.0 by <a
|
||
href="https://github.com/tigerb">TIGERB</a></li>
|
||
<li><a href="https://github.com/ndabAP/vue-sails-example">Vue.js with
|
||
Sails.js example project</a> - This project is for those who are new to
|
||
single-page applications and want to learn through a real example.</li>
|
||
<li><a
|
||
href="https://github.com/eddyekofo94/pyramidVue.git"><strong>Vue.js
|
||
& Pyramid web framework app</strong></a> - A boilerplate using
|
||
Pylons Pyramid webframework backend Vuejs webpack2, vue-router,
|
||
yarn(packet manager)</li>
|
||
<li><a
|
||
href="https://github.com/ErickPetru/vue-feathers-chat">vue-feathers-chat</a>
|
||
A sample realtime chat made with Vue in frontend and Feathers in
|
||
backend, but using just Socket.IO-Client for the communication</li>
|
||
<li><a href="https://github.com/JackGit/xplan/">vue-xplan</a> A rotating
|
||
earth demo page created with Vue and three.js</li>
|
||
<li><a
|
||
href="https://github.com/Chanran/vueSocketChatroom"><strong>vueSocketChatRoom</strong></a>
|
||
A socket chat room using
|
||
vue2.x,vuex2.x,vue-router2.x,vux2.x,socket.io</li>
|
||
<li><a href="http://binaryify.github.io/vue-tetris/">vue-tetris (Use
|
||
Vue, Vuex, Immutable to code Tetris)</a> by <a
|
||
href="https://github.com/Binaryify"><span class="citation"
|
||
data-cites="Binaryify">@Binaryify</span></a>: Use Vue, Vuex, Immutable
|
||
to code Tetris.</li>
|
||
<li><a
|
||
href="https://kasheftin.github.io/route-planner-vue/">route-planner-vue</a>
|
||
by <a href="https://github.com/Kasheftin"><span class="citation"
|
||
data-cites="Kasheftin">@Kasheftin</span></a>: The tool for planning
|
||
routes with multiple sortable layers, draggable directions, markers and
|
||
shapes on google map.</li>
|
||
<li><a href="https://github.com/vue-project">VueJS Example Projects</a>
|
||
on Github</li>
|
||
<li><a href="https://github.com/sdras/vue-weather-notifier">Vue Weather
|
||
Notifier</a> A small sample animation app with SVG and Vuex</li>
|
||
<li><a
|
||
href="https://github.com/OXOYO/X-Flowchart-Vue">X-Flowchart-Vue</a> - A
|
||
flowchart editor with SVG and Vue</li>
|
||
<li><a
|
||
href="https://github.com/johndatserakis/koa-vue-notes-web">koa-vue-notes-web</a>
|
||
- A fleshed-out SPA using Koa 2.3 on the backend and Vue 2.4 on the
|
||
frontend. Includes fully featured user-authentication components, CRUD
|
||
actions for the user’s notes, and Vuex store modules.</li>
|
||
<li><a
|
||
href="https://github.com/bahmutov/vue-vuex-todomvc">vue-vuex-todomvc</a>
|
||
- Example TodoMVC Vue.js app with Vuex store and server backend via REST
|
||
and full set of E2E tests using <a
|
||
href="https://www.cypress.io/">Cypress.io</a> test runner.</li>
|
||
<li><a
|
||
href="https://github.com/OXOYO/X-WebDesktop-Vue">X-WebDesktop-Vue</a> -
|
||
The WebDesktop system based on Vue</li>
|
||
<li><a href="https://github.com/SierraSoftworks/vue-template">Skeleton
|
||
Vue+TypeScript</a> - TypeScript, VueJS, ElementUI, Vue Router, Vuex,
|
||
Material Icons, BrowserSync, Dockerfile</li>
|
||
<li><a href="https://github.com/viljamis/vue-design-system">Vue Design
|
||
System</a> - An open source boilerplate for building UI Design Systems
|
||
with Vue.js.</li>
|
||
<li><a href="https://vuejsexamples.com/">Vuejs Examples</a></li>
|
||
<li><a href="https://github.com/acidjazz/laranuxt">Laravel + Nuxt.js
|
||
boilerplate</a> - by <a href="https://github.com/acidjazz"><span
|
||
class="citation" data-cites="acidjazz">@acidjazz</span></a></li>
|
||
<li><a
|
||
href="https://github.com/meschg/vue-stack-cesium">vue-stack-cesium</a> -
|
||
A minimal sample configuration project with <a
|
||
href="https://cesium.com/cesiumjs/">CesiumJS</a> and all the awesome vue
|
||
features. The project contains many examples how to combine and use
|
||
certain packages to get started.</li>
|
||
<li><a
|
||
href="https://github.com/wobsoriano/vuemoji-picker">vuemoji-picker</a> -
|
||
Vue 2 and 3 lightweight emoji picker.</li>
|
||
<li><a href="https://github.com/maxim-top/maxim-web">Maxim Web Chat</a>
|
||
- A chat demo using <a href="https://www.maximtop.com">MaximTop</a>’s IM
|
||
SDK (floo), 使用美信拓扑 IM SDK 实现的聊天 App 示例.</li>
|
||
<li><a href="https://github.com/umodoc/editor">umo editor</a> - Umo
|
||
Editor is an open-source document editor, based on Vue3 and Tiptap.
|
||
Visit <a href="https://demo.umodoc.com/editor?lang=en-US">Playground</a>
|
||
for a fast experience.</li>
|
||
<li><a href="https://github.com/antfu/vitesse">Vitesse Starter</a> ⛺️
|
||
Vue 3 starter inclode ( Layouts | i18n | UnoCSS | pinia | Markdown |
|
||
Dark Mode | PWA | SSG | Component Auto-Importing | File-Based Router |
|
||
Composition API | TypeScript)</li>
|
||
<li><a href="https://github.com/antfu/vitesse-lite">Vitesse-lite
|
||
Starter</a> ⛺️ Lightweight version of Vitesse (Vue 3 Starter)</li>
|
||
<li><a href="https://github.com/EduardoProfe666/cerito-cruz-vue">Vue Tic
|
||
Tac Toe | Cerito Cruz</a> by <a
|
||
href="https://github.com/EduardoProfe666"><span class="citation"
|
||
data-cites="EduardoProfe666">@EduardoProfe666</span></a>: Popular
|
||
Tic-Tac-Toe-Game with extra features using Vue 3, Vite, TypeScript,
|
||
Tailwind, Gsap, Howler, Headless UI and Vue Use</li>
|
||
<li><a
|
||
href="https://github.com/aymericzip/intlayer-vite-vue-template">i18n
|
||
boilerplate Intlayer + Vue 3 + Vite</a></li>
|
||
<li><a href="https://github.com/mioe/tab-toolkit">tab-toolkit</a> - very
|
||
small app-tool for beginner guitarists 🎸 (PWA | Pinia | UnoCSS) by <a
|
||
href="https://github.com/mioe"><span class="citation"
|
||
data-cites="mioe">@mioe</span></a></li>
|
||
</ul>
|
||
<h3 id="books">Books</h3>
|
||
<ul>
|
||
<li><a href="https://www.packtpub.com/web-development/majesty-vuejs">The
|
||
Majesty Of Vue.js</a> by Alex Kyriakidis & Kostas Maniatis, Packt.
|
||
(Nov 2016)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/learning-vuejs-2">Learning
|
||
Vue.js 2</a> by Olga Filipova, Packt. (Dec 2016)</li>
|
||
<li><a href="https://leanpub.com/vuejs2">The Majesty Of Vue.js 2</a> by
|
||
Alex Kyriakidis and Kostas Maniatis, Leanpub. (Mar 2017)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/vuejs-2-cookbook">Vue.js
|
||
2 Cookbook</a> by Andrea Passaglia, Packt. (May 2017)</li>
|
||
<li><a href="https://www.manning.com/books/vue-js-in-action">Vue.js in
|
||
Action</a> by Erik Hanchett and Benjamin Listwon (Spring 2018)</li>
|
||
<li><a
|
||
href="https://www.manning.com/books/testing-vuejs-applications">Testing
|
||
Vue.js Applications</a> by Edd Yerburgh (Summer 2018)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/vuejs-2-and-bootstrap-4-web-development">Vue.js
|
||
2 and Bootstrap 4 Web Development</a> by Olga Filipova, Packt.
|
||
(September 2017)</li>
|
||
<li><a
|
||
href="https://www.casadocodigo.com.br/products/livro-frontend-vue">Front-end
|
||
com Vue.js</a> by Leonardo Vilarinho, Casa do Código. (November
|
||
2017)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/vuejs-2-web-development-projects">Vue.js
|
||
2 Web Development Projects</a> by Guillaume Chau, Packt. (November
|
||
2017)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/full-stack-vuejs-2-and-laravel-5">Full-Stack
|
||
Vue.js 2 and Laravel 5</a> by Anthony Gore, Packt. (December 2017)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/vuejs-2x-example">Vue.js
|
||
2.x by Example</a> by Mike Street, Packt. (December 2017)</li>
|
||
<li><a href="https://masteringvuejs.com">Mastering Vue.js</a> by
|
||
Oleksandr Kocherhin. (January 2018)</li>
|
||
<li><a href="https://www.fullstack.io/vue/">Fullstack Vue: The Complete
|
||
Guide to Vue.js</a> by Hassan Djirdeh, Nate Murray, & Ari Lerner.
|
||
(March 2018)</li>
|
||
<li><a href="https://www.amazon.com/dp/178883979X">Vue.js 2 Design
|
||
Patterns and Best Practices</a> by Paul Halliday, Packt. (March
|
||
2018)</li>
|
||
<li><a href="https://www.amazon.com/dp/1788999932">Vuex Quick Start
|
||
Guide</a> by Andrea Koutifaris, Packt. (April 2018)</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Full-Stack-Web-Development-Vue-js-Node/dp/1788831144">Full-Stack
|
||
Web Development with Vue.js and Node</a> by Aneeta Sharma, Packt. (May
|
||
2018)</li>
|
||
<li><a href="https://vuehandbook.com">The Vue Handbook</a> by Flavio
|
||
Copes. (July 2018)</li>
|
||
<li><a href="https://www.amazon.com/dp/1788839463">ASP.NET Core 2 and
|
||
Vue.js</a> by Stuart Ratcliffe, Packt. (July 2018)</li>
|
||
<li><a href="https://www.casadocodigo.com.br/products/livro-vue">Vue.js:
|
||
Construa aplicações incríveis</a> by Caio Incau, Casa do Código.
|
||
(September 2017)</li>
|
||
<li><a href="https://www.apress.com/us/book/9781484237809">Getting to
|
||
Know Vue.js</a> by Brett Nelson, Apress. (August 2018)</li>
|
||
<li><a href="https://leanpub.com/vue-book">Vue: Build & Deploy</a>
|
||
by Daniel Schmitz, Leanpub. (September 2018)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/building-applications-spring-5-and-vuejs-2">Building
|
||
Applications with Spring 5 and Vue.js 2</a> by James J. Ye, Packt.
|
||
(October 2018)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/vuejs-quick-start-guide">Vue.js
|
||
Quick Start Guide</a> by Ajdin Imsirovic, Packt. (October 2018)</li>
|
||
<li><a
|
||
href="https://fdietz.de/pages/vue-component-patterns-course/">Vue.js
|
||
Component Patterns Course</a> by Frederik Dietz (April 2019)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/business-other/vue-js-understanding-its-tools-and-ecosystem?utm_source=vue.js.org&utm_medium=referral&utm_campaign=OutreachB15894fivedollar">Vue.js:
|
||
Understanding its Tools and Ecosystem</a> by Dave Berning (November
|
||
2019)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/business-other/building-forms-with-vue-js?utm_source=Vuejs.org&utm_medium=referral&utm_campaign=OutreachB15411">Building
|
||
Forms with Vue.js</a> by Marina Mosti (October 2019)</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/programming/testing-vue-js-components-with-jest?utm_source=vue.js.org&utm_medium=refferal&utm_campaign=OutreachB15653">Testing
|
||
Vue.js Components with Jest</a> by Alex Jover Morales, Packt (October
|
||
2019)</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Vue-js-Actionable-Chris-Minnick/dp/1951959019">Vue.js</a>
|
||
by Chris Minnick and Nat Dunn, Webucator (February, 2020)</li>
|
||
<li><a href="https://books.ninja-squad.com/vue">Become a Ninja with Vue
|
||
3</a> by Cédric Exbrayat (English and French versions) (May, 2020)</li>
|
||
<li><a href="http://leanpub.com/vue-typescript/c/vaYXLEFWbMi7">Large
|
||
Scale Apps with Vue 3 and TypeScript</a> Damiano Fusco, Leanpub
|
||
(September, 2020)</li>
|
||
<li><a
|
||
href="https://theroadtoenterprise.com/?utm_source=github&utm_medium=vue-awesome&utm_campaign=vue_the_road_to_enterprise">Vue
|
||
- The Road To Enterprise</a> Thomas Findlay (January, 2021)</li>
|
||
<li><a href="https://accessible-vue.com">Accessible Vue – Get started
|
||
with Accessibility in Vue.js!</a> by Marcus Herrmann (March 2021)</li>
|
||
<li><a
|
||
href="https://snipcart.com/blog/strapi-ecommerce-nuxtjs-tutorial">Building
|
||
a Strapi E-Commerce: Nuxt.js Tutorial & Live Demo</a> (September
|
||
2021)</li>
|
||
</ul>
|
||
<h3 id="blog-posts">Blog Posts</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://medium.com/@malgamves/vue-x-hasura-graphql-d66f585a3ba5">Vue
|
||
x Hasura GraphQL</a></li>
|
||
<li><a
|
||
href="https://medium.com/@malgamves/using-graphql-mutations-in-vue-js-3b4570234edf">Using
|
||
GraphQL Mutations in Vue.js</a></li>
|
||
<li><a
|
||
href="https://medium.appbase.io/learn-how-to-build-a-github-search-explorer-app-with-vue-js-c66f61d6e152">Learn
|
||
How To Build A Data-Driven Search UI with Vue.JS</a></li>
|
||
<li><a
|
||
href="https://medium.com/@croo/using-gitlab-ci-cd-to-auto-deploy-your-vue-js-application-to-aws-s3-9affe1eb3457">Using
|
||
GitLab CI/CD to auto-deploy your Vue.js application to AWS S3</a></li>
|
||
<li><a
|
||
href="https://mherman.org/blog/dockerizing-a-vue-app/">Dockerizing a Vue
|
||
App</a></li>
|
||
<li><a
|
||
href="https://testdriven.io/blog/deploying-flask-to-heroku-with-docker-and-gitlab/">Deploying
|
||
a Flask and Vue App to Heroku with Docker and Gitlab CI</a></li>
|
||
<li><a
|
||
href="https://medium.com/3yourmind/large-scale-vuex-application-structures-651e44863e2f">Large-scale
|
||
Vuex application structures</a></li>
|
||
<li><a
|
||
href="https://medium.com/@kevin_peters/composing-computed-properties-in-vue-js-87b4507af079">Composing
|
||
computed properties in Vue.js</a></li>
|
||
<li><a
|
||
href="https://medium.com/@kevin_peters/learn-how-to-refactor-vue-js-single-file-components-on-a-real-world-example-501b3952ae49">Learn
|
||
how to refactor Vue.js Single File Components with a real-world
|
||
example</a></li>
|
||
<li><a
|
||
href="https://www.sitepoint.com/class-based-vue-js-typescript">Get
|
||
Started Writing Class-based Vue.js Apps in TypeScript</a></li>
|
||
<li><a href="https://johnpapa.net/vue-typescript">Vue.js with
|
||
TypeScript</a> by <a href="https://johnpapa.net/about/">John
|
||
Papa</a></li>
|
||
<li><a href="https://testdriven.io/blog/vue-unit-testing/">Guide to Unit
|
||
Testing Vue Components</a></li>
|
||
<li><a
|
||
href="https://dev.to/hasurahq/realtime-chat-app-with-vue-and-hasura-202h">Realtime
|
||
chat App with Vue and Hasura</a></li>
|
||
<li><a
|
||
href="https://buttercms.com/blog/vue-vs-react-which-is-the-better-framework">Vue
|
||
vs React: Which is the better framework?</a></li>
|
||
<li><a
|
||
href="https://buttercms.com/blog/build-a-beautiful-animated-news-app-with-vuejs-and-vuetify">Building
|
||
a Beautiful Animated News App with Vue.js and Vuetify</a></li>
|
||
<li><a
|
||
href="https://buttercms.com/blog/comparing-angular-vs-vue">Comparing
|
||
Angular vs Vue</a></li>
|
||
<li><a
|
||
href="https://www.ideamotive.co/blog/vue-vs-react?utm_source=github.com&utm_medium=social&utm_campaign=vue-vs-react">Vue
|
||
vs. React – Which Should You Pick For Your Next Web Project?</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLLhEJK7fQIxDWDJEyeT68wT8ZroODeRuw">Vue.js
|
||
from scratch series</a> on YouTube by Paris Nakita Kejser</li>
|
||
<li><a
|
||
href="https://medium.com/javascript-in-plain-english/10-quick-fire-vue-interview-questions-3c16d14a3b51">10
|
||
Quick-Fire Vue Interview Questions</a></li>
|
||
<li><a href="https://themeselection.com/vuejs-admin-template/">VueJS
|
||
Admin Template</a> - Collection of awesome opens source and premium
|
||
VueJS Admin Templates.</li>
|
||
</ul>
|
||
<h3 id="courses">Courses</h3>
|
||
<ul>
|
||
<li><a href="https://testdriven.io/courses/learn-vue/">Learn Vue by
|
||
Building and Deploying a CRUD App</a> - This course is focused on
|
||
teaching the fundamentals of Vue by building and testing a web
|
||
application using Test-Driven Development (TDD).</li>
|
||
<li><a href="https://frontendmasters.com/courses/advanced-vue/">Advanced
|
||
Vue.js Features from the Ground Up</a> - Learn how to build more
|
||
accessible routing, state management, form validation and
|
||
internationalization libraries from the ground up!</li>
|
||
<li><a href="https://vue-exercises.ninja-squad.com">Become a Ninja with
|
||
Vue 3</a> - This course teaches how to build a complete application with
|
||
Vue 3, step by step, using Vue CLI, TypeScript and the Composition API.
|
||
Each exercise comes with instructions and tests to check 100% of your
|
||
code.</li>
|
||
</ul>
|
||
<h3 id="documentaries">Documentaries</h3>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=OrxmtDw4pVI">Vue.js: The
|
||
Documentary</a> by Honeypot (Feb 2020)</li>
|
||
</ul>
|
||
<h2 id="companies-using-vue.js">Companies Using Vue.js</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/cloydlau/companies-using-vue">Companies
|
||
Using Vue/Nuxt</a></li>
|
||
</ul>
|
||
<h2 id="projects-using-vue.js">Projects Using Vue.js</h2>
|
||
<h3 id="open-source">Open Source</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/cheapsteak/npmcharts.com">npmcharts.com</a> -
|
||
Compare npm packages and spot download trends.</li>
|
||
<li><a href="https://github.com/phanan/koel">Koel</a> - A personal music
|
||
streaming server that works.</li>
|
||
<li><a href="https://github.com/astralapp/astral">astralapp</a> -
|
||
Organize Your GitHub Stars With Ease.</li>
|
||
<li><a href="https://github.com/jcc/blog">PJ Blog</a> - Open source blog
|
||
built with Laravel and Vue.js.</li>
|
||
<li><a href="https://github.com/koumoul-dev/openapi-viewer">OpenAPI 3
|
||
viewer</a> - Browse and test a REST API described with the OpenAPI 3.0
|
||
Specification</li>
|
||
<li><a
|
||
href="https://github.com/rigor789/nativescript-vue">nativescript-vue</a>
|
||
- A Vue.js implementation of the NativeScript renderer.</li>
|
||
<li><a
|
||
href="https://github.com/creativetimofficial/vue-paper-dashboard">Paper-Dashboard</a>
|
||
-Creative Tim Paper Dashboard made for Vue</li>
|
||
<li><a
|
||
href="https://github.com/coreui/coreui-free-vue-admin-template">CoreUI
|
||
Vue Admin Template</a> - Open Source Admin Template powered by
|
||
Vue.js</li>
|
||
<li><a
|
||
href="https://github.com/mubaidr/vuejs-extension-pack">vuejs-extension-pack
|
||
vscode</a> - An extension packf or vscode with popular VS Code
|
||
extensions for Vue.js development.</li>
|
||
<li><a href="https://github.com/Requarks/wiki">Wiki.js</a> - A modern,
|
||
lightweight and powerful wiki app built on NodeJS, Git and Markdown</li>
|
||
<li><a
|
||
href="https://github.com/headwirecom/peregrine-cms">peregrine-cms</a> -
|
||
A Vue.js and Apache Sling based head-optional CMS</li>
|
||
<li><a
|
||
href="https://github.com/creativetimofficial/vue-light-bootstrap-dashboard">Light
|
||
Bootstrap Dashboard</a> - Creative Tim Light Bootstrap Dashboard made
|
||
for Vue</li>
|
||
<li><a
|
||
href="https://github.com/DivanteLtd/vue-storefront">vue-storefront</a> -
|
||
Vue.js Storefront - PWA for eCommerce. 100% offline, platform agnostic,
|
||
headless, Magento2 supported.</li>
|
||
<li><a href="https://github.com/laravel-enso/enso">Laravel Enso</a> -
|
||
SPA Admin Panel built with Bulma, VueJS and Laravel, packing lots of
|
||
features out of the box.</li>
|
||
<li><a href="https://hubble.js.org">Hubble</a> - :telescope: Travel
|
||
through GitHub Stars’ history.</li>
|
||
<li><a href="https://vuepress.vuejs.org/">Vuepress</a> - Minimalistic
|
||
Vue-powered static site generator</li>
|
||
<li><a href="https://github.com/jaywink/socialhome">Socialhome</a> - A
|
||
federated rich profile builder with social networking features</li>
|
||
<li><a
|
||
href="https://github.com/johndatserakis/chrome-ribbon-reminder">chrome-ribbon-reminder</a>
|
||
- A Chrome extension written using Vue and Async/Await. Uses a popup
|
||
display and changes badge counts.</li>
|
||
<li><a href="https://www.faviator.xyz/">Faviator</a> - A simple easy
|
||
favicon generator.</li>
|
||
<li><a href="https://github.com/vladocar/Minimal-Notes">Minimal
|
||
Notes</a> - Web app build with Vue.js</li>
|
||
<li><a href="https://github.com/benweet/stackedit/">Stack Edit</a> -
|
||
In-browser Markdown editor</li>
|
||
<li><a href="https://bael-theme.jake101.com/">Bael Blog Template</a> - A
|
||
static generated blog template that uses Netlify CMS for the backend and
|
||
Netlify for hosting. Features a brutalist aesthetic, fuzzy search,
|
||
serverless email signup, and more.</li>
|
||
<li><a href="https://github.com/14nrv/buefy-shop">Buefy Shop</a> -
|
||
Sample shop, open source, built with Nuxt, Stripe, Firebase, Bulma and
|
||
Serverless Functions.</li>
|
||
<li><a href="https://github.com/ivanlori/Vuemmerce">Vuemmerce</a> - Free
|
||
ecommerce template built with Vue.js and Bulma framework :new:</li>
|
||
<li><a href="https://github.com/STS-Rosario/carpoolear">Carpoolear</a> -
|
||
The open source Vue.js frontend (mobile and cordova app) for the
|
||
argentinian carpooling application: <a
|
||
href="https://carpoolear.com.ar">Carpoolear</a></li>
|
||
<li><a href="https://github.com/rash0/Vue-Ecom">Vue E-Store Templet</a>
|
||
- An e-commerce template build with vue/vuex/vue-router and
|
||
bootstrap4.</li>
|
||
<li><a href="https://twill.io">Twill</a> - An open source CMS toolkit
|
||
for Laravel that helps developers rapidly create a custom admin console
|
||
that is intuitive, powerful and flexible.</li>
|
||
<li><a href="https://github.com/Hoogkamer/vue-org-chart">Vue Org
|
||
Chart</a> - Manage and publish your interactive organization chart
|
||
(orgchart), free and no webserver required.</li>
|
||
<li><a href="https://thermal.codecarrot.net">Thermal</a> - One stop to
|
||
all Git repository.</li>
|
||
<li><a href="https://github.com/qmk/qmk_configurator">QMK
|
||
Configurator</a> - QMK Firmware Keyboard Configuration UI in
|
||
Vue.js.</li>
|
||
<li><a href="https://github.com/dailynowco/daily">Daily</a> - Curated
|
||
dev news delivered to your new tab 👩🏽💻</li>
|
||
<li><a href="https://github.com/alexusmai/laravel-file-manager">Laravel
|
||
File Manager</a> - Powerful file manager for Laravel</li>
|
||
<li><a href="https://github.com/JayeshLab/vue-crypto-dashboard">Vue
|
||
Crypto Dashboard</a> - Cryptocurrency Dashboard made with Vue.js</li>
|
||
<li><a href="https://github.com/simplyvinay/vue-expenses">Vue
|
||
Expenses</a> - Expense tracking app made with Vue.js, Vuetify and
|
||
ASP.NET Core</li>
|
||
<li><a href="https://github.com/akaunting/akaunting">Akaunting</a> - A
|
||
free and online accounting software for small businesses and freelancers
|
||
based on Laravel and VueJS.</li>
|
||
<li><a href="https://github.com/emqx/MQTTX">MQTTX</a> - Cross-platform
|
||
MQTT 5.0 desktop client built with Vue.js, Typescript and Electron.</li>
|
||
<li><a href="https://github.com/akoidan/pychat">Pychat</a> - Self-hosted
|
||
webrtc video chat (an alternative to Slack)</li>
|
||
<li><a href="https://github.com/codecept-js/ui">CodeceptJS UI</a> -
|
||
Cypress-liked UI for ✔️ CodeceptJS end 2 end tests ✔️.</li>
|
||
<li><a href="https://github.com/vkaelin/LeagueStats">LeagueStats</a> -
|
||
Statistics website for players of the online game League of
|
||
Legends.</li>
|
||
<li><a href="https://github.com/itsalb3rt/savycart-app">Savycart</a> -
|
||
PWA to track personal purchases, No more paper and pencil to go to the
|
||
supermarket 🏬 Vue and Vuetify</li>
|
||
<li><a href="https://github.com/itsalb3rt/afterman">Afterman</a> - 🌕
|
||
Create beautiful docs in markdown and HTML from postman collection.
|
||
Using Quasar Framework</li>
|
||
<li><a href="https://github.com/logchimp/logchimp">LogChimp</a> -
|
||
Open-source software to track your customer’s feedback to build better
|
||
products.</li>
|
||
<li><a href="https://github.com/Selfhostedpro/Yacht">Yacht</a> - A
|
||
Docker container management webui using Vuetify for a hassle free way of
|
||
managing docker containers and projects.</li>
|
||
<li><a href="https://github.com/Fabio286/antares">Antares SQL</a> -
|
||
Cross platform SQL client made to be simple and complete.</li>
|
||
<li><a href="https://github.com/bagisto/bagisto">Bagisto</a> - A Free
|
||
and Opensource Laravel eCommerce framework built for all to build and
|
||
scale your business.</li>
|
||
<li><a href="https://github.com/grandnode/grandnode2/">GrandNode 2.0</a>
|
||
- Open Source Cross Platform E-Commerce Solution based on .NET Core 5.0
|
||
and MongoDB / Azure CosmosDB / Amazon DocumentDB / VueJS</li>
|
||
<li><a href="https://github.com/aimeos/aimeos">Aimeos</a> - Leading
|
||
Laravel eCommerce framework to build ultra fast online shops,
|
||
marketplaces and complex B2B applications scalable from 1 to
|
||
1,000,000,000+ items</li>
|
||
<li><a href="https://github.com/bourgeoisor/xivtodo">XIV ToDo</a> -
|
||
Dashboards, completion trackers, tailored weekly and daily checklists
|
||
and tools for Final Fantasy XIV.</li>
|
||
<li><a href="https://github.com/empathyco/x">Interface X</a> - UI
|
||
Search&Discovery components to rapidly build beautiful search
|
||
experiences</li>
|
||
<li><a href="https://github.com/balancer-labs/frontend-v2">Balancer</a>
|
||
- A Decentralized Finance app that runs on Ethereum.</li>
|
||
<li><a
|
||
href="https://github.com/themeselection/materio-vuetify-vuejs-laravel-admin-template-free">Materio
|
||
Free Vuetify VueJS Laravel Admin Template</a> - Open-source & easy
|
||
to use Vuetify Vuejs Laravel Admin Template with Elegant Design &
|
||
Unique Layout.</li>
|
||
<li><a href="https://github.com/lissy93/dashy">Dashy</a> - A self-hosted
|
||
startpage, with an easy to use visual editor, status checking, themes,
|
||
widgets and tons more</li>
|
||
<li><a href="https://github.com/fairdataihub/FAIRshare">FAIRshare</a> -
|
||
Sharing biomedical research data and software according to applicable
|
||
FAIR guidelines</li>
|
||
<li><a href="https://github.com/dd3v/snippets.ninja">Snippets.Ninja</a>
|
||
- Progressive web application for code snippet management. Offline
|
||
first. Open Source. App uses IndexedDB for local storage.</li>
|
||
<li><a href="https://github.com/DaZuiZui/ZuiOJ">ZuiOJ</a> - ZuiOJ system
|
||
developed using Vue2’s UI and Java.</li>
|
||
<li><a
|
||
href="https://github.com/kaandesu/vue-paho-mqtt">vue-paho-mqtt</a> -
|
||
Easy-to-use Paho MQTT client library for Vue 3 with centralized
|
||
subscription management, type support, and built-in optional alert
|
||
notification library.</li>
|
||
<li><a href="https://github.com/n1crack/vuefinder">VueFinder File
|
||
Library</a> - Web File Manager Library.</li>
|
||
<li><a href="https://github.com/os-scar/overlay">Overlay</a> - A browser
|
||
extension helping developers evaluate open source packages before
|
||
picking them.</li>
|
||
<li><a href="https://activist.org/">activist.org/</a> - Open-source,
|
||
nonprofit activism platform.</li>
|
||
<li><a
|
||
href="https://themeselection.com/item/sneat-free-vuetify-vuejs-admin-template/">Sneat
|
||
Free Vuetify VueJS Admin Template</a> - The Ultimate Free VueJS Admin
|
||
Template for building responsive web apps</li>
|
||
<li><a href="https://github.com/slidevjs/slidev">slidev</a> -
|
||
Presentation Slides for Developers</li>
|
||
<li><a href="https://github.com/qier222/YesPlayMusic">YesPlayMusic</a> -
|
||
High-looking third-party NetEase cloud player, support Windows / macOS /
|
||
Linux :electron:</li>
|
||
<li><a href="https://github.com/zyronon/douyin">douyin</a> - Imitate
|
||
TikTok ，Vue Best practices on Mobile</li>
|
||
<li><a href="https://github.com/jason5ng32/MyIP">MyIP</a> - All in one
|
||
IP Toolbox. Easy to check what’s your IPs, IP geolocation, check for DNS
|
||
leaks, examine WebRTC connections, speed test, ping test, MTR test,
|
||
check website availability and more.</li>
|
||
<li><a href="https://github.com/imrofayel/fylepad">fylepad</a> - a
|
||
notepad with powerful rich-text editing, built with Vue.</li>
|
||
</ul>
|
||
<h3 id="commercial-products">Commercial Products</h3>
|
||
<ul>
|
||
<li><a href="http://wijmo.com/products/wijmo-5/">Wijmo</a> - A
|
||
collection of UI controls with VueJS support.</li>
|
||
<li><a href="https://www.chatwoot.com/">ChatWoot</a> - Livechat and
|
||
agent collaboration over Facebook messenger.</li>
|
||
<li><a
|
||
href="https://themeforest.net/item/vuejs-laravel-admin-template/20119122?ref=jyostna&utm_source=awesomevue">VueA</a>
|
||
- VueJS Admin template with multiple layouts and laravel version.</li>
|
||
<li><a
|
||
href="https://geteducation.link/?utm_source=AwesomeVue">EducationLink</a>
|
||
- CRM and sales automation for education agents and colleges.</li>
|
||
<li><a href="https://1.envato.market/LYWqL">Pragmatic v2.0</a> -
|
||
Responsive and configurable admin template built with Vue.js and
|
||
Element.</li>
|
||
<li><a href="https://moonitor.io/">Moonitor</a> - Cryptocurrency tracker
|
||
for Desktop.</li>
|
||
<li><a href="https://deskree.com/">Deskree</a> - Online collaboration
|
||
platform that combines Ideas, Tasks, and Issues in one place.</li>
|
||
<li><a href="https://www.agiloo.com">Agiloo</a> - Project Management app
|
||
for Scrum and Kanban</li>
|
||
<li><a href="https://www.scaffoldhub.io">ScaffoldHub</a> - Online Web
|
||
App Generator for VueJS with NodeJS, and MongoDB or SQL.</li>
|
||
<li><a href="https://getcommandeer.com">Commandeer</a> - Cloud
|
||
Management Reimagined. A Desktop cloud management app built with Vue.js
|
||
and Electron.</li>
|
||
<li><a href="https://leavedates.com">Leave Dates</a> - A powerful new
|
||
way to track your staff leave.</li>
|
||
<li><a href="https://ng.vrest.io">vREST NG</a> - An enterprise
|
||
application for Automated API Testing, built with VueJS and Element
|
||
UI.</li>
|
||
<li><a href="https://www.coloban.com">Coloban</a> - All-in-one project
|
||
management tool with chats, Kanban, Gantt, calls, screenshare and many
|
||
more.</li>
|
||
<li><a href="https://github.com/nxshell/nxshell">NxShell</a> - An easy
|
||
to use new terminal for SSH, which based on Electron and VueJS.</li>
|
||
<li><a
|
||
href="https://themeselection.com/products/materio-vuetify-vuejs-admin-template/">Materio
|
||
Vuetify VueJS Admin Template</a> - Most Powerful, Developer Friendly,
|
||
Production ready & Comprehensive Vuetify VueJS Admin Template.</li>
|
||
<li><a href="https://github.com/nocodb/nocodb">NocoDB</a> - An
|
||
opensource Airtable alternative.</li>
|
||
<li><a href="https://github.com/kodadot/nft-gallery">KodaDot</a> - NFT
|
||
Marketplace on Polkadot funded as public good, written in Vue.js</li>
|
||
<li><a href="https://he3.app">He3</a> - Free and Modern Developer
|
||
Utilities Toolbox.</li>
|
||
<li><a href="https://runjs.app">RunJS</a> - JavaScript playground that
|
||
evaluates your code as you type and gives instant feedback. Ideal for
|
||
prototyping ideas or trying out new libraries.</li>
|
||
<li><a
|
||
href="https://themeselection.com/item/sneat-vuetify-vuejs-admin-template/">Sneat
|
||
Vuetify VueJS Admin Template</a> - The Ultimate VueJS Admin Template for
|
||
responsive web apps.</li>
|
||
</ul>
|
||
<h3 id="appswebsites">Apps/Websites</h3>
|
||
<ul>
|
||
<li><a href="https://spark.laravel.com/">Laravel Spark</a></li>
|
||
<li><a href="https://video.vice.com/">Vice Video</a></li>
|
||
<li><a href="https://www.formlets.com">Formlets</a></li>
|
||
<li><a href="https://laracasts.com">Laracasts</a></li>
|
||
<li><a href="https://esa.io/">esa.io</a></li>
|
||
<li><a href="http://gold.xitu.io">稀土掘金</a></li>
|
||
<li><a href="http://www.prague-airport.com/">Prague Airport</a></li>
|
||
<li><a href="http://corentinbac.com/">Portfolio Site</a></li>
|
||
<li><a href="https://statamic.com">Statamic</a></li>
|
||
<li><a href="http://embalses.azurewebsites.net/">Embalses!</a> - A tool
|
||
to report water dam level using the U.S. Geological Survey
|
||
database.</li>
|
||
<li><a href="http://clem.travelmap.fr">TravelMap</a> - A simple way for
|
||
travelers to create a blog based on a Map.</li>
|
||
<li><a href="https://propercloth.com/design-a-shirt">Proper Cloth Shirt
|
||
Builder</a> - Custom shirt builder.</li>
|
||
<li><a href="https://www.powerpuffyourself.com/">Powerpuff Yourself by
|
||
Cartoon Networks</a></li>
|
||
<li><a href="https://github.com/IgorHalfeld/v-notes">vNotes</a> - Simple
|
||
and beautiful notepad to Markdown with Vue.js and Local Storage
|
||
API.</li>
|
||
<li><a href="http://www.openfunctioncomputers.com/#!/home">Open Function
|
||
Computers</a></li>
|
||
<li><a href="https://github.com/zllovesuki/dermail-webmail">Dermail</a>
|
||
- A webmail client written in Vue.js for Dermail, a mail system written
|
||
in node.js.</li>
|
||
<li><a href="https://www.octimine.com/">octimine</a> - A patent search
|
||
engine.</li>
|
||
<li><a href="https://www.draxed.com/">Draxed</a> - A web based MySQL and
|
||
PostgreSQL data browser and dashboard manager.</li>
|
||
<li><a href="https://jobinja.ir">Jobinja</a> - A Job Board and career
|
||
platform operating in Iran.</li>
|
||
<li><a href="https://putianxi.github.io/">滚蛋吧！莆田系</a> - Show all
|
||
Putian hospital information</li>
|
||
<li><a href="http://livestorm.co">Livestorm</a> - Webinar / Live events
|
||
app.</li>
|
||
<li><a href="https://www.holden.com.au">Holden</a></li>
|
||
<li><a href="https://global-exam.com">Global-Exam</a> - Online Training
|
||
for Language Proficiency Tests</li>
|
||
<li><a href="https://12bay.vn">12BAY.VN</a> - Applications online flight
|
||
bookings.</li>
|
||
<li><a href="https://playcode.io">PLAYCODE.IO</a> - Playground for Rapid
|
||
Frontend Experiments.</li>
|
||
<li><a href="http://thevoidrad.io">The Void Radio</a> - Underground
|
||
House Music Online Radio.</li>
|
||
<li><a href="https://alpixel.github.io/bitly-vuejs">Bitly Vue</a> -
|
||
Shorten URLs with VueJS & Bitly API.</li>
|
||
<li><a href="https://www.storyblok.com">Storyblok</a> - API
|
||
Based/Decoupled CMS using VueJS for its frontend.</li>
|
||
<li><a href="https://easywebinar.com/">EasyWebinar</a> - Webinar
|
||
Software / Live events & Webinar app.</li>
|
||
<li><a href="https://wizzair.com/">WizzAir</a></li>
|
||
<li><a href="https://movingtohttps.com/">Moving to HTTPS</a> - Guide to
|
||
moving different platform/hosting sites to HTTPS</li>
|
||
<li><a href="http://www.euronews.com">Euronews</a> - Euronews is a
|
||
multilingual news media service, headquartered in Lyon, France.</li>
|
||
<li><a href="https://vuejsfeed.com/">Vue.js Feed</a> - The latest Vue.js
|
||
news, tutorials, plugins, and more. Made with Vue.js and Laravel.</li>
|
||
<li><a href="https://kdcinfo.com/guessright/">Guess Right</a> - A ‘guess
|
||
the word’ game - Written with Vue/vuex/vue-router (front-end) and
|
||
Laravel/MySQL (back-end). Code is <a
|
||
href="https://github.com/KDCinfo/guess-right">Open Source on GitHub</a>
|
||
(although not the live files that run the game at kdcinfo).</li>
|
||
<li><a href="https://grap.io">GRAP</a> - Business communication
|
||
service</li>
|
||
<li><a href="https://json-schema-editor.tangramjs.com">JSON Schema
|
||
Editor</a> - An intuitive editor for JSON schema built with Vue.js and
|
||
Firebase.</li>
|
||
<li><a href="https://splode.github.io/trivia/">Winsome Trivia</a> - A
|
||
single or multiplayer trivia game featuring over 2,000 unique questions
|
||
built with Vue.js and powered by the Open Trivia Database.</li>
|
||
<li><a href="https://moonorganizer.com/calendar/">Moon Organizer</a> -
|
||
Lunar calendar app</li>
|
||
<li><a href="https://www.kinderbesteck-gravur.de/">Kinderbesteck</a> - A
|
||
full Online Shop SPA with Vue2.0, Vuex, Vue Router</li>
|
||
<li><a href="https://www.powerthesaurus.org">Power Thesaurus</a> - A
|
||
crowdsourced online thesaurus</li>
|
||
<li><a href="http://www.paixin.com/">PAIXIN</a> - A genuine picture sale
|
||
website</li>
|
||
<li><a href="https://1xbet.com">1XBET</a> - A betting company operating
|
||
since 2007</li>
|
||
<li><a href="https://crowdcircus.com">CrowdCircus</a> - Europe’s biggest
|
||
crowdfunding- and crowdinvesting-aggregator</li>
|
||
<li><a href="https://pingbreak.com">PingBreak</a> - A free and simple
|
||
website monitoring service using vuejs for real-time dashboard</li>
|
||
<li><a href="https://github.com/rohitpaulk/todoist-tribute/">Todoist
|
||
Tribute</a> - Todoist clone, written in Rails + Vue</li>
|
||
<li><a href="https://json-editor.tangramjs.com">JSON Editor</a> - A
|
||
schema-aware JSON editor built with Vue2 and firebase.</li>
|
||
<li><a href="https://www.develteam.com">Develteam</a> - A social network
|
||
for indie game developers.</li>
|
||
<li><a href="https://www.mixsii.com">Mixsii</a> - A free video chat room
|
||
site for teens, adults, family, and friends.</li>
|
||
<li><a href="http://pipquest.gregorterrill.com">PipQuest</a> - A
|
||
retro-style puzzle game built in Vue</li>
|
||
<li><a href="https://matryx.ai/">Matryx</a> - A decentralized
|
||
collaboration platform.</li>
|
||
<li><a
|
||
href="https://chrome.google.com/webstore/detail/iprevyou-youtube-player/blijlgfnjhnhmnaldaiienmjggbjhbaa">iPrevYou
|
||
- YouTube™ Player</a> - A chrome app for watching youtube videos on your
|
||
desktop.</li>
|
||
<li><a href="https://itemmanager.uk">Item Manager</a> - An application
|
||
to transfer items for Destiny 2 game.</li>
|
||
<li><a href="https://frontendmasters.com/courses/vue/">Frontend Masters
|
||
Intro to Vue</a> - Frontend Masters full day course</li>
|
||
<li><a href="https://inverted3.gitlab.io/drum-machine/">TR-101</a> - A
|
||
drum synth / sequencer.</li>
|
||
<li><a href="https://bazaar.co">Bazaar</a> - Media sharing
|
||
platform.</li>
|
||
<li><a href="https://vectr.com/new">Vectr</a> - A free vector graphics
|
||
software</li>
|
||
<li><a href="https://habitica.com/">Habitica</a> - online task
|
||
management application in the form of a role-playing game.</li>
|
||
<li><a href="https://madewithvuejs.com/">MadeWithVueJs</a> - A Gallery
|
||
of Projects made with Vue.js (also the Site itself uses Vue.js)</li>
|
||
<li><a href="https://thousandetherhomepage.com">Thousand Ether
|
||
Homepage</a> - The Million Dollar Homepage reimagined as an Ethereum
|
||
DApp. Build on Vue.js and open source.</li>
|
||
<li><a href="https://letsenhance.io/">Let’s Enchance</a> - free online
|
||
image upscale and enhancement with neural networks.</li>
|
||
<li><a href="https://pi.team">Pi.TEAM - Online Invoicing and
|
||
Accounting</a> - Simple to use online accounting and invoicing, free for
|
||
single users and freelancers.</li>
|
||
<li><a href="https://tipe.io">Tipe</a> - Next Generation API-first CMS.
|
||
Create your content with powerful editing tools and access it from
|
||
anywhere with a GraphQL or REST API. Stop letting your CMS decide how
|
||
you build your apps.</li>
|
||
<li><a href="https://www.fintechers.io">Fintechers</a> - Fintech focused
|
||
job board.</li>
|
||
<li><a href="https://www.devjournalapp.com">Devjournal</a> -
|
||
Collaborative todo list for projects and ideas.</li>
|
||
<li><a href="https://bubbleflat.com">Bubbleflat</a> - Online platform
|
||
that helps students and young Professionals find their perfect roommates
|
||
by searching for people with similar lifestyles, interests, or schools.
|
||
Laravel & Vuejs</li>
|
||
<li><a href="https://sunpos.ru">sunpos</a> - Sun position, elevation,
|
||
azimuth, ecliptic/equatorial coordinates and sunrise/sunset time (Julian
|
||
day) calculation and conversion utilities. Web site is programmed using
|
||
pure JS, Vuejs and i18n Vuejs localization plugin. Visualization is
|
||
created using D3.js.</li>
|
||
<li><a href="https://u3xyz.com">U3xyz</a> - A personal blog base on vue
|
||
ssr.</li>
|
||
<li><a href="https://27.ua">27.ua</a> - Ukraine-based internet
|
||
hypermarket</li>
|
||
<li><a href="http://vitomd.com/vue-chess-guardian/">Chess Guardian</a> -
|
||
Answer chess positional questions from your own games.</li>
|
||
<li><a href="https://blackjackbreak.com">Blackjack Break</a> - A quick
|
||
game of blackjack</li>
|
||
<li><a href="https://www.gamevix.com/">GameVix</a> - Swap your used
|
||
video game discs with others, hassle free. PWA with Material
|
||
Design.</li>
|
||
<li><a href="https://app.vivifyscrum.com">VivifyScrum</a> - Agile
|
||
project management app for teams that deliver. Customizable Scrum and
|
||
Kanban boards.</li>
|
||
<li><a href="https://9gag.com">9GAG</a> - Popular online platform and
|
||
social media website</li>
|
||
<li><a href="https://kitchenstories.io">Kitchen Stories</a> - Cooking
|
||
platform</li>
|
||
<li><a href="https://mailrabbit.io">MailRabbit</a> - Create, A/B test,
|
||
and monitor transactional emails without a developer.</li>
|
||
<li><a href="https://cronhub.io">Cronhub</a> - Painless Cron Monitoring
|
||
Tool</li>
|
||
<li><a href="https://wrkprty.com">wrkprty</a> - Pop-up coworking events
|
||
for freelancers, remote workers, and professionals looking to get out of
|
||
the office.</li>
|
||
<li><a href="https://broker-notes.com">Broker Notes</a> - ‘Study to
|
||
become a Real Estate Agent’ :house:</li>
|
||
<li><a href="https://synclounge.tv">SyncLounge</a> - SyncLounge is a
|
||
tool to sync Plex content across multiple players in multiple
|
||
locations.</li>
|
||
<li><a href="https://www.hce.it/">HCE.it</a> - The website of an Italian
|
||
agency, entirely made with Vue using a Laravel-based headless CMS.</li>
|
||
<li><a href="https://www.pages.xyz/">Pages</a> - Web design
|
||
inspiration</li>
|
||
<li><a href="https://spektrummedia.com/">Spektrum</a> - The website of
|
||
Spektrum Media Agency</li>
|
||
<li><a href="https://www.spk.rocks/">SPK</a> The website of SPK
|
||
Ecosystem</li>
|
||
<li><a href="https://www.iddef.org/">IDDEF</a> ☪️ The Federation of the
|
||
Associations that Value Humanity’s webpage, CMS, CRM and Donation and
|
||
all e-commerce pages are designed with Vue.js, Vuex and pure JavaScript
|
||
🙏</li>
|
||
<li><a href="https://roastandbrew.coffee/">Roast</a> an app built to
|
||
help coffee enthusiasts find their next cup of coffee while learning
|
||
about Laravel + Vue.js.</li>
|
||
<li><a href="https://myanpwel.com">Myanpwel</a> - The website of event
|
||
ticketing platform.</li>
|
||
<li><a href="https://www.cryptoarte.io">CryptoArte</a> - An Ethereum art
|
||
collection, non-fungible token, and Dapp.</li>
|
||
<li><a href="https://scroll.in">Scroll.in</a> - Scroll.in is an
|
||
independent news, information, and entertainment venture.</li>
|
||
<li><a href="https://getbrandy.io">Brandy</a> - brand assets manager for
|
||
your menu bar.</li>
|
||
<li><a href="https://www.nbcsports.com/">NBC Sports</a> - NBC Sports is
|
||
a sports news website.</li>
|
||
<li><a href="https://www.with.in/">WITHIN</a> - Extraordinary stories in
|
||
Virtual Reality.</li>
|
||
<li><a href="https://be.camp">beCamp</a> - A community-organized tech
|
||
conference in Charlottesville, VA. Website code is open-source.</li>
|
||
<li><a href="https://www.trustpilot.com">Trustpilot</a> - a free and
|
||
open to all review platform.</li>
|
||
<li><a href="https://lagom.rsstudio.net/">Lagom</a> - Simple, intuitive
|
||
and fully responsive WHMCS theme</li>
|
||
<li><a href="https://scoutmytrip.com/roadtrip-planner/start">ScoutMyTrip
|
||
- Roadtrip Planner</a> - Road trip planning app for India which helps
|
||
travelers to build their itinerary, discover points of interest, find
|
||
hotels, gas stations, food joints etc along the route.</li>
|
||
<li><a href="https://gamersclub.com.br/?lang=english">GamersClub</a> -
|
||
Biggest company of eSport community development in Brazil</li>
|
||
<li><a href="https://www.mit.edu/">MIT</a> - Official Website of
|
||
Massachusetts Institute of Technology.</li>
|
||
<li><a href="https://en.elvenar.com/">Elvenar</a> - Elvenar is a browser
|
||
based fantasy city builder game.</li>
|
||
<li><a href="https://beaconapp.in">Beacon</a> - :blue_heart: A service
|
||
that allows you to share your content across multiple websites.</li>
|
||
<li><a href="https://www.artfinder.com/">Artfinder</a> - Artfinder is a
|
||
website for buying & selling art paintings.</li>
|
||
<li><a
|
||
href="https://kiinlam.github.io/GitHubExplorer/">GitHubExplorer</a> -
|
||
Pure static page webapp for exploring GitHub. Using <code>Vuejs</code>
|
||
and <code>GitHub GraphQL API v4</code>.</li>
|
||
<li><a href="https://github.com/morkro/happy-plants">HappyPlants</a> - A
|
||
progressive web app for organizing your plants 🌱.</li>
|
||
<li><a href="https://pocketlists.com">Pocket Lists</a> - World’s
|
||
friendliest to-do list app.</li>
|
||
<li><a href="https://padlet.com">Padlet</a> - Collaborative bulletin
|
||
boards</li>
|
||
<li><a href="https://glovoapp.com/en/">Glovo</a> - On-demand
|
||
delivery</li>
|
||
<li><a href="https://mysigmail.com/create">MySigMail</a> - MySigMail is
|
||
a free, in browser, email signature generator without creating
|
||
account</li>
|
||
<li><a href="https://wordguru.netguru.com">Wordguru</a> - A simple
|
||
verbal game where you split into teams and try to guess as many keywords
|
||
as you can.</li>
|
||
<li><a href="https://apiflash.com">ApiFlash</a> - A Chrome based
|
||
screenshot API built on top of AWS Lambda for Developers</li>
|
||
<li><a href="https://git-superstar.firebaseapp.com">Git Superstar</a> -
|
||
Count your git stars and top repositories.</li>
|
||
<li><a href="https://www.asciiur.com">Asciiur</a> - Internet’s ascii art
|
||
collection</li>
|
||
<li><a href="https://tapestridesigner.com">Tapestri Designer</a> - Free
|
||
tool to design PCR primers for genome sequencing experiments (NGS)</li>
|
||
<li><a href="https://monoclereader.com/">Monocle Reader</a> - Follow
|
||
feeds, Twitter, YouTube, Blogs and everything else, all in one
|
||
place.</li>
|
||
<li><a href="https://geenes.app">Geenes</a> - Generate and apply color
|
||
palettes to your UI, then export it to sketch or code.</li>
|
||
<li><a href="https://exifshot.com/">ExifShot</a> - What and how on
|
||
photography, beautifully.</li>
|
||
<li><a href="https://studolog.com/">Studolog</a> - Online file sharing
|
||
platform for students, including tester and reviews. Currently in Czech
|
||
🇨🇿 only.</li>
|
||
<li><a href="https://gamebrary.com">Gamebrary</a> - Open source tool to
|
||
organize video game collections.</li>
|
||
<li><a href="https://premiumpokertools.com/">Premium Poker Tools</a> -
|
||
What poker players use to study.</li>
|
||
<li><a href="https://config.qmk.fm/">QMK Configurator</a> - Configure,
|
||
Build, and Download Custom QMK Firmware from your browser.</li>
|
||
<li><a href="https://www.worksome.com/">Worksome</a> -
|
||
Marketplace/platform for qualified it professionals and freelancers and
|
||
companies looking to hire them.</li>
|
||
<li><a
|
||
href="https://manuel-suarez-abascal.github.io/translator-vuejs/">Translator-vuejs</a>
|
||
- Translation App built with Vuejs, Yandex API & ResponsiveVoice.js
|
||
API.</li>
|
||
<li><a href="https://www.bigtimer.net/">Big Timer</a> - Fullscreen
|
||
countdown timer for workshops, meetings and presentations. Big Timer
|
||
helps workshop facilitators, meeting chairs, design sprinters,
|
||
presenters and aspiring game show hosts stick to their program.</li>
|
||
<li><a href="https://www.kvalitetskontroll.no/">Kvalitetskontroll</a> -
|
||
Norwegian management system tailored for the construction industry.</li>
|
||
<li><a href="https://poolside.fm/">Poolside FM</a> - A retro-style music
|
||
player</li>
|
||
<li><a href="https://inoreader.com/">Inoreader.com</a> - One of the
|
||
biggest RSS readers and news aggregators out there.</li>
|
||
<li><a href="https://awesometechstack.com">AwesomeTechStack</a> -
|
||
Website Tech Stack Analyzer</li>
|
||
<li><a href="https://github.com/antonreshetov/massCode">massCode</a> -
|
||
An open source code snippets manager for developers. Build with
|
||
Electron, Vue and Monaco editor.</li>
|
||
<li><a href="https://www.clipleap.com/">ClipLeap</a> - Platform for
|
||
posting and sharing moments in long videos.</li>
|
||
<li><a href="https://www.rsvpkeeper.com/">RSVP Keeper</a> - Online
|
||
reservations made easy. Get your event up and running in no time. Made
|
||
with Vue and Go.</li>
|
||
<li><a href="https://pngk.org/">PNGK</a> - Official website for a
|
||
consultancy company working to find solutions for humanitarian, human
|
||
rights and other like minded organizations.</li>
|
||
<li><a href="https://www.bmwusa.com/build-your-own.html">BMWUSA Vehicle
|
||
Configurator</a> - Vehicle Configurator for BMWUSA</li>
|
||
<li><a href="https://fanmio.com">Fanmio</a> - Meet your favorite
|
||
celebrities through personal video experiences on Fanmio</li>
|
||
<li><a href="https://atomicwallet.io">AtomicWallet</a> - Multi-asset
|
||
cryptocurrency wallet. Desktop and <a
|
||
href="https://play.google.com/store/apps/details?id=io.atomicwallet">mobile</a>
|
||
apps both were built with Vue.</li>
|
||
<li><a href="https://dashboard.helpninja.com/">Helpninja</a> - Simple
|
||
& fast help desk</li>
|
||
<li><a href="https://github.com/IanLuan/TodoDev">Todo DEV</a> - A simple
|
||
Todo App made for developers with Vuejs, Vuetify and the powerful
|
||
Firebase.</li>
|
||
<li><a href="https://www.36pixels.fr/">36 Pixels</a> - French agency
|
||
website made with vue.js</li>
|
||
<li><a href="https://temp-mail.io/">temp-mail.io</a> - Disposable
|
||
temporary email service.</li>
|
||
<li><a href="https://narrandum.com">Narrandum</a> - Customer journey
|
||
mapping tool built using Vue.js, Vuetify, and Feathersjs</li>
|
||
<li><a href="https://keepformula.com/">Keep Formula</a> - Keep Formula
|
||
is a simple app to make your calculations easier.</li>
|
||
<li><a href="https://goonlinetools.com/">goonlinetools.com</a> - 100%
|
||
Free Online Tools site.</li>
|
||
<li><a href="https://olaolu.dev/">Portfolio Site</a> - Olaolu Olawuyi, A
|
||
Frontend developer and UX Engineer’s portfolio site.</li>
|
||
<li><a href="https://d-patterns.js.org">d-patterns.js.org</a> - FOSS
|
||
Discord templates listing website 💬</li>
|
||
<li><a href="https://linksift.com">linksift.com</a> - LinkSift lets you
|
||
explore what a website links to.</li>
|
||
<li><a href="https://postmake.io">postmake.io</a> - A curated directory
|
||
of 300+ tools and resources used by companies and startups all over the
|
||
web. Built using Vue.js and Nuxt.</li>
|
||
<li><a href="https://screenshotapi.net">screenshotapi.net</a> - A
|
||
website screenshot API, capture pixel-perfect website screenshots.</li>
|
||
<li><a href="https://www.fontget.com/">FontGet</a> - Download Free
|
||
Fonts.</li>
|
||
<li><a href="https://travelsmart.netlify.app/">Travel_Smart</a> - A
|
||
tour-based web app that uses Vue + Vue Router + Vuex.</li>
|
||
<li><a
|
||
href="https://hr.nih.gov/workforce/fevs/2019-fevs-survey-results">National
|
||
Institutes of Health (NIH): FEVS Survey Results</a> - National
|
||
Institutes of Health (NIH) data visualization of Federal Viewpoints
|
||
Survey (FEVS) survey results.</li>
|
||
<li><a href="https://www.ucanstock.com/">U Can Stock</a> - U.S. stock
|
||
market information platform for Korean. It’s built with Vue, Vuex,
|
||
Vuetify, Nuxt and Firebase.</li>
|
||
<li><a href="https://nipashe.netlify.app/">Nipashe</a> -“Nipashe” is a
|
||
Swahili word that means “Inform me”. Nipashe is a web app built in Vue +
|
||
Vuex(state management) + Vue-Router(navigation) that gives a
|
||
tally/statistics on the current COVID19 infections across the world
|
||
based on the WHO</li>
|
||
<li><a href="https://devsnap.me">DevSnap.me</a> - A website that helps
|
||
web developers find tons of free and open source HTML, CSS, and
|
||
JavaScript assets.</li>
|
||
<li><a href="https://flights.vincentc.us/">Back Home/回家</a> - A flight
|
||
searching engine for the flights from oversea to China Mainland (and
|
||
China to oversea) that still fly during COVID-19.</li>
|
||
<li><a href="https://deadlines.vercel.app">Deadlines</a> - An offline,
|
||
simple deadline tracker made with Vue.js and localForage.</li>
|
||
<li><a href="https://scraperbox.com">Scraperbox</a> - Undetectable web
|
||
scraping API. Built with Laravel and Vue.</li>
|
||
<li><a href="https://www.darwin.so">Darwin Analytics</a> - Tool for
|
||
measuring and optimizing your site. Built with Vue3 and Vite.</li>
|
||
<li><a href="https://www.scrumfast.com">Scrumfast</a> - Extremely
|
||
intuitive project management scrum tool.</li>
|
||
<li><a href="https://www.gradientos.app">Gradientos</a> - Gradientos
|
||
makes finding gradients easy.</li>
|
||
<li><a href="https://httptools.dev/">httptools.dev</a> - Collection of
|
||
many online checks and tools for web developers, like a JSON formatter,
|
||
redirect check or URL encoder. Built with Vue3 and vue-router, backend
|
||
API uses Laravel.</li>
|
||
<li><a href="https://www.fontbolt.com/">FontBolt</a> - Discover and
|
||
generate your favorite fonts from pop culture</li>
|
||
<li><a href="https://monayemislam.me">Portfolio Site</a> - Monayem
|
||
Islam, A full-stack web application developer’s portfolio site. Made
|
||
with Love and Vue 3.</li>
|
||
<li><a href="https://mappermate.com">MapperMate</a> - Free-to-use
|
||
tilemap editor used to create, edit, and manage tilemaps for 2D
|
||
games</li>
|
||
<li><a href="https://chriscourses.com">Chris Courses</a> - JavaScript
|
||
and 2D game dev learning platform with interactive videos, quizzes, and
|
||
code challenges</li>
|
||
</ul>
|
||
<h3 id="interactive-experiences">Interactive Experiences</h3>
|
||
<ul>
|
||
<li><a href="https://adblitz.withyoutube.com/#!/advertisers">YouTube
|
||
AdBlitz 2016</a></li>
|
||
<li><a href="http://louisansa.com">Louis Ansa Website
|
||
(portfolio)</a></li>
|
||
<li><a href="http://www.djeco.com/en">Djeco.com</a></li>
|
||
<li><a href="https://tolks.io">Tolks.io</a></li>
|
||
<li><a href="http://noizeoriginal.com">NOIZE original</a></li>
|
||
<li><a href="https://inverted3.gitlab.io/drum-machine">TR-101 Synth Drum
|
||
Machine</a></li>
|
||
<li><a href="https://csscolorvars.github.io/">CSS ColorVars</a> -
|
||
Interactive tool code generation (<a
|
||
href="https://github.com/CSSColorVars/csscolorvars">source
|
||
code</a>)</li>
|
||
<li><a href="https://pngk.org/nightlight/">Nightlight During
|
||
Conflict</a> - Explore GIS data on nightlight output for countries in
|
||
conflict.</li>
|
||
<li><a href="https://justicemoroccoprototype.hiil.org/">User Friendly
|
||
Justice Data</a> - Explore justice data from Morocco.</li>
|
||
<li><a href="https://www.vueplay.com">Vue Play</a> - Create Vue
|
||
components and applications in an interactive / visual drag & drop
|
||
designer.</li>
|
||
<li><a href="https://yja.me">Yahya J. Aifit’s Portfolio Site</a> -
|
||
Portfolio site that inspired by the appearance of desktop operating
|
||
system.</li>
|
||
</ul>
|
||
<h3 id="enterprise-usage">Enterprise Usage</h3>
|
||
<ul>
|
||
<li>Alibaba</li>
|
||
<li>Baidu</li>
|
||
<li>Sina Weibo</li>
|
||
<li>Xiaomi</li>
|
||
<li>Ele.me</li>
|
||
<li>Optimizely</li>
|
||
<li>Expedia</li>
|
||
<li>UCWeb</li>
|
||
<li>Line</li>
|
||
<li>Nintendo</li>
|
||
<li>Celtra</li>
|
||
<li><a href="https://sainsburys.jobs/">Sainsbury’s</a></li>
|
||
<li><a href="https://arex.io/">AREX</a></li>
|
||
<li>DJI</li>
|
||
<li>Octimine GmbH</li>
|
||
<li>Hunliji</li>
|
||
<li><a
|
||
href="https://about.gitlab.com/2016/10/20/why-we-chose-vue/">GitLab</a></li>
|
||
<li><a href="http://clemengerbbdo.com.au">Clemenger BBDO
|
||
Melbourne</a></li>
|
||
<li><a href="https://zenmate.com">ZenMate</a></li>
|
||
<li><a
|
||
href="https://blog.codeship.com/consider-vuejs-next-web-project/">Codeship</a></li>
|
||
<li><a href="https://app.storyblok.com">Storyblok</a></li>
|
||
<li><a href="https://www.monito.com">Monito</a> - Building the
|
||
Booking.com for international money transfers</li>
|
||
<li><a href="https://hypefactors.com">Hypefactors</a> - Software for
|
||
data-driven PR professionals</li>
|
||
<li>Adobe</li>
|
||
<li>IBM</li>
|
||
<li><a href="https://cotabox.com.br">Cotabox</a></li>
|
||
<li><a href="https://aromajoin.com">Aromajoin</a> - Develop the finest
|
||
digital scent products based on the harmony of hardware, software and
|
||
material technology.</li>
|
||
<li><a href="https://www.carrefour.fr">Carrefour</a></li>
|
||
<li><a href="https://www.staples.ca/">Staples Canada</a></li>
|
||
<li><a href="https://www.blibli.com">Blibli</a></li>
|
||
<li><a href="https://www.manduka.com/">Manduka</a></li>
|
||
<li><a href="https://www.upwork.com/">Upwork</a> - Work Marketplace for
|
||
freelancers and employers</li>
|
||
</ul>
|
||
<h3 id="a11y">A11y</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/vue-a11y">Vue A11y project</a> - Vue.js
|
||
community project to improve web accessibility.</li>
|
||
<li><a href="https://github.com/vue-a11y/vue-axe">vue-axe</a> -
|
||
Accessibility auditing for Vue.js applications.</li>
|
||
<li><a
|
||
href="https://github.com/vue-a11y/vue-announcer">vue-announcer</a> - A
|
||
simple way with Vue to announce any useful information for screen
|
||
readers.</li>
|
||
<li><a
|
||
href="https://github.com/theKashey/vue-focus-lock">vue-focus-lock</a> -
|
||
It is a trap! A lock for a Focus. A11y util for scoping a focus.</li>
|
||
<li><a
|
||
href="https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility">eslint-plugin-vuejs-accessibility</a>
|
||
- Vue.js accessibility eslint-plugin managed by <span class="citation"
|
||
data-cites="vue-a11y">@vue-a11y</span> .</li>
|
||
</ul>
|
||
<h2 id="components-libraries">Components & Libraries</h2>
|
||
<h3 id="frameworks">Frameworks</h3>
|
||
<h4 id="responsive">Responsive</h4>
|
||
<p><em>Set of components + responsive layout system</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/quasarframework/quasar">quasar-framework</a> -
|
||
Quasar Framework. Build responsive websites, hybrid mobile Apps and
|
||
Electron apps using same code, with VueJs 2.</li>
|
||
<li><a
|
||
href="https://github.com/vuematerial/vue-material">vue-material</a> -
|
||
Material design for Vue.js.</li>
|
||
<li><a href="https://github.com/vuetifyjs/vuetify">vuetify</a> -
|
||
Material Component Framework for Vue.js 2.</li>
|
||
<li><a href="https://github.com/rafaelpimpa/buefy">buefy</a> -
|
||
Components based on Bulma framework.</li>
|
||
<li><a href="https://github.com/ElemeFE/element">element-ui</a> - A
|
||
Vue.js 2.0 UI Toolkit for Web.</li>
|
||
<li><a href="https://www.iviewui.com">iview-ui</a> - A Vue.js 2.0 UI
|
||
Framework for web.</li>
|
||
<li><a href="https://at.aotu.io">AT-UI</a> - A fresh and flat UI-Kit
|
||
specially for desktop application, made with ♥ by Vue.js 2.0</li>
|
||
<li><a
|
||
href="https://github.com/bootstrap-vue/bootstrap-vue">BootstrapVue</a> -
|
||
Bootstrap v4 components and grid system for Vue.js.</li>
|
||
<li><a href="https://myliang.github.io/fish-ui">fish-ui</a> - A Vue.js
|
||
2.0 UI Toolkit for Web</li>
|
||
<li><a href="https://github.com/zircleUI/zircleUI">zircle-ui</a> - A
|
||
frontend library to develop zoomable user interfaces.</li>
|
||
<li><a
|
||
href="https://github.com/vueComponent/ant-design-vue">ant-design-vue</a>
|
||
- An enterprise-class UI components based on Ant Design and Vue
|
||
3.2.0</li>
|
||
<li><a href="https://github.com/heyui/heyui">heyui</a> -
|
||
(https://www.heyui.top/en) - A Vue.js 2.0 UI Toolkit for Web.</li>
|
||
<li><a href="https://carvuejs.github.io/">Carvue.js</a> - IBM’s Carbon
|
||
Design System for Vue.js</li>
|
||
<li><a href="https://github.com/balmjs/balm-ui">BalmUI</a> - A modular
|
||
and customizable UI library based on Material Design and Vue 3.0</li>
|
||
<li><a href="https://osiris-ui.github.io/osiris">Osiris UI</a> - :art: A
|
||
Vue.js 2.0 universal responsive UI component library</li>
|
||
<li><a
|
||
href="https://github.com/carbon-design-system/carbon-components-vue"><span
|
||
class="citation" data-cites="Carbon/vue">@Carbon/vue</span></a> - Carbon
|
||
Design System components from the <span class="citation"
|
||
data-cites="carbon">@carbon</span> team.</li>
|
||
<li><a href="https://github.com/inkline/inkline/">Inkline</a> - Inkline
|
||
is the intuitive UI Components library that gives you a
|
||
developer-friendly foundation for building Vue.js 3 Design Systems.</li>
|
||
<li><a
|
||
href="https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design">MDBootstrap</a>
|
||
- Powerful UI toolkit based on the latest Bootstrap 4 and Vue 2.6.10,
|
||
providing a set of slick, responsive page templates, layouts, components
|
||
and widgets to rapidly build responsive, mobile-first websites and
|
||
apps.</li>
|
||
<li><a
|
||
href="https://github.com/pgbross/vue-material-adapter">vue-material-adapter</a>
|
||
- Integration of Material Components for Vue.js which follows the best
|
||
practices recommended by Google: Using Foundations and Adapters</li>
|
||
<li><a href="https://primefaces.org/primevue">PrimeVue</a> - The Most
|
||
Complete UI Component Library for Vue</li>
|
||
<li><a href="https://github.com/coreui/coreui-vue">CoreUI for Vue.js</a>
|
||
- CoreUI for Vue.js is a UI Component Library that offers a bunch of
|
||
cross-browser, responsive, and lightweight Vue.js UI components.</li>
|
||
<li><a href="https://github.com/oruga-ui/oruga">oruga</a> - UI
|
||
components for Vue.js without CSS framework dependency.</li>
|
||
<li><a href="https://github.com/antoniandre/wave-ui">Wave UI</a> - An
|
||
emerging UI framework for Vue.js with only the bright side. ☀️</li>
|
||
<li><a href="https://github.com/kkbjs/element3">element3</a> - A Vue.js
|
||
3.0 UI Toolkit for Web is based on element-ui</li>
|
||
<li><a href="https://github.com/epicmaxco/vuestic-ui">vuestic-ui</a> - A
|
||
Vue.js 3.0 UI customizable UI Framework.</li>
|
||
<li><a href="https://github.com/Qvant-lab/qui-max">Qui-max</a> - A Vue
|
||
3.x Design System for Web</li>
|
||
<li><a href="https://github.com/TuSimple/naive-ui">Naive UI</a> - A Vue
|
||
3 Component Library Fairly Complete, Customizable Themes, Uses
|
||
TypeScript, Not Too Slow Kinda Interesting</li>
|
||
<li><a href="https://github.com/element-plus/element-plus">Element
|
||
Plus</a> - A Vue 3 UI Framework.</li>
|
||
<li><a href="https://www.agnosticui.com/">AgnosticUI</a> - Accessible
|
||
Vue 3 Component Primitives that also work with React, Svelte, and
|
||
Angular!</li>
|
||
<li><a href="https://github.com/qmhc/vexip-ui">Vexip UI</a> - A Vue 3 UI
|
||
Library, Highly customizable property values, Full TypeScript,
|
||
Performance should be good.</li>
|
||
<li><a href="https://github.com/jd-solanki/anu">Anu</a> - Build better
|
||
interfaces faster. DX focused utility based vue component library
|
||
⚛️</li>
|
||
<li><a href="https://github.com/patrickcate/vue-uswds">Vue USWDS</a> - A
|
||
Vue.js implementation of the USWDS (U.S. Web Design System)</li>
|
||
<li><a href="https://vuetensils.com">Vuetensils</a> - A ‘naked’
|
||
component library for building accessible, lightweight, bespoke
|
||
applications.</li>
|
||
<li><a
|
||
href="https://www.andres-brugarolas.com/vuersatile-components/">Vuersatile
|
||
Components</a> - A Vue 3 component library, with form self-validation
|
||
and an SCSS framework integrated.</li>
|
||
<li><a href="https://prefect-design.netlify.app/">Prefect Design</a> -
|
||
Component library using Vue 3, Typescript & Tailwind.</li>
|
||
<li><a href="https://github.com/ManukMinasyan/stellar-ui">Stellar UI</a>
|
||
- Fully styled and customizable components for Vue 3.</li>
|
||
<li><a href="https://github.com/radix-vue/shadcn-vue">Shadcn UI</a> - An
|
||
unofficial, community-led Vue port of <a
|
||
href="https://github.com/shadcn-ui/ui">shadcn/ui</a> (re-usable
|
||
components built with <a
|
||
href="https://github.com/radix-vue/radix-vue">Radix Vue</a> and <a
|
||
href="https://github.com/tailwindlabs/tailwindcss">Tailwind
|
||
CSS</a>).</li>
|
||
<li><a href="https://inspira-ui.com/">Inspira UI</a> - Open Source
|
||
components to build stunning animated interfaces effortlessly using Vue,
|
||
Nuxt and Tailwind CSS.</li>
|
||
<li><a
|
||
href="https://github.com/themesberg/flowbite-vue">flowbite-vue</a> - Vue
|
||
component library based on Tailwind CSS</li>
|
||
</ul>
|
||
<h4 id="mobile">Mobile</h4>
|
||
<p><em>UI frameworks for mobile</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/framework7io/framework7">Framework7-Vue</a> -
|
||
Build full-featured iOS & Android apps using Framework7 &
|
||
Vue.</li>
|
||
<li><a href="https://github.com/airyland/vux">vux</a> - [Chinese] Vue UI
|
||
Components based on WeUI.</li>
|
||
<li><a href="https://github.com/OnsenUI/OnsenUI">vue-onsenui</a> -
|
||
Mobile app development framework and SDK using HTML5 and JavaScript.
|
||
Create beautiful and performant cross-platform mobile apps. Based on Web
|
||
Components, and provides bindings for Angular 1, 2, React and
|
||
Vue.js.</li>
|
||
<li><a href="https://weex.incubator.apache.org/">Weex</a> - Weex
|
||
provides the ability to publish cross platform, so web, Android, and IOS
|
||
apps can use the same API development functions.</li>
|
||
<li><a href="https://github.com/ionic-team/ionic-framework">Ionic</a> -
|
||
Mobile app development framework</li>
|
||
<li><a
|
||
href="https://github.com/nativescript-vue/nativescript-vue">Native
|
||
script</a> - Native mobile applications using NativeScript</li>
|
||
<li><a href="https://github.com/dcloudio/uni-app">uni-app</a> - A
|
||
cross-platform framework using Vue.js</li>
|
||
</ul>
|
||
<p><em>Set of components for mobile</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/youzan/vant">vant</a> - A Vue.js 2.0
|
||
Mobile UI From YouZan.</li>
|
||
<li><a href="https://didi.github.io/cube-ui">cube-ui</a> - A fantastic
|
||
mobile ui lib implement by Vue.js 2.</li>
|
||
<li><a href="https://didi.github.io/mand-mobile">mand-mobile</a> - A
|
||
mobile UI toolkit, based on Vue.js 2, designed for financial
|
||
scenes.</li>
|
||
<li><a href="https://github.com/jdf2e/nutui/">NutUI</a> - A Vue.js 2.0
|
||
UI Toolkit for Mobile Web</li>
|
||
</ul>
|
||
<h4 id="component-collections">Component Collections</h4>
|
||
<p><em>Set of components without layout system</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/JosephusPaye/Keen-UI">keen-ui</a> - A
|
||
lightweight collection of essential UI components written with Vue and
|
||
inspired by Material Design.</li>
|
||
<li><a href="https://github.com/uiv-lib/uiv">uiv</a> - Bootstrap3
|
||
components implemented by Vue2.</li>
|
||
<li><a href="https://www.syncfusion.com/products/vue">Essential JS 2 for
|
||
Vue</a> - Full-featured 45+ Vue.js components which includes Data Grid,
|
||
Chart, Scheduler and Diagram components etc.</li>
|
||
<li><a href="https://github.com/DevExpress/devextreme-vue">DevExtreme
|
||
Vue Components</a> - 65+ responsive and feature-complete Vue UI
|
||
components with customizable Material Design and Bootstrap compliant
|
||
themes.</li>
|
||
<li><a href="https://www.jqwidgets.com/vue/">jqwidgets</a> - 70+ Vue.js
|
||
2.0 UI Components with Material Design themes.</li>
|
||
<li><a href="https://www.telerik.com/kendo-vue-ui/components/">Kendo UI
|
||
for Vue</a> – Over 70 UI components, including a Grid, built for
|
||
business applications. Fully responsive with support for several Design
|
||
Languages including Material Design and Bootstrap.</li>
|
||
<li><a
|
||
href="https://github.com/tolking/element-pro-components">element-pro-components</a>
|
||
A component library for Vue 3 base on element-plus</li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/vue-integration/">TW
|
||
Elemetns for Vue</a> - Vue integration with Tailwind CSS - a free,
|
||
open-source UI Kit</li>
|
||
<li><a href="https://originui-vue.pages.dev/">Origin UI Vue</a> -
|
||
Beautiful UI components built with Tailwind CSS and Vue</li>
|
||
</ul>
|
||
<h4 id="admin-template">Admin Template</h4>
|
||
<p><em>Set of admin template</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/PanJiaChen/vue-element-admin">vue-element-admin</a>
|
||
- A magical vue admin based on Element UI 2.x <a
|
||
href="https://panjiachen.github.io/vue-element-admin/#/dashboard">Online
|
||
Demo</a></li>
|
||
<li><a href="https://github.com/d2-projects/d2-admin">D2 Admin</a> - An
|
||
elegant backstage template build by vue <a
|
||
href="https://d2admin.fairyever.com">Online Demo</a></li>
|
||
<li><a href="https://github.com/tookit/vue-material-admin">Vue Material
|
||
Admin</a> - A vue material design admin template <a
|
||
href="http://vma.isocked.com/#/dashboard">Online Demo</a></li>
|
||
<li><a href="https://github.com/zce/dashboard">dashboard</a> - A
|
||
dashboard scaffolding based on vue.js created by vuejs/vue-cli 4.x. <a
|
||
href="https://dashboard.zce.me">Online Demo</a></li>
|
||
<li><a
|
||
href="https://github.com/boussadjra/vue-pro-sidebar">vue-pro-sidebar</a>
|
||
: A responsive template starter with the ecosystem configuration
|
||
(vue-router, vuex), this boilerplate allows you to choose your preferred
|
||
colors. <a href="http://boussadjra.github.io/vue-pro-sidebar">Live
|
||
demo</a></li>
|
||
<li><a
|
||
href="https://github.com/epicmaxco/vuestic-admin">vuestic-admin</a> -
|
||
Vue Admin Dashboard built with Vue 3 and <code>vuestic-ui</code>.</li>
|
||
<li><a
|
||
href="https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free">Materio-vuetify-vuejs-admin-template-free</a>
|
||
- A Production ready, carefully crafted, most comprehensive Vuetify
|
||
Vuejs admin template. <a
|
||
href="https://themeselection.com/demo/materio-vuetify-vuejs-admin-template-free/demo/dashboard">Live
|
||
demo</a></li>
|
||
<li><a href="https://github.com/otezz/tailmin">Tailmin</a> - Admin
|
||
dashboard built with Vue.js and Tailwind CSS. <a
|
||
href="https://tailmin.vercel.app/">Live demo</a></li>
|
||
<li><a href="https://github.com/justboil/admin-one-vue-tailwind">Admin
|
||
One Vue 3 Tailwind dashboard</a> - Vue.js 3 Tailwind CSS admin template
|
||
with dark mode.</li>
|
||
<li><a
|
||
href="https://github.com/cruip/vuejs-admin-dashboard-template">Mosaic -
|
||
Vue Admin TailwindCSS template</a> - The All-in-one Tailwind CSS Admin
|
||
Dashboard Template.</li>
|
||
<li><a
|
||
href="https://github.com/cmdparkour/vue-admin-box">vue-admin-box</a> -
|
||
The admin template based on vue3 and element-plus. <a
|
||
href="https://cmdparkour.github.io/vue-admin-box/dist/">Live
|
||
demo</a></li>
|
||
<li><a
|
||
href="https://github.com/ltv/argon-dashboard-vue3">argon-dashboard-vue3</a>
|
||
- Template, Element Plus & TailwindCSS 3, Vue3.</li>
|
||
<li><a href="https://github.com/kingyue737/vitify-admin">Vitify
|
||
Admin</a> - Vite 3 + Vuetify 2 + TypeScript, Vue 2.7</li>
|
||
<li><a
|
||
href="https://github.com/bit-ocean-studio/dolphin-admin-vue">Dolphin
|
||
Admin</a> - An open source, free, lightweight, out-of-the-box,
|
||
internationalized admin template based on Vue 3 + Vite + Naive UI +
|
||
TypeScript + TailwindCSS. <a
|
||
href="https://dolphin-admin-vue.bit-ocean.studio/">Live demo</a></li>
|
||
<li><a
|
||
href="https://github.com/vbenjs/vue-vben-admin">vue-vben-admin</a> - A
|
||
modern vue admin. It is based on Vue3, vite and TypeScript. It’s fast！
|
||
<a href="https://vben.vvbin.cn/">Live demo</a></li>
|
||
<li><a
|
||
href="https://github.com/HalseySpicy/Geeker-Admin">Geeker-Admin</a> - A
|
||
set of open source backend management framework based on Vue3 +
|
||
TypeScript + Element Plus. <a href="https://admin.spicyboy.cn">Live
|
||
demo</a></li>
|
||
<li><a
|
||
href="https://github.com/flipped-aurora/gin-vue-admin">gin-vue-admin</a>
|
||
- 🚀Vite+Vue3+Gin development basic platform. <a
|
||
href="https://demo.gin-vue-admin.com">Live demo</a></li>
|
||
<li><a href="https://adminforth.dev">adminforth</a> - Vue + Node +
|
||
Tailwind admin framework. <a href="https://demo.adminforth.dev">Live
|
||
Demo</a></li>
|
||
<li><a
|
||
href="https://github.com/soybeanjs/soybean-admin/blob/main/README.en_US.md">soybean-admin</a>
|
||
- A clean, elegant, beautiful and powerful admin template, based on
|
||
Vue3, Vite5, TypeScript, Pinia, NaiveUI and UnoCSS.</li>
|
||
<li><a href="https://github.com/AirPowerTeam/AirPower4T">AirPower4T</a>
|
||
- A development library based on Vue3, TypeScript, Element Plus, Vite
|
||
which provides lots of Backend-Platform features such as
|
||
<code>OOP</code> <code>Decoration</code> to make your development more
|
||
efficient.</li>
|
||
<li><a href="https://github.com/doroudi/YummyAdmin">YummyAdmin</a> - 📈
|
||
Free Vue Admin Panel based on Naive UI and TailwindCSS. fairly completed
|
||
with beautiful design, RTL support, and multilingual. (MSW, Pinia, TS,
|
||
UnoCss, Vite)</li>
|
||
</ul>
|
||
<h4 id="server-side-rendering">Server-side rendering</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/nuxt/nuxt.js">Nuxt.js</a> - Versatile
|
||
Vue.js Framework.</li>
|
||
</ul>
|
||
<h4 id="static-website-generator">Static website generator</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/vuejs/vuepress">VuePress</a> -
|
||
Minimalistic Vue-powered static site generator.</li>
|
||
<li><a href="https://github.com/ElMassimo/iles">îles</a> - Islands of
|
||
interactivity, the joyful site generator</li>
|
||
<li><a href="https://github.com/vuejs/vitepress">VitePress</a> - Vite
|
||
& Vue powered static site generator.</li>
|
||
</ul>
|
||
<h4 id="other">Other</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/tower1229/Vue-Access-Control">Vue-Access-Control</a>
|
||
Frontend access control framework based Vue.js 2.</li>
|
||
<li><a href="https://github.com/zhennann/cabloy">CabloyJS</a> The
|
||
Ultimate NodeJS Full Stack Business Development Platform, based on KoaJS
|
||
& EggJS & VueJS & Framework7</li>
|
||
<li><a href="https://github.com/dataformsjs/dataformsjs">DataFormsJS</a>
|
||
- A minimal routing and web service framework that uses Vue as a
|
||
templating engine.</li>
|
||
<li><a
|
||
href="https://github.com/KlausSchaefers/vue-low-code">Vue-Low-Code</a> -
|
||
Low Code toolkit that can generate VUE apps from Quant-UX
|
||
prototypes</li>
|
||
<li><a href="https://github.com/janniks/vue-notion">vue-notion</a> - An
|
||
unofficial Notion renderer – Use Notion as a CMS for Vue
|
||
(e.g. Nuxt)</li>
|
||
<li><a
|
||
href="https://github.com/WeBankFinTech/fes.js/blob/master/README.en-US.md">Fes.js</a>
|
||
- An easy-to-use front-end application framework based on vue3.</li>
|
||
</ul>
|
||
<h3 id="ui-layout">UI Layout</h3>
|
||
<p><em>Layout for the overall / main view</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/jbaysolutions/vue-grid-layout">vue-grid-layout</a>
|
||
- A draggable and resizable grid layout, for Vue.js.</li>
|
||
<li><a href="https://github.com/shershen08/vue-masonry">vue-masonry</a>
|
||
- Vue.js directive for masonry blocks layouting.</li>
|
||
<li><a
|
||
href="https://github.com/tangbc/vue-virtual-scroll-list">vue-virtual-scroll-list</a>
|
||
- A vue (2.x) component support big data by using virtual scroll
|
||
list.</li>
|
||
<li><a
|
||
href="https://github.com/Akryum/vue-virtual-scroller">vue-virtual-scroller</a>
|
||
- Component to scroll a large amount of elements efficiently (Vue
|
||
2.x).</li>
|
||
<li><a href="https://github.com/dattn/dnd-grid">dnd-grid</a> - A vuejs
|
||
grid with draggable and resizable boxes</li>
|
||
<li><a
|
||
href="https://github.com/alvarotrigo/vue-fullpage.js">vue-fullpage.js</a>
|
||
- Official fullPage.js component for Vue.js.</li>
|
||
<li><a href="https://github.com/antoniandre/splitpanes">splitpanes</a> -
|
||
A Vue JS reliable, simple and touch-ready panes splitter / resizer.</li>
|
||
<li><a
|
||
href="https://github.com/dreambo8563/vue-simple-drawer">vue-simple-drawer</a>
|
||
- A tiny drawer panel with bounced animation, nest supported and theme
|
||
customized. directions: left/right/up/down</li>
|
||
<li><a
|
||
href="https://github.com/bsssshhhhhhh/vue-typed-virtual-list">vue-typed-virtual-list</a>
|
||
- [Vue 3.x] small, efficient, TypeScript-friendly virtual scroller for
|
||
rendering massive data</li>
|
||
<li><a href="https://github.com/jp-liu/fit-screen">fit-screen</a> - A
|
||
vue component based on the scale large screen adaptive solution.</li>
|
||
<li><a
|
||
href="https://github.com/lhlyu/vue-virtual-waterfall">vue-virtual-waterfall</a>
|
||
- A virtual waterfall component for Vue 3.x.</li>
|
||
<li><a
|
||
href="https://github.com/chiribuc/vue-stack-grid">vue-stack-grid</a> - A
|
||
Vue 3 component designed to make creating dynamic, responsive grid
|
||
layouts easy and efficient.</li>
|
||
</ul>
|
||
<h3 id="ui-components">UI Components</h3>
|
||
<h4 id="table">Table</h4>
|
||
<p><em>Tables / data grids</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/ag-grid/ag-grid">ag-grid-vue</a> - Vue
|
||
adaptor for ag-Grid.</li>
|
||
<li><a
|
||
href="https://github.com/njleonzhang/vue-data-tables">vue-data-tables</a>
|
||
- Vue2.0 DataTables, based on element-ui.</li>
|
||
<li><a href="https://github.com/dzwillia/vue-grid">vue-grid</a> - A
|
||
flexible grid component for Vue.js</li>
|
||
<li><a
|
||
href="https://github.com/huangshuwei/vue-easytable">vue-easytable</a> -
|
||
A powerful table components based on Vue2.x</li>
|
||
<li><a href="https://github.com/ais-one/cookbook">vue-crud-x</a> -
|
||
Extensible crud component using Vuetify layout, other than the usual
|
||
page, sort, filter, it is able to do nested CRUD, custom forms, filters,
|
||
operations.</li>
|
||
<li><a href="https://github.com/laravel-enso/vuedatatable">Vue
|
||
Datatable</a> - VueJS powered Datatable with Laravel server-side loading
|
||
and JSON template setup</li>
|
||
<li><a
|
||
href="https://github.com/future-architect/cheetah-grid">vue-cheetah-grid</a>
|
||
- A high-performance grid engine that work on a canvas for Vue.js.</li>
|
||
<li><a
|
||
href="http://vue-table-component.spatie.be/">vue-table-component</a> - A
|
||
straight to the point Vue component to display tables.</li>
|
||
<li><a href="https://lossendae.github.io/vue-table"><span
|
||
class="citation"
|
||
data-cites="lossendae/vue-table">@lossendae/vue-table</span></a> -
|
||
Simple table component for Vue.js 2.x with pagination and sortable
|
||
columns.</li>
|
||
<li><a href="https://github.com/MarketConnect/vue-pivot-table"><span
|
||
class="citation"
|
||
data-cites="marketconnect/vue-pivot-table">@marketconnect/vue-pivot-table</span></a>
|
||
- A vue component for pivot table</li>
|
||
<li><a
|
||
href="https://github.com/boussadjra/vueye-table">vueye-datatable</a> -
|
||
Vueye data table is a responsive data table component based on Vue.js 2,
|
||
it organizes your data per pages in order to navigate easily.</li>
|
||
<li><a href="https://github.com/FancyGrid/FancyGrid">fancy-grid-vue</a>
|
||
- Vue adaptor for FancyGrid.</li>
|
||
<li><a
|
||
href="https://github.com/Quintetio/vue-quintable">vue-quintable</a> - A
|
||
responsive and highly configurable table based on Vue 2.x and Bootstrap
|
||
4.x</li>
|
||
<li><a href="https://github.com/revolist/vue-datagrid">vue-datagrid</a>
|
||
- Vue grid wrapper for powerful webcomponent revo-grid with excel like
|
||
rich edit and behavior.</li>
|
||
<li><a href="https://github.com/kouts/vue-dataset">vue-dataset</a> - A
|
||
set of Vue.js components to display datasets with filtering, paging, and
|
||
sorting capabilities!</li>
|
||
<li><a href="https://github.com/jeremyjone/jz-gantt">jz-gantt</a> - A
|
||
high-performance Vue gantt component, which includes highly customizable
|
||
table columns, dynamic update data, freely drag the progress bar, switch
|
||
header, etc.</li>
|
||
<li><a
|
||
href="https://github.com/HC200ok/vue3-easy-data-table">vue3-easy-data-table</a>
|
||
- A easy-to-use data table component made with Vue.js 3.x, referring to
|
||
the API and UI of data table component in Vuetify 2.</li>
|
||
<li><a href="https://github.com/tanstack/table">tanstack-table</a> -
|
||
Headless UI for building powerful tables & datagrids.</li>
|
||
<li><a
|
||
href="https://github.com/webdevnerdstuff/vuetify-drilldown-table">vuetify-drilldown-table</a>
|
||
- The Vuetify Drilldown Table is a powerful component that enhances the
|
||
functionality of the Vuetify framework’s v-data-table and
|
||
v-data-table-server. It provides a recursive table structure, allowing
|
||
you to display hierarchical data in a nested format.</li>
|
||
<li><a href="https://github.com/x-extends/vxe-table">vxe-table</a> - Vue
|
||
form/table solution.</li>
|
||
<li><a href="https://github.com/Xeyos88/HyVueGantt">hy-vue-gantt</a> - A
|
||
powerful and flexible Gantt chart component for Vue 3 applications.</li>
|
||
<li><a href="https://github.com/Seungwoo321/vue-pivottable">Vue
|
||
Pivottable</a> – A Vue 2 port of the jQuery-based PivotTable.js.</li>
|
||
<li><a href="https://github.com/vue-pivottable/vue3-pivottable">Vue3
|
||
Pivottable</a> – A Vue 3 port of the jQuery-based PivotTable.js.</li>
|
||
</ul>
|
||
<h4 id="notification">Notification</h4>
|
||
<p><em>Toaster / snackbar — Notify the user with a modeless temporary
|
||
little popup</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/noru/vue-easy-toast">vue-easy-toast</a>
|
||
- A toast plugin for vue/vue2.</li>
|
||
<li><a
|
||
href="https://github.com/ankurk91/vue-toast-notification">vue-toast-notification</a>
|
||
- Yet another Vue.js Toast notification plugin.</li>
|
||
<li><a href="https://github.com/nandi95/vue-toastify">VueToastify</a> -
|
||
A fuss free notification component.</li>
|
||
<li><a href="https://github.com/kyvg/vue3-notification"><span
|
||
class="citation"
|
||
data-cites="kyvg/vue3-notification">@kyvg/vue3-notification</span></a> -
|
||
Vue 3 notification library</li>
|
||
<li><a
|
||
href="https://github.com/RashadSaleh/vue-global-alert-utility">vue-global-alert-utility</a>
|
||
- A Vue.js global alert utility to replace vanilla JavaScript
|
||
<code>alert</code> function with better user and developer experience,
|
||
while keeping it as simple as possible.</li>
|
||
<li><a href="https://github.com/smastrom/notivue">notivue</a> -
|
||
Fully-featured notification system for Vue 3 and Nuxt 3.</li>
|
||
</ul>
|
||
<h4 id="loader">Loader</h4>
|
||
<p><em>Loaders / spinners / progress bars — Let the user know that
|
||
something is loading</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/epicmaxco/epic-spinners">epic-spinners</a> -
|
||
Easy to use css spinners collection with vue.js integration.</li>
|
||
<li><a
|
||
href="https://github.com/ankurk91/vue-loading-overlay">vue-loading-overlay</a>
|
||
- Tiny full screen loading indicator</li>
|
||
<li><a
|
||
href="https://github.com/setaman/vue-ellipse-progress">vue-ellipse-progress</a>
|
||
- A flexible Vue.js component to create beautiful animated circular
|
||
progress bars and loaders</li>
|
||
<li><a
|
||
href="https://github.com/zero-one-code/vue-default-page">vue-default-page</a>
|
||
- A Vue 3.0 plugin with built-in v-loading, v-skeleton, v-error and
|
||
v-empty custom directives.</li>
|
||
<li><a
|
||
href="https://github.com/willmendesneto/vue-skeleton-content-loader">vue-skeleton-content-loader</a>
|
||
- Lightweight and accessible library to make beautiful, animated loading
|
||
skeletons that automatically adapt to your Vue app</li>
|
||
</ul>
|
||
<h5 id="progress-bar">Progress Bar</h5>
|
||
<p><em>A slim progress bar at the top of the page</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/spemer/vue-scroll-progress">vue-scroll-progress</a>
|
||
- Simple Vue.js plugin for page scroll progress bar</li>
|
||
<li><a
|
||
href="https://github.com/meloalright/vue-ins-progress-bar">vue-ins-progress-bar</a>
|
||
- A Vue component of ins-style progress bar 一款 ins 风格的 vue
|
||
进度条组件</li>
|
||
<li><a
|
||
href="https://github.com/jambonn/vue-next-progressbar">vue-next-progressbar</a>
|
||
- Slim progress bars(1KB gzipped) for Vue 3.</li>
|
||
<li><a
|
||
href="https://github.com/rofixro/css-3d-progress">css-3d-progress</a> -
|
||
A 3D progress bar component written using web Components, supports Vue,
|
||
React and Svelte.</li>
|
||
</ul>
|
||
<h4 id="tooltip">Tooltip</h4>
|
||
<p>Tooltips / popovers</p>
|
||
<ul>
|
||
<li><a href="https://github.com/Akryum/vue-tooltip">v-tooltip</a> - Easy
|
||
tooltips with Vue 2.x.</li>
|
||
<li><a
|
||
href="https://github.com/jambonn/vue-popper-lite">vue-popper-lite</a> -
|
||
A popover component based on <a
|
||
href="https://popper.js.org/docs/v2/#popper-lite-tree-shaking">popper.js
|
||
tree shaking</a> for Vue 3 written by TypeScript.</li>
|
||
</ul>
|
||
<h4 id="overlay">Overlay</h4>
|
||
<p><em>Overlay / modal / alert / dialog / lightbox / popup</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/chenjiahan/vodal">vodal</a> - A vue
|
||
modal with animations.</li>
|
||
<li><a href="https://github.com/mirari/v-viewer">v-viewer</a> - Image
|
||
viewer component for vue2 and vue3, supports rotation, scale, zoom and
|
||
so on, based on <a
|
||
href="https://github.com/fengyuanchen/viewerjs">viewer.js</a></li>
|
||
<li><a
|
||
href="https://github.com/Godofbrowser/vuejs-dialog">vuejs-dialog</a> - A
|
||
lightweight, promise based alert, prompt and confirm dialog.</li>
|
||
<li><a href="https://github.com/TerryZ/v-dialogs">v-dialogs</a> - A
|
||
simple and powerful dialog, including Modal, Alert, Mask and Toast
|
||
modes, based on Vue2.x</li>
|
||
<li><a
|
||
href="https://github.com/avil13/vue-sweetalert2">vue-sweetalert2</a> -
|
||
wrapper for sweatlaert2 with support for TypeScript, Nuxt and SSR</li>
|
||
<li><a href="https://github.com/kouts/vue-modal"><span class="citation"
|
||
data-cites="kouts/vue-modal">@kouts/vue-modal</span></a> - A
|
||
customizable, stackable and lightweight modal component that adheres to
|
||
the guidelines set in WAI-ARIA Dialog (Modal) section of W3C.</li>
|
||
<li><a
|
||
href="https://github.com/hunterliu1003/vue-final-modal">vue-final-modal</a>
|
||
Tailwind-friendly, highly customizable, stackable modal component.</li>
|
||
<li><a
|
||
href="https://github.com/haiafara/vue-it-bigger">vue-it-bigger</a> - A
|
||
simple image / (YouTube) video lightbox component for Vue.js.</li>
|
||
<li><a
|
||
href="https://github.com/harmyderoman/vuejs-confirm-dialog">vuejs-confirm-dialog</a>
|
||
- :speech_balloon: a simple way to create, reuse, promisify and build
|
||
chains of modal dialogs in Vue.js.</li>
|
||
<li><a href="https://github.com/kolirt/vue-modal"><span class="citation"
|
||
data-cites="kolirt/vue-modal">@kolirt/vue-modal</span></a> - ⚡️ Simple
|
||
Vue3 modal package</li>
|
||
<li><a
|
||
href="https://github.com/webdevnerdstuff/vuetify-resize-drawer">vuetify-resize-drawer</a>
|
||
- The vuetify-resize-drawer component extends the functionality of the
|
||
v-navigation-drawer so that it is resizable by the user.</li>
|
||
</ul>
|
||
<h4 id="icons">Icons</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/robcresswell/vue-material-design-icons"
|
||
title="vue-material-design-icons on GitHub">vue-material-design-icons</a>
|
||
- A collection of SVG Material Design icons as single file
|
||
components.</li>
|
||
<li><a
|
||
href="https://github.com/FortAwesome/vue-fontawesome">vue-fontawesome</a>
|
||
- Font Awesome 5 Vue component</li>
|
||
<li><a
|
||
href="https://github.com/P3trur0/vue-country-flag">vue-country-flag</a>
|
||
- Vue component for country flag icons</li>
|
||
<li><a href="https://github.com/Cweili/vue-fa">vue-fa</a> - Simple
|
||
FontAwesome 5 Vue.js 2 component.</li>
|
||
<li><a href="https://github.com/aykutkardas/vue-icomoon">vue-icomoon</a>
|
||
- With vue-icomoon you can easily use the icons you have selected or
|
||
created in icomoon.</li>
|
||
<li><a href="https://github.com/kalimah-apps/vue-icons">vue-icons</a> -
|
||
More than 11,000 icons from most popular icon libraries (bootstrap,
|
||
fontawesome, feather .. etc)</li>
|
||
</ul>
|
||
<h4 id="marquee">Marquee</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/megasanjay/vue3-marquee">vue3-marquee</a> - A
|
||
simple and responsive marquee component for Vue 3 applications with 0
|
||
dependencies.</li>
|
||
</ul>
|
||
<h4 id="menu">Menu</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/MisRob/vue-tree-navigation">vue-tree-navigation</a>
|
||
- Vue.js 2 tree navigation with vue-router support</li>
|
||
<li><a href="https://github.com/TerryZ/v-selectmenu">v-selectmenu</a> -
|
||
A simple, easier and highly customized menu solution for Vue2.</li>
|
||
<li><a
|
||
href="https://github.com/johndatserakis/vue-navigation-bar">vue-navigation-bar</a>
|
||
- A simple, pretty navbar for your Vue projects.</li>
|
||
<li><a
|
||
href="https://github.com/motla/vue-file-toolbar-menu">vue-file-toolbar-menu</a>
|
||
- UI file/toolbar menus for Vue apps</li>
|
||
<li><a
|
||
href="https://github.com/RadKod/v-dropdown-menu">v-dropdown-menu</a> -
|
||
Customizable dropdown menu plugin for vuejs. SSR supported.</li>
|
||
<li><a
|
||
href="https://github.com/webzlodimir/vue-bottom-sheet">vue-bottom-sheet</a>
|
||
- A swipeable bottom sheet component for Vue.js created with
|
||
Hammer.js</li>
|
||
<li><a
|
||
href="https://github.com/amirkian007/vue-awesome-sidebar">vue-awesome-sidebar</a>
|
||
- A modern and fast sidebar menu component for vue(3x) capable with
|
||
vue-router.</li>
|
||
<li><a
|
||
href="https://github.com/smastrom/vue-use-fixed-header">vue-use-fixed-header</a>
|
||
- Turn your boring fixed header into a smart one.</li>
|
||
<li><a href="https://github.com/aaronlamz/navpress">navpress</a> -
|
||
NavPress is a CLI tool for generating static navigation websites. It
|
||
allows you to quickly build a navigation site through a configuration
|
||
file.</li>
|
||
</ul>
|
||
<h4 id="carousel">Carousel</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/shhdgit/vue-easy-slider">vue-easy-slider</a> -
|
||
Slider Component of Vue.js.</li>
|
||
<li><a href="https://github.com/deulos/vue-flux">vue-flux</a> - Image
|
||
slider which comes with 20 cool transitions.</li>
|
||
<li><a
|
||
href="https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md"><span
|
||
class="citation"
|
||
data-cites="egjs/vue-flicking">@egjs/vue-flicking</span></a> - It’s
|
||
reliable, flexible and extendable carousel for Vue.js 2 & 3.</li>
|
||
<li><a href="https://github.com/nolimits4web/swiper">swiper</a> -
|
||
Official Swiper component for Vue 3. Tree shakable, SSR support, typing,
|
||
a11y and a lot more</li>
|
||
<li><a
|
||
href="https://github.com/jambonn/vue-concise-carousel">vue-concise-carousel</a>
|
||
- Vue Concise Carousel with True SSR. Works for Vue 2 & 3.</li>
|
||
<li><a
|
||
href="https://github.com/ismail9k/vue3-carousel">vue3-carousel</a> - A
|
||
highly customizable, lightweight Vue 3 carousel component for your next
|
||
awesome project.</li>
|
||
<li><a href="https://github.com/bartdominiak/vue-snap">vue-snap</a> - 🌿
|
||
Modern and lightweight Vue 3 Carousel powered by CSS Scroll Snap.</li>
|
||
</ul>
|
||
<h4 id="charts">Charts</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/apertureless/vue-chartjs">vue-chartjs</a> -
|
||
Vue.js wrapper for Chart.js.</li>
|
||
<li><a href="https://github.com/Justineo/vue-echarts">vue-echarts</a> -
|
||
ECharts component for Vue.js.</li>
|
||
<li><a href="https://github.com/ankane/vue-chartkick">vue-chartkick</a>
|
||
- Create beautiful JavaScript charts with one line of Vue</li>
|
||
<li><a
|
||
href="https://github.com/apexcharts/vue-apexcharts">vue-apexcharts</a> -
|
||
Vue.js component for <a
|
||
href="https://github.com/apexcharts/apexcharts.js">ApexCharts</a>.</li>
|
||
<li><a
|
||
href="https://github.com/dumptyd/vue-css-donut-chart">vue-css-donut-chart</a>
|
||
- Lightweight Vue component for drawing pure CSS donut charts.</li>
|
||
<li><a
|
||
href="https://github.com/zingchart/zingchart-vue">ZingChart-Vue</a> -
|
||
Vue component made by ZingChart with 35+ chart types.</li>
|
||
<li><a
|
||
href="https://github.com/joyceworks/flowchart-vue">flowchart-vue</a> -
|
||
Flowchart & Flowchart designer component for Vue.js.</li>
|
||
<li><a href="https://github.com/ecomfe/vue-echarts">vue-echarts</a> -
|
||
Vue.js component for Apache ECharts™.</li>
|
||
<li><a href="https://github.com/graphieros/vue-data-ui">vue-data-ui</a>
|
||
- Vue 3 chart library with 60+ components. Official site: <a
|
||
href="https://vue-data-ui.graphieros.com/">https://vue-data-ui.graphieros.com/</a></li>
|
||
<li><a
|
||
href="https://github.com/palerdot/vue-speedometer">vue-speedometer</a> -
|
||
Vue component for showing speedometer like gauge using d3.</li>
|
||
</ul>
|
||
<h4 id="time">Time</h4>
|
||
<p><em>Display time / date / age</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/x10sv/bs-vue-timeline">bs-vue-timeline</a> - An
|
||
alternative responsive boostrap-vue timeline</li>
|
||
<li><a href="https://github.com/malekim/v-idle">v-idle</a> - A Vue.js
|
||
plugin to detect idle/non-active users.</li>
|
||
<li><a
|
||
href="https://github.com/riderx/vue-timer-hook">vue-timer-hook</a> - Vue
|
||
3 Timer module inspired by react-timer-hook</li>
|
||
</ul>
|
||
<h4 id="calendar">Calendar</h4>
|
||
<p><em>Display non-editable events in a Calendar</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/richardtallent/vue-simple-calendar">vue-simple-calendar</a>
|
||
- Flexbox-based Vue month calendar component; supports multi-day events,
|
||
localization, holiday emoji, drag/drop. No dependencies.</li>
|
||
<li><a
|
||
href="https://github.com/ManukMinasyan/vue-functional-calendar">vue-functional-calendar</a>
|
||
- Lightweight, high performance calendar component(Date Picker, Date
|
||
Range) based on Vue.</li>
|
||
<li><a href="https://github.com/antoniandre/vue-cal">vue-cal</a> - A Vue
|
||
JS full calendar, no dependency, no BS. 🤘.</li>
|
||
<li><a
|
||
href="https://github.com/boussadjra/vue-spring-calendar">vue-spring-calendar</a>
|
||
- It’s a Vue based component which provides the functionality of a
|
||
full-calendar that shows daily events. the <a
|
||
href="https://boussadjra.github.io/vue-spring-calendar/"><code>demo</code></a>.</li>
|
||
<li><a
|
||
href="https://github.com/elreco/vue-tailwind-datepicker">vue-tailwind-datepicker</a>
|
||
- A Vue 3 Datepicker using Tailwind CSS 3</li>
|
||
<li><a href="https://github.com/tomosterlund/qalendar">qalendar</a> - An
|
||
event calendar and datepicker for Vue 3</li>
|
||
<li><a href="https://github.com/schedule-x/schedule-x">schedule-x</a> -
|
||
A material design event calendar. Customizable, light- and dark modes
|
||
& multilingual.</li>
|
||
<li><a href="https://github.com/Kodeglot/vue-calendar">vue-calendar</a>
|
||
- A fully-featured, customizable calendar date picker component for Vue
|
||
3 with built-in Tailwind CSS support. Perfect for building scheduling
|
||
applications, event calendars, and date pickers.</li>
|
||
</ul>
|
||
<h4 id="map">Map</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/KoRiGaN/Vue2Leaflet">vue2-leaflet</a> -
|
||
Vue 2 components for Leaflet maps.</li>
|
||
<li><a href="https://github.com/zouyaoji/vue-cesium">vue-cesium</a> -
|
||
Vue 2.x & Vue 3.x components for Cesium.</li>
|
||
<li><a
|
||
href="https://github.com/MelihAltintas/vue3-openlayers">vue3-openlayers</a>
|
||
- Vue 3 components to work with OpenLayers.</li>
|
||
<li><a
|
||
href="https://github.com/marsgis/mars3d-vue-template">vue-mars3d</a> -
|
||
Vue 2.x 3D earth visualization JS development platform.</li>
|
||
<li><a
|
||
href="https://github.com/razorness/vue-maplibre-gl">vue-maplibre-gl</a>
|
||
- Vue 3.x wrapper around Maplibre GL JS library written in TS. Including
|
||
style switch and frame rate control.</li>
|
||
<li><a href="https://github.com/Seungwoo321/vue-datamaps">Vue
|
||
Datamaps</a> - Vue 2 port of the javascript-based DataMaps</li>
|
||
</ul>
|
||
<h4 id="audio-video">Audio / Video</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/staskobzar/vue-audio-visual">vue-audio-visual</a>
|
||
- Vue HTML5 audio visualization components.</li>
|
||
<li><a
|
||
href="https://github.com/cycjimmy/vue-h5-audio-controls">vue-h5-audio-controls</a>
|
||
- A simple h5 music controller for Vue.</li>
|
||
<li><a href="https://github.com/vueuse/sound">vue-use-sound</a> - A Vue
|
||
Hook for playing sound effects.</li>
|
||
<li><a
|
||
href="https://github.com/display-design-studio/vue-player">Vue-Player</a>
|
||
- Lightweight, customizable, and easy-to-implement vue video
|
||
player.</li>
|
||
</ul>
|
||
<h4 id="infinite-scroll">Infinite Scroll</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/naver/egjs-infinitegrid/blob/master/packages/vue-infinitegrid/"><span
|
||
class="citation"
|
||
data-cites="egjs/vue-infinitegrid">@egjs/vue-infinitegrid</span></a> -
|
||
Arrange infinite card elements according to various layout types like
|
||
masonry for Vue.js 2.</li>
|
||
<li><a href="https://github.com/inokawa/virtua">virtua</a> - A
|
||
zero-config, fast and small (~3kB) virtual list component for React and
|
||
Vue</li>
|
||
<li><a href="https://github.com/isaact/vue-infinity">vue-infinity</a> -
|
||
An easy-to-use virtual list component for Vue 3. Supports configurable
|
||
grid layout, horizontal/vertical scroll, scroll snapping, seeking,
|
||
ssr</li>
|
||
</ul>
|
||
<h4 id="markdown">Markdown</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/f3ve/vue-markdown-it"><span
|
||
class="citation"
|
||
data-cites="f3ve/vue-markdown-it">@f3ve/vue-markdown-it</span></a> - A
|
||
markdown-it component for Vue3. Easy to use and fully typed.</li>
|
||
<li><a href="https://github.com/litingyes/vue-markdown">Vue Markdown</a>
|
||
- The vue component for render Markdown string, supports custom
|
||
rendering of specific node types and better adapts to AI Chat
|
||
Stream.</li>
|
||
</ul>
|
||
<h4 id="pdf">PDF</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/hrynko/vue-pdf-embed">vue-pdf-embed</a>
|
||
- PDF embed component for Vue 2 and Vue 3</li>
|
||
<li><a href="https://github.com/TaTo30/VuePDF"><span class="citation"
|
||
data-cites="tato30/vue-pdf">@tato30/vue-pdf</span></a> - A PDF viewer
|
||
for Vue 3. <a href="https://tato30.github.io/VuePDF/">Demo</a></li>
|
||
</ul>
|
||
<h4 id="tree">Tree</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/holiber/sl-vue-tree">sl-vue-tree</a> - A
|
||
simple customizable draggable tree component for Vue.js</li>
|
||
<li><a href="https://github.com/jledentu/vue-finder">vue-finder</a> - A
|
||
component to display hierarchical data, with selection, filtering and
|
||
drag & drop</li>
|
||
<li><a
|
||
href="https://github.com/iendeavor/object-visualizer">object-visualizer</a>
|
||
- Vue 3 JSON inspector with Chrome-like theme.</li>
|
||
</ul>
|
||
<h4 id="graph">Graph</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/txlabs/vnodes">vnodes</a> - General
|
||
purpose components to create svg interactive graphs, diagrams or node
|
||
based visual tools.</li>
|
||
<li><a
|
||
href="https://github.com/dash14/v-network-graph">v-network-graph</a> -
|
||
An interactive SVG based network-graph visualization component for Vue
|
||
3.</li>
|
||
<li><a href="https://github.com/AlexanderMykulych/coya">coya</a> -
|
||
Diagram drawing library (vue3 only)</li>
|
||
<li><a href="https://github.com/rustq/vue-skia">vue-skia</a> - Skia
|
||
based 2d graphics vue3 rendering library. It is based on Rust to
|
||
implement software rasterization to perform rendering.</li>
|
||
<li><a href="https://github.com/bcakmakoglu/vue-flow">vue-flow</a> -
|
||
Interactive, customizeabe, graph & flowchart editor for Vue3</li>
|
||
</ul>
|
||
<h4 id="social-sharing">Social Sharing</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/koddr/vue-goodshare">vue-goodshare</a> -
|
||
Vue.js component for social share with beautiful button design. Simple
|
||
install, extensive documentation, developer support, SEO friendly, clean
|
||
code without scripts tracking user activity on the page, high speed.
|
||
Work with Vue.js 2.x.</li>
|
||
<li><a
|
||
href="https://github.com/sttatusx/vue-share-modal">vue-share-modal</a> -
|
||
A pure, lightweight, and beautiful share modal for Vue 3.</li>
|
||
<li><a
|
||
href="https://github.com/hedint/vue3-social-sharing">vue3-social-sharing</a>
|
||
- Style agnostic Vue 3 plugin for social sharing your links on major
|
||
social networks.</li>
|
||
</ul>
|
||
<h4 id="qr-code">QR Code</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/gruhn/vue-qrcode-reader">vue-qrcode-reader</a>
|
||
- A set of Vue.js components for detecting and decoding QR codes.</li>
|
||
<li><a href="https://github.com/HJ29/vue3-qr-reader">vue3-qr-reader</a>
|
||
- A Vue 3 QR reader component. Refactor vue-qrcode-reader for vue 3
|
||
compatibility.</li>
|
||
<li><a href="https://github.com/scopewu/qrcode.vue">qrcode.vue</a> - A
|
||
Vue.js component to generate qrcode. Supports both Vue 2 and Vue 3.</li>
|
||
</ul>
|
||
<h4 id="search">Search</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/appbaseio/reactivesearch">reactivesearch-vue</a>
|
||
- UI components for building data-driven apps with Elasticsearch</li>
|
||
<li><a
|
||
href="https://github.com/kouts/vue-search-input">vue-search-input</a> -
|
||
A Vue 3 search input component, inspired by the global search input of
|
||
Storybook and GitHub.</li>
|
||
</ul>
|
||
<h4 id="miscellaneous">Miscellaneous</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/BrockReece/vue-kanban">vue-kanban</a> -
|
||
A flexible drag and drop kanban board component</li>
|
||
<li><a href="https://github.com/vinayakkulkarni/v-offline">v-offline</a>
|
||
- Simple, tiny and easy to use detection of offline & online events
|
||
for your Vue app (less than 390b minified)</li>
|
||
<li><a
|
||
href="https://github.com/Botre/vue-connection-listener">vue-connection-listener</a>
|
||
- Vue event bus plugin listening for online/offline changes.</li>
|
||
<li><a href="https://github.com/Botre/vue-prom">vue-prom</a> - Vue
|
||
promise wrapper component.</li>
|
||
<li><a
|
||
href="https://github.com/vinayakkulkarni/vue-identify-network">vue-identify-network</a>
|
||
- ⚡️Identify what kinda internet your users are using!</li>
|
||
<li><a
|
||
href="https://github.com/Astray-git/vue-highlight-words">vue-highlight-words</a>
|
||
- Vue component to highlight words within a larger body of text. Ported
|
||
from <a
|
||
href="https://github.com/bvaughn/react-highlight-words">react-highlight-words</a></li>
|
||
<li><a href="https://github.com/ndabAP/vue-command">vue-command</a> - A
|
||
fully working Vue.js terminal emulator</li>
|
||
<li><a
|
||
href="https://github.com/potato4d/vue-fixed-header">vue-fixed-header</a>
|
||
- Simple and cross-browser friendly fixed header component for Vue.js
|
||
written by TypeScript.</li>
|
||
<li><a
|
||
href="https://github.com/kevinfaguiar/vue-twemoji-picker">vue-twemoji-picker</a>
|
||
- A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering)
|
||
for Vue.</li>
|
||
<li><a href="https://github.com/matteobruni/tsparticles">tsParticles</a>
|
||
- A lightweight Javascript library to easily create highly configurable
|
||
and interactive particle animations</li>
|
||
<li><a
|
||
href="https://github.com/samjonesigd/vue-image-zoomer">vue-image-zoomer</a>
|
||
- image zoom component for Vue.js 2 & 3, that also works on touch
|
||
devices.</li>
|
||
<li><a
|
||
href="https://github.com/antoine92190/vue-advanced-chat">vue-advanced-chat</a>
|
||
- Feature-rich and fully customizable chat rooms component. Support
|
||
files, images, videos, audio, emojis, customised actions, etc.</li>
|
||
<li><a
|
||
href="https://github.com/kawamataryo/vue-word-highlighter">vue-word-highlighter</a>
|
||
- The word highlighter library for Vue 2 and Vue 3.</li>
|
||
<li><a
|
||
href="https://github.com/delowardev/vue3-emoji-picker">vue3-emoji-picker</a>
|
||
- Simple and Powerful Emoji Picker for Vue3.</li>
|
||
<li><a
|
||
href="https://github.com/WebsiteBeaver/vue-magnifier">vue-magnifier</a>
|
||
- Vue 3 image zoom component.</li>
|
||
<li><a
|
||
href="https://github.com/tzfun/vue-web-terminal">vue-web-terminal</a> -
|
||
💻 A feature-rich and powerful web terminal plugin for vue2 &
|
||
vue3.(功能强大的网页命令行终端插件)</li>
|
||
<li><a
|
||
href="https://github.com/liting-yes/vite-plugin-vue-preview">vite-plugin-vue-preview</a>
|
||
- a vite plugin for code preview, of course you can also use the
|
||
component separately</li>
|
||
<li><a
|
||
href="https://github.com/Liberty-liu/Everright-filter">Everright-filter</a>
|
||
- A query builder component for Vue3. Supports filtering of multiple
|
||
data types, including string, number, dropdown, cascade, region, date,
|
||
and time.</li>
|
||
<li><a href="https://github.com/kolirt/vue-web3-auth"><span
|
||
class="citation"
|
||
data-cites="kolirt/vue-web3-auth">@kolirt/vue-web3-auth</span></a> - 💎
|
||
Web3 authentication for Vue3 apps based on WalletConnect v2 and
|
||
wagmi</li>
|
||
<li><a
|
||
href="https://willnguyen1312.github.io/zoom-image/">zoom-image</a> - A
|
||
little yet powerful framework agnostic library to zoom image on the
|
||
web</li>
|
||
<li><a
|
||
href="https://github.com/ilyasozkurt/vue-wheel-spinner">vue-wheel-spinner</a>
|
||
- A simple, customizable wheel of fortune component. <a
|
||
href="https://vue-wheel-spinner-demo.vercel.app/">See Demo</a></li>
|
||
<li><a
|
||
href="https://github.com/keiwen/vue-progress-circle">vue-progress-circle</a>
|
||
- Circle progress bar component for vue3</li>
|
||
</ul>
|
||
<h4 id="tabs">Tabs</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/tupilabs/vue-lumino">vue-lumino</a> - A
|
||
component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating
|
||
DOM & VDOM through event listeners and Vue reactivity system.</li>
|
||
<li><a
|
||
href="https://github.com/viewweiwu/vue3-tabs-chrome">vue3-tabs-chrome</a>
|
||
- A Vue3 component for Chrome-like tabs.</li>
|
||
<li><a href="https://github.com/daylenjeez/vue3-tabor">vue3-tabor</a> -
|
||
A versatile Vue 3 tabs component with rich API, supporting keep-alive
|
||
and iframe integration.</li>
|
||
</ul>
|
||
<h4 id="form">Form</h4>
|
||
<p><em>Let the user create & edit data</em></p>
|
||
<h5 id="phone-number-input-formatter">Phone Number Input Formatter</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/EducationLink/vue-tel-input">vue-tel-input</a>
|
||
- International Telephone Input with Vue.</li>
|
||
</ul>
|
||
<h5 id="picker">Picker</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/wan2land/vue-scroll-picker">vue-scroll-picker</a>
|
||
- A scroll picker component for Vue 2.x. Support all gestures of
|
||
mouse(also wheel) and touch.</li>
|
||
<li><a
|
||
href="https://github.com/keiwen/vue-roller-picker">vue-roller-picker</a>
|
||
- Roll-designed selector component for vue3</li>
|
||
<li><a
|
||
href="https://github.com/hiyali/vue-smooth-picker">vue-smooth-picker</a>
|
||
- A SmoothPicker for Vue 3 (like native datetime picker of iOS)</li>
|
||
</ul>
|
||
<h5 id="generator">Generator</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/xaboy/form-create">form-create</a> -
|
||
Form builder with dynamic rendering, data collection, validation, and
|
||
submission capabilities, supporting json data</li>
|
||
<li><a
|
||
href="https://github.com/ejirocodes/vue3-otp-input">vue3-otp-input</a> -
|
||
A fully customizable, OTP (one-time-password) input component built with
|
||
Vue 3.x and Vue Composition API.</li>
|
||
<li><a href="https://vueform.com">Vueform</a> - (probably) the most
|
||
comprehensive form builder for Vue.js <a
|
||
href="https://vueform.com/examples">Online Demo</a></li>
|
||
<li><a
|
||
href="https://github.com/Liberty-liu/Everright-formEditor">Everright-formEditor</a>
|
||
- A visual drag-and-drop low-code form editor</li>
|
||
</ul>
|
||
<h6 id="date-picker">Date Picker</h6>
|
||
<p><em>Date / datetime / time Picker</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/ankurk91/vue-flatpickr-component">vue-flatpickr-component</a>
|
||
Vue.js component for <a
|
||
href="https://github.com/chmln/flatpickr">flatpickr</a> datetime
|
||
picker</li>
|
||
<li><a href="https://vcalendar.io/">VCalendar</a> Very customizable and
|
||
powerful calendar/datepicker component with many features and good
|
||
documentation.</li>
|
||
<li><a
|
||
href="https://github.com/mathieustan/vue-datepicker">vue-datepicker</a>
|
||
- A clean & responsive datepicker with Material Design style for
|
||
Vuejs 2.x. (date/month/quarter && date range picker) :new:</li>
|
||
</ul>
|
||
<h5 id="select">Select</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/sagalbot/vue-select">vue-select</a> - A
|
||
native Vue.js component that provides similar functionality to Select2
|
||
without the overhead of jQuery.</li>
|
||
<li><a
|
||
href="https://github.com/monterail/vue-multiselect">vue-multiselect</a>
|
||
- Universal select/multiselect/tagging component for Vue.js.</li>
|
||
<li><a href="https://github.com/TerryZ/v-region">v-region</a> - A simple
|
||
region selector, provide Chinese administrative division data.</li>
|
||
<li><a href="https://github.com/TerryZ/v-selectpage">v-selectpage</a> -
|
||
A powerful selector for Vue2, list or table view of pagination, use tags
|
||
for multiple selection, i18n and server-side resources supports.</li>
|
||
<li><a
|
||
href="https://github.com/iliyaZelenko/vue-cool-select">vue-cool-select</a>
|
||
- Bootstrap / Material Design theme, support slots, autocomplete,
|
||
events, validation and more.</li>
|
||
<li><a
|
||
href="https://github.com/juliorosseti/vue-select-sides">vue-select-sides</a>
|
||
- A component for Vue.js to select double-sided data (2-sides).</li>
|
||
<li><a href="https://github.com/vueform/multiselect"><span
|
||
class="citation"
|
||
data-cites="vueform/multiselect">@vueform/multiselect</span></a> - Vue 3
|
||
multiselect component with single select, multiselect and tagging
|
||
options.</li>
|
||
<li><a
|
||
href="https://github.com/TotomInc/vue3-select-component">vue3-select-component</a>
|
||
- Vue 3 Select Component, single & multi-select, best-in-class DX
|
||
support with TypeScript end-to-end typesafe, easy styling, slots and
|
||
more ~4.4KB</li>
|
||
</ul>
|
||
<h5 id="drag-and-drop">Drag and Drop</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/zizigy/vue-dnd-kit">Vue DnD Kit</a> - A
|
||
lightweight, performant drag and drop toolkit for Vue 3 with composable
|
||
API, keyboard navigation, accessibility support, and advanced
|
||
customization options. Supports any cases, and touch devices. Inspired
|
||
by React DnD Kit</li>
|
||
<li><a
|
||
href="https://github.com/Alfred-Skyblue/vue-draggable-plus">vuedraggable-plus</a>
|
||
- Vue component allowing drag-and-drop sorting module, support
|
||
Vue>=v3 or Vue>=2.7. Based on Sortable.js.</li>
|
||
<li><a
|
||
href="https://github.com/mauricius/vue-draggable-resizable">vue-draggable-resizable</a>
|
||
- Vue2 component for draggable and resizable elements.</li>
|
||
<li><a
|
||
href="https://github.com/kutlugsahin/vue-smooth-dnd">vue-smooth-dnd</a>
|
||
- Vue wrappers of smooth-dnd library. drag and drop, sortable library
|
||
covering for many cases.</li>
|
||
<li><a href="https://github.com/hcg1023/vue3-dnd">vue3-dnd</a> - React
|
||
DnD in Composition API implementation, Use the Composition API for
|
||
sortable and free draggable, Supported Vue2, Vue3.</li>
|
||
<li><a
|
||
href="https://github.com/MaxLeiter/sortablejs-vue3">sortablejs-vue3</a>
|
||
- A Vue 3 component acting as a thin wrapper around SortableJS</li>
|
||
<li><a
|
||
href="https://github.com/carlosjorger/vue-fluid-dnd">vue-fluid-dnd</a> -
|
||
A Vue 3 drag and drop, sortable, dependency-free library with cool
|
||
animations, a easy to use api using vue composables.</li>
|
||
</ul>
|
||
<h5 id="type-select">Type Select</h5>
|
||
<p><em>Let the user select a tag / something while typing</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/jcc/v-distpicker">v-distpicker</a> A
|
||
flexible, highly available district picker for picking provinces, cities
|
||
and districts of China for Vue.js 2.x.</li>
|
||
<li><a href="https://github.com/vinayakkulkarni/v-image">v-image</a>
|
||
:camera: Tiny little component for input type=file (< 1kb,
|
||
gzipped)</li>
|
||
</ul>
|
||
<h5 id="color-picker">Color Picker</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/radial-color-picker/vue-color-picker">radial-color-picker</a>
|
||
- Minimalistic color picker with a focus on size, accessibility and
|
||
performance.</li>
|
||
<li><a
|
||
href="https://github.com/gVguy/vue-color-input">vue-color-input</a> –
|
||
Vue 3 color picker component whose goal is to replace
|
||
<code><input type="color"></code></li>
|
||
<li><a
|
||
href="https://github.com/webdevnerdstuff/vuetify-color-field">vuetify-color-field</a>
|
||
- Vuetify Color Field is a Vuetify VTextField Color Picker
|
||
Component</li>
|
||
</ul>
|
||
<h5 id="switch">Switch</h5>
|
||
<p><em>Switch / on/off toggle / checkbox</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/juliandreas/vue-toggles">vue-toggles</a>
|
||
- A highly customizable and accessible toggle component</li>
|
||
<li><a href="https://github.com/vueform/toggle"><span class="citation"
|
||
data-cites="vueform/toggle">@vueform/toggle</span></a> - Vue 3 toggle
|
||
component with labels, custom slots and styling options.</li>
|
||
<li><a
|
||
href="https://github.com/smastrom/vue-collapsed">vue-collapsed</a> - Vue
|
||
3 CSS height transition from any to auto and vice versa. Accordion
|
||
ready.</li>
|
||
<li><a
|
||
href="https://github.com/keiwen/vue-enhancedCheck">vue-enhanced-check</a>
|
||
- Enhanced checkboxes / radio input + toggle, components for vue 3</li>
|
||
</ul>
|
||
<h5 id="masked-input">Masked Input</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/raidan00/vue-r-mask">vue-r-mask</a> -
|
||
Directive with template similar to javascript regular expression.</li>
|
||
<li><a
|
||
href="https://github.com/dm4t2/vue-currency-input">vue-currency-input</a>
|
||
- Easy input of currency formatted numbers for Vue.js.</li>
|
||
<li><a
|
||
href="https://github.com/RonaldJerez/vue-input-facade">vue-input-facade</a>
|
||
- A lightweight and dependency free input masking library created
|
||
specific for Vue, originally a fork of the famous <em>vue-text-mask</em>
|
||
but actively maintained and with lots of improvements after there.</li>
|
||
</ul>
|
||
<h5 id="rich-text-editing">Rich Text Editing</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/froala/vue-froala-wysiwyg">vue-froala-wysiwyg</a>
|
||
- Official VueJS plugin for Froala WYSIWIG HTML Editor.</li>
|
||
<li><a href="https://github.com/hanhdt/vue-trix">vue-trix</a> - Simple
|
||
and lightweight Trix rich-text editor for Vue.js</li>
|
||
<li><a href="https://github.com/heyscrumpy/tiptap">tiptap</a> - A
|
||
renderless and extendable rich-text editor for Vue.js</li>
|
||
<li><a
|
||
href="https://github.com/ckeditor/ckeditor5-vue">ckeditor5-vue</a> - An
|
||
official CKEditor 5 rich text editor component for Vue.js.</li>
|
||
<li><a href="https://github.com/alekswebnet/vue-quilly">vue-quilly</a> -
|
||
🪶 Tiny Vue 3 component, that helps to create Quill v2 based WYSIWYG
|
||
editors.</li>
|
||
</ul>
|
||
<h5 id="image-manipulation">Image Manipulation</h5>
|
||
<p><em>Edit images</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/xyxiao001/vue-cropper">vue-cropper</a> -
|
||
A picture clipping plugin for vue2.0</li>
|
||
<li><a href="https://github.com/jofftiquez/vue-croppie">vue-croppie</a>
|
||
- Yet another image cropper</li>
|
||
<li><a
|
||
href="https://github.com/Norserium/vue-advanced-cropper">vue-advanced-cropper</a>
|
||
- An advanced cropper that gives you opportunity to create almost any
|
||
cropper that you desire</li>
|
||
<li><a
|
||
href="https://github.com/acccccccb/vue-img-cutter">vue-img-cutter</a> -
|
||
A vue plugin for image cutting tool,it’s very convenient to use.</li>
|
||
<li><a
|
||
href="https://github.com/chengpeiquan/vue-picture-cropper">vue-picture-cropper</a>
|
||
- A simple and easy-to-use picture cropping component for Vue 3.</li>
|
||
<li><a
|
||
href="https://github.com/TaTo30/vue-polygon-cropper">vue-polygon-cropper</a>
|
||
- A simple component to crop images in polygon shapes. <a
|
||
href="https://stackblitz.com/edit/vitejs-vite-urtqie?file=src%2FApp.vue">Demo</a></li>
|
||
</ul>
|
||
<p><em>Display images</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/TwicPics/components">TwicPics</a> -
|
||
Components replacing img and video tags with lazy loading, CLS
|
||
optimization, and progressive loading out-of-the-box and enabling media
|
||
optimization and manipulation.</li>
|
||
<li><a
|
||
href="https://github.com/heyongsheng/hevue-img-preview">hevue-img-preview</a>
|
||
- Image preview for Vue 2 & 3, supports mobile and desktop. <a
|
||
href="https://heyongsheng.github.io/en/guide/profile.html">(demo)</a></li>
|
||
</ul>
|
||
<h5 id="file-upload">File Upload</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/lian-yue/vue-upload-component">vue-upload-component</a>
|
||
- Vue upload component, Multi-file upload, Upload directory, Drag
|
||
upload, Drag the directory. Supports Vue >= 2.0</li>
|
||
</ul>
|
||
<h5 id="context-menu">Context Menu</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/johndatserakis/vue-simple-context-menu">vue-simple-context-menu</a>
|
||
- Simple context-menu component built for Vue. Works well with both left
|
||
and right clicks.</li>
|
||
</ul>
|
||
<h5 id="miscellaneous-1">Miscellaneous</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/ppietris/vue-poll">vue-poll</a> - A
|
||
Vue.js component for voting</li>
|
||
<li><a href="https://github.com/gwenaelp/vue-diagrams">vue-diagrams</a>
|
||
- Diagram component for vue.js, inspired by react-diagrams</li>
|
||
<li><a
|
||
href="https://github.com/miladd3/vue-simple-password-meter">vue-simple-password-meter</a>
|
||
- Lightweight password strength meter with no dependency</li>
|
||
<li><a
|
||
href="https://github.com/wobsoriano/v-use-places-autocomplete">v-use-places-autocomplete</a>
|
||
- 📍 Vue composable for Google Maps Places Autocomplete.</li>
|
||
<li><a
|
||
href="https://github.com/webdevnerdstuff/vuetify-inline-fields">vuetify-inline-fields</a>
|
||
- Vuetify Inline Fields Component Library offers a comprehensive
|
||
collection of reusable UI components to create elegant and efficient
|
||
inline form fields within your applications.</li>
|
||
<li><a
|
||
href="https://github.com/keiwen/vue-integer-plusminus">vue-integer-plusminus</a>
|
||
- Integer input component for vue3 with increment and decrement buttons,
|
||
fitting as spinbutton, allowing keyboard functionalities</li>
|
||
</ul>
|
||
<h5 id="wizard">Wizard</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/adi518/vue-stepper-component">vue-stepper-component</a>
|
||
- A fully customizable Stepper component with Vuex support and Zero
|
||
dependencies.</li>
|
||
<li><a
|
||
href="https://github.com/parsajiravand/vue3-form-wizard">vue3-form-wizard</a>
|
||
- Vue3-form-wizard is a vue based component with no external
|
||
depenendcies which simplifies tab wizard management.</li>
|
||
</ul>
|
||
<h4 id="canvas">Canvas</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/rafaesc/vue-konva">vue-konva</a> - Vue
|
||
& Canvas - JavaScript library for drawing complex canvas graphics
|
||
using Vue.</li>
|
||
<li><a
|
||
href="https://github.com/WangShayne/vue3-signature">vue3-signature</a> -
|
||
A electronic signature component for Vue 3</li>
|
||
<li><a
|
||
href="https://github.com/WangShayne/vue-signature">vue-signature</a> - A
|
||
electronic signature component for Vue2.x</li>
|
||
</ul>
|
||
<h4 id="link-preview">Link Preview</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/nivaldomartinez/link-prevue">link-prevue</a> -
|
||
Flexible component for generate a link preview.</li>
|
||
</ul>
|
||
<h4 id="tour">Tour</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/f820602h/vue-stage-play">vue-stage-play</a> -
|
||
Step-by-step guided tour components for Vue3.</li>
|
||
</ul>
|
||
<h3 id="ui-utilities">UI Utilities</h3>
|
||
<h4 id="event-handling">Event Handling</h4>
|
||
<p><em>Handling of user events (scroll, click, key strike, …)</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/shentao/vue-global-events/">vue-global-events</a>
|
||
– A component to handle global events (like shortcuts) using Vue’s event
|
||
modifiers</li>
|
||
<li><a
|
||
href="https://github.com/Almoullim/vue-tabevents">vue-tabevents</a> –
|
||
Easy communication between other opened tabs</li>
|
||
<li><a
|
||
href="https://github.com/nickap/vue-exit-intent">vue-exit-intent</a> -
|
||
✨ Vue Composable to handle user’s Exit Intent.</li>
|
||
</ul>
|
||
<h4 id="responsive-design">Responsive Design</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/reinerBa/Vue-Responsive">vue-responsive</a>:
|
||
Vue.js(2.x) directive to hide/show HTML-elements with the Bootstrap 4, 3
|
||
or self defined breakpoints.</li>
|
||
</ul>
|
||
<h4 id="form-1">Form</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/laravel-enso/formbuilder">Form
|
||
Builder</a> - Json template based form builder, based on Vue and
|
||
Laravel.</li>
|
||
<li><a
|
||
href="https://github.com/Botre/vue-autofocus-directive">vue-autofocus-directive</a>
|
||
- Vue autofocus directive.</li>
|
||
<li><a href="https://github.com/formkit/formkit">FormKit</a> - Vue 3
|
||
form development. 10x faster. Form inputs, validation, submission, error
|
||
handling, generation, accessibility, theming, and more.</li>
|
||
<li><a href="https://github.com/dimailn/vrf">vrf</a> - Declarative
|
||
scalable ui-agnostic markup-based Vue forms.</li>
|
||
<li><a
|
||
href="https://github.com/rudnik275/tracked-instance">tracked-instance</a>
|
||
- Build large forms and track all changes.</li>
|
||
<li><a href="https://github.com/Flo0806/vorm">Vorm</a> - A dynamic,
|
||
schema-driven and fully validated form engine for Vue 3 with zero
|
||
dependencies and full slot control.</li>
|
||
<li><a href="https://github.com/mateenagy/vue-formify">VueFormify</a> -
|
||
Build powerful, type-safe forms in Vue 3.</li>
|
||
<li><a href="https://encolajs.com/enforma/">Enforma</a> - UI agnostic,
|
||
schema-ready form library for Vue 3. 30+ built-in validation rules. UI
|
||
presets for Vuetify, PrimeVue and Quasar</li>
|
||
</ul>
|
||
<h5 id="validation">Validation</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/logaretm/vee-validate">vee-validate</a>
|
||
- Simple Vue.js input validation plugin.</li>
|
||
<li><a href="https://github.com/monterail/vuelidate">vuelidate</a> -
|
||
Simple, lightweight model-based validation for Vue.js.</li>
|
||
<li><a href="https://github.com/janiskelemen/formvuelar">FormVuelar</a>
|
||
- Vue form components with server-side validation in mind</li>
|
||
<li><a
|
||
href="https://phphe.github.io/vue-final-validate/">vue-final-validate</a>
|
||
- Vue validation solution from my development experience, support
|
||
nested, async.</li>
|
||
<li><a href="https://github.com/mathix420/vuito"><span class="citation"
|
||
data-cites="vuito/vue">@vuito/vue</span></a> - Simple, lightweight,
|
||
isomorphic, and template-based validation library.</li>
|
||
<li><a
|
||
href="https://github.com/FrontLabsOfficial/vue-tiny-validate">vue-tiny-validate</a>
|
||
- Tiny (2.5KB minified) Vue Validate Composition.</li>
|
||
<li><a href="https://github.com/ealush/vest">vest</a> - 🦺 Declarative
|
||
form validation framework inspired by unit testing.</li>
|
||
<li><a href="https://github.com/Mini-ghost/vorms">vorms</a> - Vue Form
|
||
Validate with Composition API.</li>
|
||
<li><a href="https://github.com/victorgarciaesgi/regle">regle</a> - ✅
|
||
Headless form validation library for Vue.js.</li>
|
||
</ul>
|
||
<h4 id="resize">Resize</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/PxyUp/vue-not-visible">vue-not-visible</a> -
|
||
Vue directive for removing from dom (like v-if) element on screen
|
||
smaller than breakpoints.</li>
|
||
</ul>
|
||
<h4 id="scroll">Scroll</h4>
|
||
<p><em>Virtual scrollbar</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/YvesCoding/vuescroll">vuescroll</a> - A
|
||
scrolling plugin based on Vue.js for uniforming the scrolling in PC and
|
||
mobile.</li>
|
||
</ul>
|
||
<p><em>Detect when components enter viewport</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/smastrom/vue-use-active-scroll">vue-use-active-scroll</a>
|
||
- Highlight Vue 3 menu/sidebar links without compromises.</li>
|
||
</ul>
|
||
<h4 id="routing">Routing</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/vuejs/vue-router">vue-router</a> - The
|
||
official router for Vue.js.</li>
|
||
<li><a
|
||
href="https://github.com/weiquanju/v-route-generate">v-route-generate</a>
|
||
- A tool to generate routes for vue-router 4.x.</li>
|
||
<li><a href="https://github.com/kitbagjs/router">kitbag/router</a> - A
|
||
type safe router for vuejs</li>
|
||
<li><a
|
||
href="https://github.com/posva/unplugin-vue-router">unplugin-vue-router</a>
|
||
- Next Generation file based typed routing for Vue Router.</li>
|
||
</ul>
|
||
<h4 id="lazy-load">Lazy Load</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/bartdominiak/vue-lazy">vue-lazy</a> -
|
||
Lightweight Image/Picture lazyload based on Intersection API</li>
|
||
<li><a href="https://github.com/jambonn/vue-lazyload">vue3-lazyload</a>
|
||
- Vue module for lazy-loading images in your vue 3 applications.</li>
|
||
</ul>
|
||
<h4 id="pagination">Pagination</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination">laravel-vue-semantic-ui-pagination</a>
|
||
- A Vue.js 2.x pagination used with Laravel & Semantic-UI.</li>
|
||
<li><a
|
||
href="https://github.com/alziqziq/vue-paginate-al">vue-paginate-al</a> -
|
||
Vue paginate with return your data.</li>
|
||
<li><a
|
||
href="https://github.com/coderdiaz/vue-tiny-pagination">vue-tiny-pagination</a>
|
||
- A Vue component for create a tiny pagination.</li>
|
||
<li><a
|
||
href="https://github.com/gilbitron/laravel-vue-pagination">laravel-vue-pagination</a>
|
||
- A Vue.js pagination component for Laravel paginators that works with
|
||
Bootstrap.</li>
|
||
<li><a href="https://github.com/Botre/vue-lpage">vue-lpage</a> -
|
||
Low-level Vue pagination component.</li>
|
||
<li><a href="https://github.com/TerryZ/v-page">v-page</a> - A simple
|
||
pagination bar, including length Menu, i18n support, based on
|
||
Vue2.x.</li>
|
||
<li><a
|
||
href="https://github.com/Sun0fABeach/vue-use-paginator">vue-use-paginator</a>
|
||
- Vue 3 use-hook to reactively paginate data and arrange paginator
|
||
buttons. Completely renderless.</li>
|
||
<li><a href="https://github.com/lombervid/vueginate">vueginate</a> - A
|
||
simple pagination component for Vue 3</li>
|
||
<li><a
|
||
href="https://github.com/asika32764/vue-pagination/">vue-pagination</a>
|
||
- A non-style pagination with composable that can integrate with any
|
||
frameworks.</li>
|
||
</ul>
|
||
<h4 id="animation">Animation</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/asika32764/vue-animate">vue-animate</a>
|
||
- A Vue.js port of Animate.css. For use with Vue’s built-in
|
||
transitions.</li>
|
||
<li><a href="https://github.com/JefferyHus/v-odometer">v-odometer</a> -
|
||
Smoothly transitions numbers with ease. Use this library to give your
|
||
application a smooth animation, only applicable on numbers.</li>
|
||
<li><a
|
||
href="https://github.com/danieldiekmeier/vue-slide-up-down">vue-slide-up-down</a>
|
||
Like jQuery’s <code>slideUp</code> / <code>slideDown</code>, but for
|
||
Vue!</li>
|
||
<li><a href="https://github.com/Aminerman/vue-kinesis">vue-kinesis</a> A
|
||
set of components to create interactive animations</li>
|
||
<li><a href="https://github.com/megasanjay/vue3-lottie">vue3-lottie</a>
|
||
A component for importing and displaying Lottie animations in Vue 3</li>
|
||
<li><a href="https://github.com/morevm/vue-transitions"><span
|
||
class="citation"
|
||
data-cites="morev/vue-transitions">@morev/vue-transitions</span></a>
|
||
Transitions library for Vue 2 and 3 with no CSS needed</li>
|
||
<li><a href="https://github.com/formkit/auto-animate"><span
|
||
class="citation"
|
||
data-cites="formkit/auto-animate">@formkit/auto-animate</span></a> Add
|
||
motion to your apps with a single line of code</li>
|
||
<li><a href="https://github.com/Applelo/blottie">blottie</a> Lottie
|
||
component for Vue 3</li>
|
||
<li><a
|
||
href="https://github.com/jizai1125/vue-countup-v3">vue-countup-v3</a> A
|
||
Vue 3 Component for animation counting.</li>
|
||
<li><a
|
||
href="https://github.com/siaikin/vue-to-counter">vue-to-counter</a>
|
||
Scroll strings, numbers, dates like a slot machine.</li>
|
||
</ul>
|
||
<h4 id="meta-tags">Meta Tags</h4>
|
||
<p><em>Manage meta information in the document head</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/unjs/unhead">Unhead</a></li>
|
||
</ul>
|
||
<h4 id="portal">Portal</h4>
|
||
<p><em>Move a DOM node to a target DOM node</em></p>
|
||
<ul>
|
||
<li><a href="https://vuejs.org/guide/built-ins/teleport">Official: Vue
|
||
Teleport</a></li>
|
||
<li><a href="https://portal-vue.linusb.org/">portal-vue</a> - A Vue
|
||
Plugin to render your component’s template anywhere in the DOM (Works on
|
||
the virtualDOM level, doesn’t move nodes within the DOM)</li>
|
||
</ul>
|
||
<h4 id="svg">SVG</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/MMF-FE/vue-svgicon">vue-svgicon</a> - A
|
||
tool to create svg icon components. (vue 2.x).</li>
|
||
<li><a
|
||
href="https://github.com/shrpne/vue-inline-svg">vue-inline-svg</a> - Vue
|
||
component loads an SVG source dynamically and inline
|
||
<code><svg></code> so you can manipulate the style of it with CSS
|
||
or JS. (vue 2.x, vue 3.x)</li>
|
||
</ul>
|
||
<h4 id="miscellaneous-2">Miscellaneous</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/vinayakkulkarni/v-github-icon">v-github-icon</a>
|
||
- easily add “that” tiny GitHub icon on the right/left corner of your
|
||
Vue components/libraries demos’ 🤙</li>
|
||
</ul>
|
||
<h4 id="webgl">WebGL</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/vue-gl/vue-gl">VueGL</a> - Vue.js
|
||
components rendering 3D graphics reactively via three.js</li>
|
||
<li><a
|
||
href="https://github.com/AlbanCrepel/vue-displacement-slideshow">vue-displacement-slideshow</a>
|
||
- A Vue.js component that makes Webgl image displacement transitions
|
||
easier.</li>
|
||
<li><a href="https://github.com/tresjs/tres">TresJs</a> - Declarative
|
||
ThreeJS using Vue Components</li>
|
||
<li><a href="https://github.com/Tresjs/cientos">Cientos</a> - Collection
|
||
of useful helpers and fully functional, ready-made abstractions for
|
||
TresJs</li>
|
||
<li><a href="https://github.com/troisjs/trois">trois</a> - ✨ ThreeJS +
|
||
VueJS 3 + ViteJS ⚡</li>
|
||
</ul>
|
||
<h4 id="fullscreen">Fullscreen</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/mirari/vue-fullscreen">vue-fullscreen</a> - A
|
||
simple Vue component for fullscreen, support Vue2 and Vue3.</li>
|
||
</ul>
|
||
<h4 id="printing">Printing</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/siaikin/vue-to-print">vue-to-print</a> -
|
||
Print Vue 3 components in the browser. Supports Chrome, Safari, Firefox
|
||
and EDGE.</li>
|
||
</ul>
|
||
<h3 id="utilities">Utilities</h3>
|
||
<p><em>Utilities not directly related to the UI</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/vueuse/vueuse">vueuse</a> - Collection
|
||
of essential Vue Composition API utils works for Vue 2.x and 3.x.</li>
|
||
<li><a
|
||
href="https://github.com/MartinMalinda/vue-concurrency">vue-concurrency</a>
|
||
- library for encapsulating asynchronous operations and managing
|
||
concurrency for Vue and Composition API.</li>
|
||
<li><a href="https://vue-macros.dev">vue-macros</a> - Explore and extend
|
||
more macros and syntax sugar to Vue.</li>
|
||
<li><a
|
||
href="https://github.com/unplugin/unplugin-vue-components">unplugin-vue-components</a>
|
||
- 📲 On-demand components auto importing for Vue.</li>
|
||
<li><a
|
||
href="https://github.com/unplugin/unplugin-auto-import">unplugin-auto-import</a>
|
||
- Auto import Vue APIs on-demand for Vite, Webpack and Rollup.</li>
|
||
</ul>
|
||
<h4 id="typescript">Typescript</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/facing-dev/vue-facing-decorator">vue-facing-decorator</a>
|
||
- Vue 3 typescript class component decorators, like
|
||
<code>vue-property-decorator</code> in Vue 2.</li>
|
||
</ul>
|
||
<h4 id="http-requests">HTTP Requests</h4>
|
||
<p><em>Retrieve data over HTTP</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/foxbenjaminfox/vue-async-computed">vue-async-computed</a>
|
||
- Async computed properties for Vue.js.</li>
|
||
<li><a
|
||
href="https://github.com/robsontenorio/vue-api-query">vue-api-query</a>
|
||
- Elegant and simple way to build requests for REST API.</li>
|
||
<li><a href="https://github.com/Attojs/vue-request">vue-request</a> - ⚡️
|
||
Vue 3 Composable for data fetching, supports SWR, polling, error retry,
|
||
cache request, pagination, and other cool features.</li>
|
||
<li><a href="https://github.com/Kong/swrv">swrv</a> -
|
||
Stale-while-revalidate data fetching for Vue.</li>
|
||
<li><a href="https://github.com/frederikbache/vue-vroom">vue-vroom</a> -
|
||
A plugin for REST APIs, that lets you quickly generate type safe stores
|
||
and a mock API with minimal config.</li>
|
||
<li><a href="https://github.com/tanstack/query">tanstack-query</a> -
|
||
Powerful asynchronous state management.</li>
|
||
</ul>
|
||
<h4 id="i18n">i18n</h4>
|
||
<p><em>Internationalization / L10n / localization / translation</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/kazupon/vue-i18n">vue-i18n</a> -
|
||
Internationalization plugin for Vue.js.</li>
|
||
<li><a
|
||
href="https://github.com/antfu/vue-i18n-ally">vscode-vue-i18n-ally</a> -
|
||
VSCode extension for better Vue-i18n experiences.</li>
|
||
<li><a href="https://github.com/vinayakkulkarni/v-intl">v-intl</a> -
|
||
Global Intl wrapper for your awesome Vue 3 app 🔉</li>
|
||
<li><a
|
||
href="https://github.com/i7eo/v-google-translate">v-google-translate</a>
|
||
- A component that use google translate to internationalize your Vue.js
|
||
app.</li>
|
||
<li><a href="https://github.com/Demivan/fluent-vue">fluent-vue</a> -
|
||
Internationalization plugin for Vue.js (2 and 3). Vue.js integration for
|
||
Fluent.js - JavaScript implementation of Project Fluent</li>
|
||
<li><a
|
||
href="https://github.com/Aaronlamz/vue-next-i18n">vue-next-i18n</a> - A
|
||
lightweight internationalization plugin for Vue 3.</li>
|
||
<li><a
|
||
href="https://github.com/tolgee/tolgee-js/tree/main/packages/vue">tolgee/vue</a>
|
||
- Web-based localization tool enabling users to translate directly in
|
||
the Vue 3 app they develop.</li>
|
||
<li><a
|
||
href="https://github.com/intlify/vue-i18n-next">intlify/vue-i18n-next</a>
|
||
- Vue I18n for Vue 3.</li>
|
||
<li><a href="https://github.com/aymericzip/intlayer">vue-intlayer</a> -
|
||
Intlayer i18n solution for vue 3.</li>
|
||
<li><a
|
||
href="https://github.com/makio64/vue-tiny-translation">vue-tiny-translation</a>
|
||
- Super lightweight (0.32KB) reactive translation plugin for Vue 3. <a
|
||
href="https://vue-tiny-translation.netlify.app/">Demo</a></li>
|
||
<li><a href="https://loccy.dev">Loccy</a> - Effortless Vue-i18n
|
||
management in VS Code-based editors, featuring smart AI translations and
|
||
key suggestions.</li>
|
||
</ul>
|
||
<h4 id="custom-events">Custom Events</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/Cweili/vue-option-events">vue-option-events</a>
|
||
- Bring Vue.js 1 events option and $emit to Vue.js 2.</li>
|
||
</ul>
|
||
<h4 id="persistence">Persistence</h4>
|
||
<p><em>LocalStorage etc.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/yarkovaleksei/vue2-storage">vue2-storage</a>
|
||
Browser storage for Vue.js app</li>
|
||
</ul>
|
||
<h4 id="state-management">State Management</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/posva/pinia">pinia</a> - 🍍 Intuitive,
|
||
type safe, light and flexible Store for Vue using the composition api
|
||
with DevTools support.</li>
|
||
<li><a href="https://github.com/zerobias/effector">effector</a> — Fast
|
||
and powerful reactive state manager. Effector lets you write simple,
|
||
fast and type safe code and manage reactive state with ease.</li>
|
||
<li><a href="https://github.com/mediv0/v-bucket">v-bucket</a> - 📦 Fast,
|
||
Simple, and Lightweight State Management for Vue 3.0 built with
|
||
composition API, inspired by Vuex.</li>
|
||
<li><a
|
||
href="https://github.com/socotecio/vue-datatable-url-sync">vue-datatable-url-sync</a>
|
||
- Synchronize datatable options and filters with the url to keep user
|
||
preference even after refresh or navigation</li>
|
||
<li><a href="https://github.com/andrewcourtice/harlem">harlem</a> -
|
||
Simple, unopinionated, lightweight and extensible state management for
|
||
Vue 3</li>
|
||
<li><a href="https://github.com/Marcisbee/exome">exome</a> - Simple
|
||
proxy based state manager for deeply nested states.</li>
|
||
</ul>
|
||
<h5 id="mobx">Mobx</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/mobxjs/mobx-vue-lite">mobx-vue-lite</a>
|
||
- Lightweight Vue 3 bindings for MobX based on Composition API.</li>
|
||
</ul>
|
||
<h5 id="pinia">Pinia</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/wobsoriano/pinia-xstate">pinia-xstate</a> - Put
|
||
your xstate state machines into a global pinia store.</li>
|
||
<li><a href="https://github.com/CodeDredd/pinia-orm">pinia-orm</a> - The
|
||
Pinia plugin to enable Object-Relational Mapping access to the Pinia
|
||
Store. 🍍</li>
|
||
<li><a
|
||
href="https://github.com/iendeavor/pinia-plugin-persistedstate-2">pinia-persistedstate-2</a>
|
||
- Persist and rehydrate your Pinia state between page reloads.</li>
|
||
<li><a
|
||
href="https://github.com/ferreira-tb/tauri-store/tree/main/packages/plugin-pinia"><span
|
||
class="citation"
|
||
data-cites="tauri-store/pinia">@tauri-store/pinia</span></a> -
|
||
Persistent Pinia stores for Tauri.</li>
|
||
<li><a
|
||
href="https://github.com/litingyes/pinia-plugin-unstorage">pinia-plugin-unstorage</a>
|
||
- The best persistence plugin with unjs/unstorage for pinia.</li>
|
||
</ul>
|
||
<h5 id="authenticationauthorization">Authentication/Authorization</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/nachodd/vue-auth-href">vue-auth-href</a>
|
||
- A VueJS directive for downloading files that are under a protected
|
||
route schema</li>
|
||
</ul>
|
||
<h5 id="vuex-utilities">Vuex Utilities</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/mrichar1/jsonapi-vuex">jsonapi-vuex</a>
|
||
- Use a JSONAPI api with a Vuex store, with client-side
|
||
restructuring/normalization of records.</li>
|
||
<li><a
|
||
href="https://github.com/Silksofthesoul/vuex-masked-modules">vuex-masked-modules</a>
|
||
- A Vuex plugin put data structure of the module in localStorage, with
|
||
the ability to mask or encrypt the data to make it difficult to explore.
|
||
Designed for Vue 3 and Vuex 4.</li>
|
||
</ul>
|
||
<h4 id="graphql">GraphQL</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/Akryum/vue-apollo">vue-apollo</a> -
|
||
Apollo/GraphQL integration for VueJS.</li>
|
||
<li><a
|
||
href="https://github.com/storipress/apollo-vue-devtools">apollo-vue-devtools</a>
|
||
- Apollo integration for Vue-Devtools to inspect GraphQL queries in the
|
||
vue-devtools timeline</li>
|
||
</ul>
|
||
<h4 id="code-style">Code Style</h4>
|
||
<p><em>Improve readability of code</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/dwightjack/vue-types">vue-types</a> -
|
||
Vue Prop Types definitions.</li>
|
||
<li><a
|
||
href="https://github.com/vuejs/eslint-plugin-vue">eslint-plugin-vue</a>
|
||
- Eslint plugin for Vue.js projects.</li>
|
||
<li><a
|
||
href="https://github.com/FloEdelmann/vue-ts-types">vue-ts-types</a> -
|
||
Lightweight TypeScript-first Vue prop type definitions.</li>
|
||
</ul>
|
||
<h4 id="css">CSS</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/houd1ni/fela-vue">fela-vue</a> -
|
||
CSS-IN-JS mixin for Vue designed for flexibility yet team-oriented.</li>
|
||
</ul>
|
||
<h4 id="asset-management">Asset Management</h4>
|
||
<p><em>Utilities for building / compiling / bundling / loading
|
||
assets</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/vuejs/vue-loader">vue-loader</a> -
|
||
Webpack loader for Vue.js components.</li>
|
||
<li><a
|
||
href="https://github.com/skyrpex/vue-jsx-hot-loader">vue-jsx-hot-loader</a>
|
||
- Enable HMR for Vue.js components with JSX render functions.</li>
|
||
<li><a
|
||
href="https://github.com/jpkleemans/vite-svg-loader">vite-svg-loader</a>
|
||
- Vite plugin to load SVG files as Vue components</li>
|
||
<li><a
|
||
href="https://github.com/Kaciras/vite-plugin-svg-sfc">vite-plugin-svg-sfc</a>
|
||
Vite plugin to load SVG file as vue SFC, supports HMR &
|
||
<style>
|
||
block.</li>
|
||
</ul>
|
||
<h4 id="page-navigation">Page Navigation</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/hezhongfeng/vue-page-stack">vue-page-stack</a>
|
||
- Routing and navigation for your Vue SPA. Vue 单页应用导航管理器</li>
|
||
</ul>
|
||
<h4 id="miscellaneous-3">Miscellaneous</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/vue-styleguidist/vue-live">vue-live</a>
|
||
- A component to demo components, inspired by react-live.</li>
|
||
<li><a href="https://github.com/ecosia/vue-safe-html">vue-safe-html</a>
|
||
- Vue.js directive which renders sanitised HTML dynamically.</li>
|
||
<li><a href="https://github.com/skirtles-code/vue-vnode-utils"><span
|
||
class="citation"
|
||
data-cites="skirtle/vue-vnode-utils">@skirtle/vue-vnode-utils</span></a>
|
||
- Helper functions for working with slot VNodes inside render functions
|
||
in Vue 3</li>
|
||
</ul>
|
||
<h4 id="web-sockets">Web Sockets</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/probil/vue-socket.io-extended">vue-socket.io-extended</a>
|
||
- Socket.io bindings for Vue.js and Vuex</li>
|
||
</ul>
|
||
<h4 id="payment">Payment</h4>
|
||
<p>Payment utilities.</p>
|
||
<h5 id="stripe">Stripe</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/jofftiquez/vue-stripe-checkout">vue-stripe-checkout</a>
|
||
- A simple vue plugin for Stripe checkout.</li>
|
||
<li><a
|
||
href="https://github.com/ectoflow/vue-stripe-js">vue-stripe-js</a> - Vue
|
||
3 components for Stripe.js</li>
|
||
</ul>
|
||
<h3 id="integrations">Integrations</h3>
|
||
<p><em>Integrate with services or other frameworks</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/DanSnow/vue-recaptcha">vue-recaptcha</a>
|
||
- Google reCAPTCHA component for Vue.js</li>
|
||
<li><a href="https://github.com/nigeltiany/vuefire">vuefire</a> -
|
||
Firebase for VueJS and Vuex</li>
|
||
<li><a
|
||
href="https://github.com/technowledgy/vue-postgrest">vue-postgrest</a> -
|
||
Vue.js integration for postgREST: flexible, powerful and easy to
|
||
use.</li>
|
||
<li><a href="https://github.com/DannyFeliz/vue-tweet">vue-tweet</a> -
|
||
Vue 3 component that let you embed tweets in your App by only giving the
|
||
tweet id</li>
|
||
<li><a href="https://github.com/deptyped/vue-telegram">vue-tg</a> -
|
||
Telegram Web Apps integration for Vue 3.</li>
|
||
</ul>
|
||
<h4 id="vue-cli-plugins">Vue CLI Plugins</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/sanyu1225/vue-cli-plugin-chrome-extension-cli">vue-cli-plugin-chrome-extension-cli</a>
|
||
- Vue CLI Plugin generate chrome extension template</li>
|
||
</ul>
|
||
<h5 id="google-analytics">Google Analytics</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/MatteoGabriele/vue-gtag">vue-gtag</a> -
|
||
Global Site Tag plugin for Vue</li>
|
||
</ul>
|
||
<h3 id="dev-tools">Dev Tools</h3>
|
||
<ul>
|
||
<li><a href="https://storybook.js.org">Storybook</a> - The UI
|
||
Development Environment. works with v3.2+ later.</li>
|
||
<li><a
|
||
href="https://chrome.google.com/webstore/detail/font-awesome-icon-finder/kjejboahkcobalmgldloeinebmbomgog">Font
|
||
Awesome Finder</a> - Chrome extension to search, preview and choose Font
|
||
Awesome icons and copy the selected icon HTML code & Unicode to
|
||
clipboard.</li>
|
||
<li><a href="https://github.com/teambit/bit">Bit</a> - Manage and reuse
|
||
<code>vue</code> components between projects. Easily isolate and share
|
||
components from any project without changing its source code, organize
|
||
curated collections and install in different projects.</li>
|
||
<li><a href="https://github.com/rrd108/vue-mess-detector">Vue Mess
|
||
Detector</a> - A static code analysis tool for 👉 detecting code smells
|
||
and best practice violations in Vue.js and Nuxt.js projects</li>
|
||
</ul>
|
||
<h4 id="inspect">Inspect</h4>
|
||
<p><em>Inspecting & debugging</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/vuejs/devtools">devtools</a> - Chrome
|
||
devtools extension for debugging Vue.js applications.</li>
|
||
<li><a
|
||
href="https://github.com/webfansplz/vite-plugin-vue-inspector">vite-plugin-vue-inspector</a>
|
||
- jump to editor source code while click the element of browser
|
||
automatically.</li>
|
||
</ul>
|
||
<h4 id="docs">Docs</h4>
|
||
<p><em>Create documentation</em></p>
|
||
<ul>
|
||
<li><a href="https://vuejs-tips.github.io/vuex-cheatsheet">Vuex
|
||
CheatSheet</a> - Complete Interactive Vuex API.</li>
|
||
<li><a
|
||
href="https://github.com/vue-styleguidist/vue-styleguidist">vue-styleguidist</a>
|
||
- A style guide generator for Vue components with a living style
|
||
guide.</li>
|
||
<li><a href="https://github.com/vuese/vuese">vuese</a> - One-stop
|
||
solution for vue component documentation.</li>
|
||
<li><a href="https://vue-cheatsheet.themeselection.com/">Vue
|
||
Cheatsheet</a> - The only Vue cheatsheet you will ever need</li>
|
||
</ul>
|
||
<h4 id="test">Test</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/crishellco/vue-hubble">vue-hubble</a> -
|
||
A better way to select elements for UI testing in Vue.</li>
|
||
<li><a href="https://github.com/testing-library/vue-testing-library">Vue
|
||
Testing Library</a> - Simple and complete testing utilities that
|
||
encourage good testing practices. Based on DOM Testing Library and built
|
||
upon the official Vue Test Utils.</li>
|
||
<li><a
|
||
href="https://github.com/tjw-lint/vue3-snapshot-serializer">jest-serializer-vue-tjw</a>
|
||
- Improved formatting of Jest Snapshots</li>
|
||
<li><a href="https://github.com/vitest-dev/vitest">vitest</a> - Next
|
||
generation testing framework powered by Vite.</li>
|
||
</ul>
|
||
<h4 id="source-code-editing">Source Code Editing</h4>
|
||
<p><em>Text editor plugins</em></p>
|
||
<h5 id="vim">Vim</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/posva/vim-vue">Vim Vue</a> - Syntax
|
||
Highlight for Vue.js components.</li>
|
||
</ul>
|
||
<h5 id="visual-studio-code">Visual Studio Code</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/vuejs/language-tools">Vue Language Tools
|
||
(Volar)</a> - ⚡The Fastest Vue Language Support Extension</li>
|
||
<li><a href="https://github.com/sdras/vue-vscode-snippets">Vue VSCode
|
||
Snippets</a> - Snippets that will supercharge your Vue workflow.</li>
|
||
</ul>
|
||
<h5 id="intellij">Intellij</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/JetBrains/intellij-plugins/tree/master/vuejs">Vue.js
|
||
support for WebStorm</a>, IntelliJ IDEA, PhpStorm, PyCharm &
|
||
RubyMine – official Vue.js support by JetBrains</li>
|
||
</ul>
|
||
<h5 id="emacs">Emacs</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/CodeFalling/vue-mode">Vue Mode</a> -
|
||
Emacs major mode for vue.js.</li>
|
||
</ul>
|
||
<h3 id="scaffold">Scaffold</h3>
|
||
<p><em>Scaffold / boilerplate / seed / starter kits / stack ensemble /
|
||
Yeoman generator</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/vitejs/vite">Vite</a> - Next generation
|
||
frontend tooling. It’s fast!</li>
|
||
<li><a href="https://github.com/vuejs/create-vue">Create Vue</a></li>
|
||
<li><a href="https://github.com/vuesion/vuesion">vuesion</a> - Vuesion
|
||
is a boilerplate that helps product teams build faster than ever with
|
||
fewer headaches and modern best practices across engineering &
|
||
design.</li>
|
||
<li><a href="https://scaffoldhub.io">ScaffoldHub.io</a> - Generate full
|
||
Vue applications with SQL, MongoDB or Firebase Firestore databases.</li>
|
||
<li><a href="https://christiankienle.github.io/vueplay/">VuePlay</a> -
|
||
Generate disposable Vue playgrounds in seconds. Allows you to test
|
||
things quickly.</li>
|
||
<li><a href="https://github.com/madlabsinc/mevn-cli">Mevn-CLI</a> -
|
||
Light speed setup for MEVN stack based apps.</li>
|
||
<li><a
|
||
href="https://github.com/chrisvfritz/vue-enterprise-boilerplate">vue-enterprise-boilerplate</a>
|
||
- An ever-evolving, very opinionated architecture and dev environment
|
||
for new Vue SPA projects using Vue CLI 3.</li>
|
||
<li><a
|
||
href="https://shershen08.github.io/vue-starters-directory/">vue-starters-directory</a>
|
||
- Search for available scaffold projects and starter kits for VueJS.
|
||
Features search and github stats are available.</li>
|
||
<li><a
|
||
href="https://github.com/M-Media-Group/Vue3-SPA-starter-template">Vue3-SPA-starter-template</a>
|
||
- A starter kit with Router, Pinia, i18n, Stripe, Event Bus, SEO meta
|
||
and schema tag handling, and more.</li>
|
||
<li><a
|
||
href="https://github.com/NativeScript/vue-x-platforms">vue-x-platforms</a>
|
||
- Vue running on Web, iOS, Android and Vision Pro.</li>
|
||
<li><a
|
||
href="https://github.com/mustafacagri/mevn-boilerplate">mevn-boilerplate</a>
|
||
- ⭐️ the most comprehensive mevn stack boilerplate. ⭐️ mongodb - express
|
||
- vue 3 (admin dashboard) - nodejs - nuxt 3 (client) boilerplate (pinia,
|
||
tiptap, slug, vuetify and vuexy and more…) 🎉</li>
|
||
<li><a
|
||
href="https://github.com/Nagell/monorepo_template">monorepo-template</a>
|
||
- 🗂️ Vue 3 monorepo template with pnpm, Nx, Vite, Tailwind CSS,
|
||
Storybook, TypeScript, and ready-to-use shared libraries.</li>
|
||
</ul>
|
||
<h4 id="universal">Universal</h4>
|
||
<p><em>Render Vue application to HTML on the server and to the DOM in
|
||
the browser</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/GrabarzUndPartner/gp-vue-boilerplate">Vue.js/Nuxt.js
|
||
full-featured boilerplate</a> - professional agency frontend template
|
||
for building fast, robust, and adaptable web apps or sites by
|
||
vuejs/nuxtjs.</li>
|
||
</ul>
|
||
<h4 id="electron">Electron</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/umbrella22/electron-vite-template">electron-vite-template</a>
|
||
- A modern desktop application project template with Vue 3, Vite &
|
||
Electron. <strong>It’s fast!</strong></li>
|
||
<li><a href="https://github.com/jooy2/vutron">Vutron</a> - Quick start
|
||
templates for Vite + Electron + Vue 3 + Vuetify + TypeScript.</li>
|
||
<li><a
|
||
href="https://github.com/electron-vite/electron-vite-vue">electron-vite-vue</a>
|
||
- Really simple Electron + Vite + Vue boilerplate.</li>
|
||
</ul>
|
||
<h3 id="prerendering">Prerendering</h3>
|
||
<ul>
|
||
<li><p><a href="https://github.com/fmfe/genesis">vue-genesis</a> -
|
||
🔥Micro front end, micro service and lightweight solution based on Vue
|
||
SSR🔥</p>
|
||
<!-- md-parser-end -->
|
||
<p><br/> <br/> <br/></p></li>
|
||
</ul>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="https://i.creativecommons.org/p/zero/1.0/88x31.png"
|
||
alt="CC0" /></a></p>
|
||
<p><a href="https://github.com/vuejs/awesome-vue">vue.md Github</a></p>
|