awesome-vue VS vue-property-decorator

Vue’s community provides several custom solutions and packages for Vue 2 and Vue 3. Some great third-party libraries from the Vue ecosystem include Pinia for state management and vee-validate for form validation.

I know Quasar, Vuetify, PrimeVue, Tailwind UI, and most of the stuff here https://github.com/vuejs/awesome-vue

I have no clue what exact solution would only favor react, there are enough implementations for vue and even if not, most of the greater players have generic solutions, not vendor-locked integrations.

But you can just look at Awesome-Vue or Awesome-Vue-3 to find more stuff like this. There are a lot of options out there. Especially if you go piece-meal. Why pick an entire component library just because you need a calendar, just use Vue-Cal and override the CSS as needed to make it fit in with your app.

You may be able to find some stuff on https://github.com/vuejs/awesome-vue, including lots of projects, UI libraries, etc.

A vite successor? Joking, there are a lot of components and libs that are great but need actual contributors.

Awesome Vue

You can find awesome-vue on GitHub: https://github.com/vuejs/awesome-vue

In my last project these two were used a lot: https://github.com/kaorun343/vue-property-decorator and https://class-component.vuejs.org/

Designed for vue 3, do the same work like vue-class-component and vue-property-decorator.

When I was using Vue2 along with vue-class-component and vue-property-decorator it was easy to synchronize v-models between components simply using @ModelSync(). When Vue 3 came out with its Composition API another way was needed to achieve the same result as if Class Component was used.

This is still not better than Vue Class Component & Vue Property Decorator . Very easy syntax, looks like any other OOP language, and looks so much cleaner.

vue-property-decorator: This library works hand in hand with vue-class-component so that you can define properties/methods on your class for things like watchers, properties, etc:

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.

Here, we will cover only the basics, the idea is in the future to create an article on Vue-Property-Decorator that complements the usage of this library.

Vue2 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.