avatar
    Robin ScholzDecember 19, 2024

    Vue Equipment: Our Toolkit for Modern Frontends

    Engineering
    3 min

    Vue Equipment is a collection of ready-to-use plugins and composables for building modern web applications. We are pretty close to releasing a first stable version of it.

    The Current Landscape

    Compared to a decade ago web development has become simultaneously increasingly complex as well as more accessible than ever. There are now plenty of Javascript Frameworks to choose from, most of which have been around for quite some time, with the majority of them having matured into stable offerings.

    While our team has dabbled with React and Svelte in the past, we started favouring Vue early on, due to its simple syntax, familiar feel, the concept of single file components and its excellent documentation. When Nuxt was released in 2018, it not only validated our initial choice but also provided even greater confidence in the decision we had made.

    The Ecosystem

    Vue and Nuxt undoubtedly excel in many areas, but we feel the ecosystem has always been lacking when compared to React, which has a larger user base, and comes with a lot more options to choose from when it comes to plugins, components and composables.

    And so over the years, we have found ourselves facing a common problem: driven by the lack of options in the Vue ecosystem, we needed to implement solutions from the ground-up, over and over again.

    Closing the Gap

    While projects like VueUse and various Nuxt modules have started closing the gap over the past years, we feel that there is still some catching up to do.

    Vue Equipment is our attempt to do just that, make our lives easier in the process, and hopefully by extension, yours too. So what is it?

    Vue Equipment is a collection of ready-to-use essentials for building modern web applications. We have distilled what we’ve learned over several years from developing various custom solutions into an expansive package of opinionated yet flexible plugins and composables.

    The Details

    Vue Equipment can be installed as a standalone Vue plugin or a fully configurable Nuxt module. All components come basically unstyled, except for any essential CSS properties, which have been implemented as CSS variables and can easily be overwritten. All components and composables can be imported separately. In a Nuxt project, the module can quickly be configured to only auto-import what is needed.

    The whole library is built around the principle of inversion of control. In order to produce stable, maintainable code, we’ve have slimmed down the plugins’ APIs as much as possible. We aim to provide you with the possibility to bend each component to your will and use Vue Equipment in creative ways beyond our own imagination.

    What’s Next?

    In the last year, we’ve been busy dogfooding Vue Equipment for various projects, iterating, refactoring, and testing its mettle in real-world scenarios. We think we have finally arrived at a version that we are happy with. Our priority now is building out comprehensive documentation for the whole library, followed by a stable release candidate sometime in Q1 2025.

    Vue Equipment was always intended to be a tool we use ourselves and we will continue to do so. This means you can expect on-going maintenance and further additions to the library for the foreseeable future.

    Even though we mostly work with Vue, we’ve kept an eye on the React ecosystem and have been massively inspired by projects such as Sonner; Vaul; ⌘K; Radix; shadcn/ui, and the likes. By open-sourcing Vue Equipment, we hope to give back to a community that has enabled us to earn a living for the past decade.