Supercharge Your Vue App Development with Nx Monorepo

Vue 3 continues to gain traction in the web development world. With its modern approach to data reactivity, composing components behaviors, and many other features, Vue 3 should have this kind of attention. The only aspect of Vue that needs a bit of help is enterprise workspace tooling. That’s where Nrwl’s monorepo tool, Nx, could come in and supercharge any Vue environment!

The Power of the Monorepo in Nx

When it comes to source code, leveraging a “monorepo” has also been a growing trend in the software ecosystem. Imagine a world where there’s no need to set up build/deploy pipelines to share code. The barrier to entry to reuse code becomes a lot smaller. The hope of making sharing code easier unlocks the fast path to production. There is no shortage of other reasons why a monorepo strategy is attractive, and it’s best to explore them to see if it fits your needs.

That’s not to say monorepos are a free win, as problems and inefficiencies can arise. A robust, battled-tested tool helps resolve those problems, and Nx is that tool.

Nx provides a robust architecture for generating code by enforcing coding styles and boundaries across the monorepo, and extending Nx for those unique use cases. Best of all, switching to a monorepo is as seamless (or often far better) a developer experience than managing separate code bases ever was.

Getting Started with Vite

This article focuses on a Vue 3 app in an Nx monorepo using Vite. Generally, it’s best to migrate to Vite as the Vue CLI is deprecated.

VueSchool has a fantastic article to migrate to Vite; check it out! As a quick tip: the hardest part of the migration from Webpack to Vite might be finding Vite-compatible dependencies or figuring out the right Vite plugin configuration to support the existing third-party dependencies.

Another thing: Nx version 16 introduced new scoped packages (@nx/). This is a breaking change for the existing plugins, so we will focus on the latest 15 version. There will be updates to this article when changes have been implemented.

Key Vue Plugins Worth Considering

Nx provides first-party support for a lot of frontend and backend frameworks. They do not officially support Vue yet, however. Luckily, Vue has a strong open-source community that has already developed Nx support!

At the time of writing, there are two plugins worth investigating: nx-vue3-vite and @nxext/vue. There are some pros and cons to using either plugin. They both have active support. They both provide application and library project code generation. They both have their own Vite executor but are actively moving to Nx's first-party executor. The differences are:

• @nxext/vue is not production ready at the time of writing this article. To make it production ready, the community around this plugin wants to ensure the generators meet some basic level of needs and that projects are generated with Nx’s Vite executor.

• nx-vue3-vite has a strongly opinionated approach toward application code generation. This plugin generates Vuex and Cypress setup as part of creating the application project. It may not be a big con if there were plans to use these dependencies.

The biggest problem for either of these plugins is no dependency graph support for Vue files. Determining the dependency graph is extremely important so Nx doesn’t have to waste time doing work when a change doesn’t impact a project, but doesn’t prevent you from progressing forward with Nx.

Overall, however, as more and more people adopt Vue and want to use it in an Nx monorepo, the more likely these issues will be resolved. Using either of these plugins is better than trying to start from nothing as coming up with code-generation strategies is difficult.

These plugins will get the ball rolling for any project.

Nx Monorepo and Vue: Bringing Your App to Life, Step by Step

We’re going to work from a new Nx workspace, create a Vue application, configure the project to use @nx/vite, and finally copy an existing project into the newly created application. The steps are referenced in the Nx docs.

Create the Workspace

To start, create an empty workspace with the following command:

Work your way through the process of setting up your workspace. My recommendation for some initial settings are Integrated workspaces , ts, and disable the distributed cache (this is an awesome feature from Nrwl called Nx Cloud, but we aren’t going to cover it here).

Once Nx finishes setting up the initial workspace, install nx-vue3-vite, @nrwl/jest@15, @nrwl/vite@15. As @nxext/vue isn’t production ready just yet, we’re going to focus on nx-vue3-vite.

Generate the Application

Generating an app is easy enough. Conceptually, you execute the function that you want to use to generate code, in Nx we call this the generator. We are going to use the generator called vue3-vite from nx-vue3-vite. Execute the generator with the following command:

{{nameofApp}} could be any string you want, just needs to be easily reference for future commands executions if you continue to use Nx in a terminal. (Side note: Nrwl has built extensions for both Intellij and Visual Studio Code for Nx. It brings the functionality of the CLI to a visual world.)

For future reference, Nx may present prompts whenever you generate code. This is dependent on the generator you are using. In vue3-vite case, all the required options are fulfilled by providing the name of the application.

At this point, assuming you don’t have an existing Vue application, you are ready to go to start building your Vue app!

Use Nx’s Vite Implementation

It’s simple to move to Nx’s official Vite executor. Open the project.json in your app directory and find the following:

‍

Replace build with the following:

Make sure that outputPath value is the same as distvalue. {{nameOfApp}} should be replaced with the name of the application.

The other change to make is serve so replace all of serve with the following:

Again, replace {{nameOfApp}}with the name of the application.

Now this application is using @nrwl/vite!

Replace the Application

This part is simple enough, especially since your application is already on Vite. All you need to do now is merge your existing app into this new directory and update the package.json with your dependencies. Depending on your project, you may need to update path references in project.json to represent what’s true. This is entirely based on your application.

What about @nxext/vue?

‍
@nxext/vue shares most of the same steps for setting up (install dependencies, generate the app, switch to Nx’s Vite implementation, and copying the existing app) just you’ll be referencing the documentation for @nxext/vue. Future enhancements to the plugin may not need you to update the project.json because it’s already using @nrwl/vite.

Conclusion

Nx has a robust architecture that just needs to be told how to use the new tools. Making Vue useable and extensible in an Nx monorepo shows that. This is made easier as Vite is a first-party plugin. As Vue becomes more popular, more robust plugins will be available to make generating applications and libraries easier.

This does make me wonder: what other frameworks can now be configured in this monorepo?

Maybe next time we should try AngularJS.