@nx-plus/vue v15.0.0-rc.0

Nx Plus Vue

First class support for Vue in your Nx workspace.

Contents

• Prerequisite
• Getting Started
• Nx Dependency Graph Support
• Schematics (i.e. code generation)
• Builders (i.e. task runners)
• Modify the Webpack Configuration
• Updating Nx Plus Vue

Prerequisite

Nx Workspace

If you have not already, create an Nx workspace with the following:

npx create-nx-workspace@^15.0.0

Peer Dependencies

If you have not already, install peer dependencies with the following:

# npm
npm install @nrwl/cypress@^15.0.0 @nrwl/jest@^15.0.0 @nrwl/linter@^15.0.0 --save-dev

# yarn
yarn add @nrwl/cypress@^15.0.0 @nrwl/jest@^15.0.0 @nrwl/linter@^15.0.0 --dev

Getting Started

Install Plugin

# npm
npm install @nx-plus/vue --save-dev

# yarn
yarn add @nx-plus/vue --dev

Generate Your App

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

Serve Your App

nx serve my-app

Nx Dependency Graph Support

Nx's dep-graph does not support .vue files. To patch support for .vue files, add the following npm script to your package.json:

"postinstall": "node node_modules/@nx-plus/vue/patch-nx-dep-graph.js"

Help us! We dislike this hack just as much as you do. Please give this Nx issue a 👍 so that we can remove this hack in the future.

Schematics (i.e. code generation)

Application

nx g @nx-plus/vue:app <name> [options]

Vuex

nx g @nx-plus/vue:vuex <project> [options]

Library

nx g @nx-plus/vue:lib <name> [options]

Component

nx g @nx-plus/vue:component <name> [options]

Builders (i.e. task runners)

Dev Server

nx serve <name> [options]

Browser

nx build <name> [options]

Library

nx build <name> [options]

Linting

nx lint <name> [options]

We use @nrwl/linter for linting, so the options are as documented here.

Unit Testing

nx test <name> [options]

We use @nrwl/jest for unit testing, so the options are as documented here.

E2E Testing

nx e2e <name> [options]

We use @nrwl/cypress for e2e testing, so the options are as documented here.

Modify the Webpack Configuration

Modify the webpack config by exporting an Object or Function from your project's configure-webpack.js file.

If your project does not have a configure-webpack.js file, then simply add it at the root of your project.

If the value is an Object, it will be merged into the final config using webpack-merge.

If the value is a function, it will receive the resolved config as the argument. The function can either mutate the config and return nothing, OR return a cloned or merged version of the config.

For more information see the Vue CLI documentation.

Updating Nx Plus Vue

Nx Plus Vue provides migrations which help you stay up to date with the latest version of Nx Plus Vue.

Not only do we migrate the version of Nx Plus Vue, but we also update the versions of dependencies which we install such as vue and vue-router.

We recommend waiting for Nx Plus Vue to update these dependencies for you as we verify that these versions work together.

How to Migrate

Generate migrations.json

All you have to do to update Nx Plus Vue to the latest version is run the following:

nx migrate @nx-plus/vue
nx migrate @nx-plus/vue@version # you can also specify version

This will fetch the specified version of @nx-plus/vue, analyze the dependencies and fetch all the dependent packages. The process will keep going until the whole tree of dependencies is resolved. This will result in:

• package.json being updated
• migrations.json being generated

At this point, no packages have been installed, and no other files have been touched.

Now, you can inspect package.json to see if the changes make sense and install the packages by running npm install or yarn.

Run Migrations

migrations.json contains the transformations that must run to prepare the workspace to the newly installed versions of packages. To run all the migrations, invoke:

nx migrate --run-migrations=migrations.json