Vue recently presented the Composition API RFC, a new API for writing #vue components inspired by #react hooks but with some interesting differences that I will discuss in this post. This RFC started with a previous version called Function-based Component API that received lots of criticism from certain part of the community, based on the fear of Vue starting to be more complicated and less like the simple library that people liked in the first place.

So, let's get started studying the different aspects of React Hooks and Vue Composition API and remark certain differences that we might find along the way.

⚡Breaking news!

#vue v3 is now available for public: https://github.com/vuejs/vue-next

​​To use optional chaining & nullish coalescing in #vue files today:
- Run yarn add typescript@beta
- Set "vetur.useWorkspaceDependencies": true

Useful for many DOM operations. For example,
querySelector => Element | null
textContent => string | null | undefined

https://github.com/vuejs/vetur

​​Awesome list of #js and #vue related projects.

https://awesomejs.dev/

Vue.js stands out from other frameworks for its intuitive reactivity. #vue 3 composition api is going to removing some limitations in Vue 2 and provide a more explicit api.

Vue 3 introduces: reactive(), ref(), and computed(). Author explains why reactive() is bad and other two are good.

​​A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with #vue and also fully responsive.

https://github.com/muhammederdem/vue-interactive-paycard

Using TailwindCSS with Vue functional components.

In this article, we identify potential pitfalls when using utility-first #css frameworks and how to avoid them. Most importantly, we find out how to use #vue functional components to create abstractions for repeating patterns like cards and headlines, for example.

https://markus.oberlehner.net/blog/reusable-functional-vue-components-with-tailwind-css/

​​Fast, native and thread-safe HTML/CSS/Python GUI framework.

You can literally write #vue code in #python. Sounds exiting?..

https://www.plynth.net/

API request builder - A free, fast, and beautiful alternative to Postman.

Helps you create your requests faster, saving you precious time on your development.

https://github.com/liyasthomas/postwoman

#vue #js

​​A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance.

With built-in integrations for #vue, #react, #angular, and #svelte

https://github.com/naver/egjs-infinitegrid

​​massCode is a free and open source code snippets manager for developers. Inspired by applications like SnippetsLab and Quiver.

https://github.com/antonreshetov/massCode

#vue #js

​​Type Router: a flexible, type safe routing library.

First and foremost Type Route strives for excellent TypeScript support. An API designed for static analysis not only means the compiler has your back but also enables your editor to provide intelligent hints and warnings as you code.

https://www.type-route.org/

I had a blog post last year about problems in typing Vue and it includes router as one of the weakest points: https://sobolevn.me/2019/06/really-typing-vue

I am glad that people are working on it!

#vue #react #ts

​​Simple and complete #js testing utilities that encourage good testing practices.

Suitable for #vue, #react, and almost any other library.

https://testing-library.com/

​​Experimental no-bundle dev server for #vue SFCs.

The primary difference is that for vite there is no bundling during development. The ES Import syntax in your source code is served directly to the browser, and the browser parses them via native <script module> support, making HTTP requests for each import. The dev server intercepts the requests and performs code transforms if necessary. For example, an import to a vue file is compiled on the fly right before it's sent back to the browser.

There are a few advantages of this approach:
- Since there is no bundling work to be done, the server cold start is extremely fast.
- Code is compiled on demand, so only code actually imported on the current screen is compiled. You don't have to wait until your entire app to be bundled to start developing. This can be a huge difference in apps with dozens of screens.
- Hot module replacement (HMR) performance is decoupled from the total number of modules. This makes HMR consistently fast no matter how big your app is.

vite is highly experimental at this stage and is not suitable for production use, but we hope to one day make it so.

https://github.com/vuejs/vite