1.1.0 • Published 1 year ago

nx-vue v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

License: MIT GitHub top language Node.js CI npm version

Nx Vue

An nx plugin to add vue support to your workspace. This plugin is based off @nx-plus/vue, however updated to add new features are drop others to keep the plugin as simple as possible.

Feature comparison with @nx-plus/vue

Tablesnx-vue@nx-plus/vue
Vue 2 Support:x::heavy_check_mark:
Vue 3 Support:heavy_check_mark::heavy_check_mark:
Vite Support:x::heavy_check_mark:
Vuex Generator:x::heavy_check_mark:
Webpack 4:x::heavy_check_mark:
Webpack 5:heavy_check_mark::x:
Nx Graph Plugin:heavy_check_mark::heavy_check_mark:*

* Nx plus uses a post install script to modify nx source files to add vue support. This plugin uses a dep-graph extension for nx

Prerequisite

Nx Workspace

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

npx create-nx-workspace@^15.2.0

Peer Dependencies

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

# npm
npm install @nx/cypress@^14.0.0 @nx/jest@^14.0.0 @nx/linter@^14.0.0 --save-dev

# yarn
yarn add @nx/cypress@^14.0.0 @nx/jest@^14.0.0 @nx/linter@^14.0.0 --dev

Getting Started

Install Plugin

# npm
npm install nx-vue --save-dev

# yarn
yarn add nx-vue --dev

Generate Your App

nx g nx-vue:app my-app

Serve Your App

nx serve my-app

Schematics (i.e. code generation)

Application

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

ArgumentsDescription
<name>The name of your app.
OptionsDefaultDescription
--tags-Tags to use for linting (comma-delimited).
--directoryappsA directory where the project is placed.
--stylecssThe file extension to be used for style files.
--unitTestRunnerjestTest runner to use for unit tests.
--e2eTestRunnercypressTest runner to use for end to end (e2e) tests.
--routingfalseGenerate routing configuration.
--skipFormatfalseSkip formatting files.
--babelfalseAdd Babel support.

Library

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

ArgumentsDescription
<name>The name of your library.
OptionsDefaultDescription
--tags-Tags to use for linting (comma-delimited).
--directorylibsA directory where the project is placed.
--unitTestRunnerjestTest runner to use for unit tests.
--skipFormatfalseSkip formatting files.
--skipTsConfigfalseDo not update tsconfig.json for development experience.
--publishablefalseCreate a buildable library.
--babelfalseAdd Babel support.

Component

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

ArgumentsDescription
<name>The name of your component.
OptionsDefaultDescription
--project-Tags to use for linting (comma-delimited).
--directory-A directory where the component is placed.
--stylecssThe file extension to be used for style files.

Builders (i.e. task runners)

Dev Server

nx serve <name> [options]

ArgumentsDescription
<name>The name of your app.
OptionsDefaultDescription
--openfalseOpen browser on server start.
--copyfalseCopy url to clipboard on server start.
--stdinfalseClose when stdin ends.
--modedevelopmentSpecify env mode (default: development).
--host0.0.0.0Specify host (default: 0.0.0.0).
--port8080Specify port (default: 8080).
--httpsfalseUse https (default: false).
--public-Specify the public network URL for the HMR client.
--skipPlugins-Comma-separated list of plugin names to skip for this run.
--browserTarget-Target to serve.
--watchtrueWatch for changes.
--publicPath/The base URL your application bundle will be deployed at.
--transpileDependencies[]By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.
css.requireModuleExtensiontrueBy default, only files that end in *.module.[ext] are treated as CSS modules. Setting this to false will allow you to drop .module in the filenames and treat all *.(css\|scss\|sass\|less\|styl(us)?) files as CSS modules.
css.extractfalseWhether to extract CSS in your components into a standalone CSS file (instead of inlined in JavaScript and injected dynamically).
css.sourceMapfalseWhether to enable source maps for CSS. Setting this to true may affect build performance.
css.loaderOptions{}Pass options to CSS-related loaders.
devServer{}All options for webpack-dev-server are supported.

Browser

nx build <name> [options]

ArgumentsDescription
<name>The name of your app.
OptionsDefaultDescription
--modedevelopmentSpecify env mode (default: development).
--dest-Specify output directory.
--cleantrueRemove the dist directory before building the project.
--reportfalseGenerate report.html to help analyze bundle content.
--reportJsonfalseGenerate report.json to help analyze bundle content.
--skipPlugins-Comma-separated list of plugin names to skip for this run.
--watchfalseWatch for changes.
--index-The path of a file to use for the application's HTML index. The filename of the specified path will be used for the generated file and will be created in the root of the application's configured output path.
--main-The full path for the main entry point to the app, relative to the current workspace.
--tsConfig-The full path for the TypeScript configuration file, relative to the current workspace.
--publicPath/The base URL your application bundle will be deployed at.
--filenameHashingfalseGenerated static assets contain hashes in their filenames for better caching control.
--productionSourceMapfalseSetting this to false can speed up production builds if you don't need source maps for production.
--transpileDependencies[]By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.
css.requireModuleExtensiontrueBy default, only files that end in *.module.[ext] are treated as CSS modules. Setting this to false will allow you to drop .module in the filenames and treat all *.(css\|scss\|sass\|less\|styl(us)?) files as CSS modules.
css.extractfalseWhether to extract CSS in your components into a standalone CSS file (instead of inlined in JavaScript and injected dynamically).
css.sourceMapfalseWhether to enable source maps for CSS. Setting this to true may affect build performance.
css.loaderOptions{}Pass options to CSS-related loaders.
--stdinfalseClose when stdin ends.

Library

nx build <name> [options]

ArgumentsDescription
<name>The name of your library.
OptionsDefaultDescription
--dest-Specify output directory.
--cleantrueRemove the dist directory before building the project.
--reportfalseGenerate report.html to help analyze bundle content.
--reportJsonfalseGenerate report.json to help analyze bundle content.
--skipPlugins-Comma-separated list of plugin names to skip for this run.
--watchfalseWatch for changes.
--entry-The full path for the main entry point to your library, relative to the current workspace.
--tsConfig-The full path for the TypeScript configuration file, relative to the current workspace.
--inlineVuefalseInclude the Vue module in the final bundle of library.
--formatscommonjs,umd,umd-minList of output formats for library builds.
--name-Name for library.
--filename-File name for output.
--transpileDependencies[]By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.
css.requireModuleExtensiontrueBy default, only files that end in *.module.[ext] are treated as CSS modules. Setting this to false will allow you to drop .module in the filenames and treat all *.(css\|scss\|sass\|less\|styl(us)?) files as CSS modules.
css.extracttrueWhether to extract CSS in your components into a standalone CSS file (instead of inlined in JavaScript and injected dynamically).
css.sourceMapfalseWhether to enable source maps for CSS. Setting this to true may affect build performance.
css.loaderOptions{}Pass options to CSS-related loaders.

Linting

nx lint <name> [options]

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

Unit Testing

nx test <name> [options]

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

E2E Testing

nx e2e <name> [options]

We use @nx/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.