Nx with Vue

The @nx/vue plugin adds first-class Vue support to an Nx workspace, so you can scaffold, build, and test apps and libraries in a Vue monorepo.

Requirements

The @nx/vue plugin supports the following package versions.

Package	Supported Versions
vue	^3.0.0

Nx generators install the latest supported versions automatically when scaffolding new projects.

Setting up @nx/vue

Generating a new workspace

To create a new workspace with Vue, run npx create-nx-workspace@latest --preset=vue.

Installation

Keep Nx Package Versions In Sync

Make sure to install the @nx/vue version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

In any Nx workspace, you can install @nx/vue by running the following command:

nx add @nx/vue

This will install the correct version of @nx/vue.

Using the @nx/vue plugin

Generate a new project using Vue

To generate a Vue application, run the following:

nx g @nx/vue:app apps/my-app

To generate a Vue library, run the following:

nx g @nx/vue:lib libs/my-lib

Set up CI for your Vue monorepo

In CI, Nx runs nx affected to rebuild and retest only the projects a change touches, and caches results to skip repeated work.

For a complete pipeline, see Set up CI.