When we started working on Vue Equipment, we wanted to create a package that is compatible with any codebase written in Vue.

Since most of our client-facing work over the past years has been implemented with Nuxt, we also wanted to provide first class support for the framework. Importing and using the various parts of Vue Equipment should feel as seamless as possible.

The goal was to provide an easily configurable Nuxt module, that would granularly import composables and plugins according to the given configuration and avoid bloating the bundle-size.

Vue Equipment’s Architecture

Vue Equipment is split internally into three different categories: composables, plugins and utils, with plugins housing the majority of the codebase.

Composables are standalone functions. According to Vue’s documentation, a composable “is a function that leverages Vue’s Composition API to encapsulate and reuse stateful logic.”

Utils contain various utility functions, TypeScript helpers and CSS – all of which can be imported directly as needed.

Plugins are usually made up from a combination of internal as well as exposed composables and components that depend on each other in some type of way. The majority of what’s included with Vue Equipment lives in here.

The Problem

To create a seamless experience in Vue we opted to provide a Vue plugin for each of the plugins. The goal for all plugins was to auto import their components and expose all necessary composables, types and symbols.

We later set out to provide the same level of first class support for Nuxt by including a Nuxt module.

While trying to come up with a fitting solution, we hit a road block – no straightforward way to install Vue plugins within a Nuxt module seemed to exist, which left us pondering.

The Solution

When we confronted Daniel Roe, part of the Nuxt core team, with our problem, he proposed the idea to ship a Nuxt module that would auto install internal Nuxt modules, one for each included plugin.

In return the internal Nuxt modules – much like the already authored Vue plugins – would auto install components and composables and make them globally available.

Nuxt provides a Module Author Guide, a Starter Kit and the `@nuxt/kit` package, which made authoring the nested modules a fairly straightforward task.

When adding new plugins, we mostly copy paste some code, change a few variables and names and call it a day.

It should be mentioned, that Daniel Roe recently pointed out that a solution for installing Vue plugins within Nuxt modules exist. He also stated authoring Nuxt modules should be the preferred solution in regards to DX.

In Conclusion

We have tested the Nuxt module in a variety of projects over the last two years and feel that our solution is pretty solid. Thanks to the module, Vue Equipment can be quickly implemented and configured with full type safety in any Nuxt project.