Top 23 TypeScript Vue Projects
-
storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Project mention: Build, test and release a React component library with Storybook | dev.to | 2021-03-06Storybook
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
A hybrid app is basically one that can run on iOS and Android (and web and desktop sometimes) using the same code base, which really goes a long way in terms of cost and maintenance. Good hybrid app technologies are Flutter, React Native or Ionic. I recommend and work with Flutter.
-
Scout
Get performance insights in less than 4 minutes. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
vuetify
🐉 Material Component Framework for Vue
The Vuetify 3 alpha has arrived! This release includes multiple updated components, the new theme, layout, and icon systems, and more! Additional information is in the release notes: https://github.com/vuetifyjs/vuetify/releases/tag/v3.0.0-alpha.0
-
NativeScript
NativeScript empowers you to access native api's from JavaScript directly. Angular, Vue, Svelte, React and you name it compatible.
Project mention: Yet another components library recommendation thread... | reddit.com/r/Angular2 | 2021-02-28It's worth mentioning that I eventually hope to use NativeScript to convert my Angular web application to a native mobile application (though I've yet to test this out).
-
vant
Lightweight Mobile UI Components built on Vue
-
vue-awesome-swiper
🏆 Swiper component for @vuejs
vue-awesome-swiper is a slider component built with vue and makes setting up a slider easier on frameworks such as Vue and Nuxt. Built By: Surmon China Url: vue-awesome-swiper
-
vee-validate
✅ Form Validation for Vue.js
-
Vue Storefront
The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license.
Website: https://www.vuestorefront.io GitHub: https://github.com/DivanteLtd/vue-storefront GitHub Stars: 5.8k
-
rematch
A Redux Framework
Rematch has been created a few years ago by Shawn McKay and Blair Bodnar, a pair of canadian programmers. It's a tiny but super powerful wrapper around Redux that reduces tons of boilerplate that Redux needs to operate.
-
API Platform
Create REST and GraphQL APIs, scaffold Jamstack webapps, stream changes in real-time.
Project mention: docker-compose : node_modules inside container not synced with host | reddit.com/r/docker | 2021-02-24I'm using API platform official distribution with docker-compose and I have an issue with yarn and my node_modules folder not being in sync.
-
vetur
Vue tooling for VS Code.
Now, we can create regular ol' Vue SFCs, or single file components. By creating the whole component in one file, we get the flexibility of thinking of our components as one functional unit made up of HTML, JavaScript, and CSS. We can also write components in TypeScript or SASS if we want to. We can also get syntax highlighting since SFCs end up being fundamentally HTML documents. And with VSCode plugins like (Vetur)[https://vuejs.github.io/vetur/], development in SFCs has a lot of benefits going for it.
-
vue-property-decorator
Vue.js and Property Decorator
The next thing to tackle for a scalable application is, that we want to have a well written component that is easy to read and to reuse. Vue components are usually single file, which has it's benefits (e.g. if you want to change some css, and then html and oh, you also need to introduce this property in typescript...). It's also easier to maintain some code standard about how large a component should possibly become, if you had single file components (e.g. >250loc => linter error). To additionally increase readability, I like to use typescript class components flavoured with vue property decorators.
-
Quick Start
🍔 A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 🌈
-
vueuse
Collection of essential Vue Composition Utilities for Vue 2 and 3
// Same implementation as https://github.com/vueuse/vueuse/blob/main/packages/core/onClickOutside/index.ts import { watch, unref, onUnmounted } from 'vue'; const EVENTS = ['mousedown', 'touchstart', 'pointerdown']; function unrefElement(elRef) { return unref(elRef)?.$el ?? unref(elRef); } function useEventListener(...args) { let target; let event; let listener; let options; [target, event, listener, options] = args; if (!target) return; let cleanup = () => {}; watch( () => unref(target), el => { cleanup(); if (!el) return; el.addEventListener(event, listener, options); cleanup = () => { el.removeEventListener(event, listener, options); cleanup = noop; }; }, { immediate: true }, ); onUnmounted(stop); return stop; } export default function useClickOutside() { function onClickOutside(target, callback) { const listener = event => { const el = unrefElement(target); if (!el) return; if (el === event.target || event.composedPath().includes(el)) return; callback(event); }; let disposables = EVENTS.map(event => useEventListener(window, event, listener, { passive: true }), ); const stop = () => { disposables.forEach(stop => stop()); disposables = []; }; onUnmounted(stop); return stop; } return { onClickOutside, }; }
-
vuefire
🔥 Firebase bindings for Vue.js & Vuex
Project mention: Component Is Not Updating After Vuex State Change | reddit.com/r/vuejs | 2021-02-08What about this? https://github.com/vuejs/vuefire/issues/999
-
surveyjs
JavaScript Survey and Form Library
-
Statusfy
A Marvelous Open Source Status Page System
-
vditor
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
Project mention: Open source + Self-hosted + True WYSIWYG (not split-view) + Mobile responsive + Table support + Bulk import/export .md files + Folder structure & tag support + Email login/registration support | reddit.com/r/Markdown | 2021-02-21The vditor is an open Source Project, these cases are based on vditor.
-
vuex-orm
The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.
Project mention: Leggo my DAO! How to you manage your backend model? | reddit.com/r/Nuxt | 2021-03-02could peep this https://github.com/vuex-orm/vuex-orm
-
vue-styleguidist
Created from react styleguidist for Vue Components with a living style guide
Most of the frontend stack at Ecosia is built around with Vue. We also had a design style-guide built using Vue Styleguidist. Our style-guide is essentially a list of all the Vue components used across our frontend applications.
-
Misskey
🌎 A interplanetary blogging platform 🚀
-
vuex-class
Binding helpers for Vuex and vue-class-component
Project mention: Aprendizados de 1 ano de projeto em vue.js com escopo ultra caótico | dev.to | 2021-01-26Vue2 não é muito bom pra lidar com typescript de forma vanilla, então o próprio core team e a comunidade criaram soluções pra você ter sintaxes alternativas (nada muito diferente) que suportam os toolings mais modernos e que tiveram maior adoção no decorrer dos últimos anos, como o vue-class-component, vue-property-decorator e o vuex-class. O caso mais notório de ferramenta que tira proveito disso, com certeza é o typescript. Com essas tecnologias, usar typescript é 100% possível, e usando essas sintaxes alternativas, diria até que o código fica mais enxuto e claro do que o vue sem nada (@Action do vuex-class, pra mim, tem uma sintaxe mais agradável que mapActions do vuex cru, por exemplo). Começamos o projeto sem, mas o Brunão começou a implementar usando isso e com uma curva bem pequena de aprendizado, aderimos felizes ao novo método de escrever componentes vue2.
-
vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Vime: https://github.com/vime-js/vime
Index
What are some of the best open-source Vue projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | storybook | 58,964 |
2 | Ionic Framework | 43,147 |
3 | vuetify | 29,692 |
4 | NativeScript | 19,784 |
5 | vant | 16,840 |
6 | vue-awesome-swiper | 11,210 |
7 | vee-validate | 8,305 |
8 | Vue Storefront | 8,179 |
9 | rematch | 6,984 |
10 | API Platform | 6,531 |
11 | vetur | 4,971 |
12 | vue-property-decorator | 4,544 |
13 | Quick Start | 3,774 |
14 | vueuse | 3,274 |
15 | vuefire | 3,093 |
16 | surveyjs | 2,790 |
17 | Statusfy | 2,252 |
18 | vditor | 2,205 |
19 | vuex-orm | 2,145 |
20 | vue-styleguidist | 1,913 |
21 | Misskey | 1,656 |
22 | vuex-class | 1,582 |
23 | vime | 1,499 |