Giter Club home page Giter Club logo

nx-plus's Introduction

We're sorry to share that this project is no longer maintained.

Thank you to all contributors for helping make Nx Plus great.

We recommend Nxext as an alternative.

Nx Plus

License ZachJW34

A collection of Nx community plugins.

Plugins

Plugin Description
@nx-plus/docusaurus First class support for Docusaurus in your Nx workspace.
@nx-plus/nuxt First class support for Nuxt in your Nx workspace.
@nx-plus/vue First class support for Vue in your Nx workspace.

Contributing

See CONTRIBUTING.md for information on contributing.

Maintainers

nx-plus's People

Contributors

benpsnyder avatar bokub avatar buckymaler avatar crutchcorn avatar derhodrig avatar devinshoemaker avatar dominikpieper avatar gregveres avatar jordylangen avatar jpsc avatar kennydurand avatar matthieulebigre avatar mehrad-rafigh avatar pabloargueta avatar vancegillies avatar yakirgot avatar zachjw34 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nx-plus's Issues

Files & Subfolders in the Public folder are noting being served

Current Behavior

I am unable to see files in the public folder when the app is being served or built

Expected Behavior

I should be able to see the files

Steps to Reproduce

steps
1). create nx-plus vue app named frontend
2). try to add any files or subfolders to the public folder
3). serve the app and see that they do not appear
3). build the app and see that they do not appear

angular.json
{ "version": 1, "projects": { "backend": { "projectType": "application", "schematics": { "@nrwl/angular:component": { "style": "scss" } }, "root": "apps/backend", "sourceRoot": "apps/backend/src", "prefix": "latestmetric-com", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/apps/backend", "index": "apps/backend/src/index.html", "main": "apps/backend/src/main.ts", "polyfills": "apps/backend/src/polyfills.ts", "tsConfig": "apps/backend/tsconfig.app.json", "aot": true, "assets": [ "apps/backend/src/favicon.ico", "apps/backend/src/assets" ], "styles": ["apps/backend/src/styles.scss"], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "apps/backend/src/environments/environment.ts", "with": "apps/backend/src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "8mb", "maximumError": "10mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "backend:build", "proxyConfig": "apps/backend/proxy.conf.json" }, "configurations": { "production": { "browserTarget": "backend:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "backend:build" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "apps/backend/tsconfig.app.json", "apps/backend/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!apps/backend/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "apps/backend/jest.config.js", "tsConfig": "apps/backend/tsconfig.spec.json", "passWithNoTests": true, "setupFile": "apps/backend/src/test-setup.ts" } } } }, "backend-e2e": { "root": "apps/backend-e2e", "sourceRoot": "apps/backend-e2e/src", "projectType": "application", "architect": { "e2e": { "builder": "@nrwl/cypress:cypress", "options": { "cypressConfig": "apps/backend-e2e/cypress.json", "tsConfig": "apps/backend-e2e/tsconfig.e2e.json", "devServerTarget": "backend:serve" }, "configurations": { "production": { "devServerTarget": "backend:serve:production" } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": ["apps/backend-e2e/tsconfig.e2e.json"], "exclude": ["**/node_modules/**", "!apps/backend-e2e/**"] } } } }, "api-interfaces": { "root": "libs/api-interfaces", "sourceRoot": "libs/api-interfaces/src", "projectType": "library", "schematics": {}, "architect": { "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "libs/api-interfaces/tsconfig.lib.json", "libs/api-interfaces/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!libs/api-interfaces/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "libs/api-interfaces/jest.config.js", "tsConfig": "libs/api-interfaces/tsconfig.spec.json", "passWithNoTests": true } } } }, "graphql": { "projectType": "library", "root": "libs/graphql", "sourceRoot": "libs/graphql/src", "prefix": "latestmetric-com", "architect": { "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "libs/graphql/tsconfig.lib.json", "libs/graphql/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!libs/graphql/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "libs/graphql/jest.config.js", "tsConfig": "libs/graphql/tsconfig.spec.json", "passWithNoTests": true, "setupFile": "libs/graphql/src/test-setup.ts" } } }, "schematics": {} }, "frontend": { "projectType": "application", "root": "apps/frontend", "sourceRoot": "apps/frontend/src", "architect": { "build": { "builder": "@nx-plus/vue:browser", "options": { "dest": "dist/apps/frontend", "index": "apps/frontend/public/index.html", "main": "apps/frontend/src/main.ts", "tsConfig": "apps/frontend/tsconfig.app.json" }, "configurations": { "production": { "mode": "production", "filenameHashing": true, "productionSourceMap": true, "css": { "extract": true, "sourceMap": false } } } }, "serve": { "builder": "@nx-plus/vue:dev-server", "options": { "browserTarget": "frontend:build" }, "configurations": { "production": { "browserTarget": "frontend:build:production" } } }, "lint": { "builder": "@nrwl/linter:lint", "options": { "linter": "eslint", "config": "apps/frontend/.eslintrc", "tsConfig": [ "apps/frontend/tsconfig.app.json", "apps/frontend/tsconfig.spec.json" ], "exclude": ["**/node_modules/**", "!apps/frontend/**"] } }, "test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "apps/frontend/jest.config.js", "tsConfig": "apps/frontend/tsconfig.spec.json", "passWithNoTests": true } } } }, "frontend-e2e": { "root": "apps/frontend-e2e", "sourceRoot": "apps/frontend-e2e/src", "projectType": "application", "architect": { "e2e": { "builder": "@nrwl/cypress:cypress", "options": { "cypressConfig": "apps/frontend-e2e/cypress.json", "tsConfig": "apps/frontend-e2e/tsconfig.e2e.json", "devServerTarget": "frontend:serve" }, "configurations": { "production": { "devServerTarget": "frontend:serve:production" } } }, "lint": { "builder": "@nrwl/linter:lint", "options": { "linter": "eslint", "config": "apps/frontend-e2e/.eslintrc", "tsConfig": ["apps/frontend-e2e/tsconfig.e2e.json"], "exclude": ["**/node_modules/**", "!apps/frontend-e2e/**"] } } } } }, "cli": { "defaultCollection": "@nrwl/angular" }, "schematics": { "@nrwl/angular:application": { "unitTestRunner": "jest", "e2eTestRunner": "cypress" }, "@nrwl/angular:library": { "unitTestRunner": "jest" } }, "defaultProject": "backend" }

package.json
{ "name": "redacted", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "nx": "nx", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "nx workspace-lint && ng lint", "e2e": "ng e2e", "affected:apps": "nx affected:apps", "affected:libs": "nx affected:libs", "affected:build": "nx affected:build", "affected:e2e": "nx affected:e2e", "affected:test": "nx affected:test", "affected:lint": "nx affected:lint", "affected:dep-graph": "nx affected:dep-graph", "affected": "nx affected", "format": "nx format:write", "format:write": "nx format:write", "format:check": "nx format:check", "update": "ng update @nrwl/workspace", "workspace-schematic": "nx workspace-schematic", "dep-graph": "nx dep-graph", "help": "nx help", "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points" }, "private": true, "dependencies": { "@angular/animations": "9.1.3", "@angular/cdk": "9.2.1", "@angular/common": "9.1.3", "@angular/compiler": "9.1.3", "@angular/core": "9.1.3", "@angular/forms": "9.1.3", "@angular/platform-browser": "9.1.3", "@angular/platform-browser-dynamic": "9.1.3", "@angular/platform-server": "9.1.3", "@angular/router": "9.1.3", "@fortawesome/fontawesome-free": "5.13.0", "@jnields/vue-helmet": "^3.0.0", "@nestjs/common": "^6.8.3", "@nestjs/core": "^6.8.3", "@nestjs/platform-express": "^6.8.3", "@ng-bootstrap/ng-bootstrap": "6.1.0", "@ngrx/effects": "9.1.0", "@ngrx/entity": "9.1.0", "@ngrx/router-store": "9.1.0", "@ngrx/store": "9.1.0", "@ngrx/store-devtools": "9.1.0", "@ngx-loading-bar/core": "4.2.0", "@ngx-translate/core": "12.1.2", "@nrwl/angular": "9.3.0", "@types/lodash": "4.14.150", "angular-in-memory-web-api": "0.10.0", "apexcharts": "3.19.0", "aws-amplify": "^3.0.17", "aws-amplify-angular": "^5.0.17", "bootstrap": "4.5.0", "chart.js": "2.9.3", "chartist": "0.11.4", "classlist.js": "1.1.20150312", "clipboard": "2.0.6", "core-js": "3.6.5", "date-arithmetic": "^4.1.0", "hammerjs": "2.0.8", "highlight.js": "^9.17.1", "lodash": "4.17.15", "material-design-icons": "3.0.1", "moment": "2.24.0", "ng-apexcharts": "1.2.3", "ng-inline-svg": "10.0.0", "ngrx-store-freeze": "0.2.4", "ngx-clipboard": "13.0.0", "ngx-daterangepicker-material": "2.2.0", "ngx-highlightjs": "3.0.3", "ngx-perfect-scrollbar": "9.0.0", "ngx-permissions": "7.0.3", "object-path": "0.11.4", "popper.js": "^1.16.1", "reflect-metadata": "^0.1.13", "rxjs": "6.5.5", "smooth-scrollbar": "^8.5.2", "socicon": "3.0.5", "tooltip.js": "^1.3.3", "tslib": "1.11.1", "vue": "^2.6.11", "vue-router": "^3.2.0", "web-animations-js": "2.3.2", "zone.js": "0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "0.901.3", "@angular/cli": "9.1.3", "@angular/compiler-cli": "9.1.3", "@angular/language-service": "9.1.3", "@angular/material": "9.2.1", "@angular/material-moment-adapter": "9.2.1", "@nestjs/schematics": "^6.7.0", "@nestjs/testing": "^6.8.3", "@ngrx/schematics": "9.1.0", "@nrwl/cypress": "9.3.0", "@nrwl/jest": "9.3.0", "@nrwl/nest": "9.3.0", "@nrwl/node": "9.3.0", "@nrwl/workspace": "9.3.0", "@nx-plus/vue": "^0.5.0", "@types/chartist": "0.9.47", "@types/jasmine": "3.5.0", "@types/jasminewd2": "2.0.3", "@types/jest": "25.1.4", "@types/node": "12.11.1", "@types/object-path": "0.11.0", "codelyzer": "5.2.2", "css-loader": "^3.4.2", "cypress": "^4.1.0", "dotenv": "6.2.0", "eslint": "6.8.0", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "4.2.1", "jest": "25.2.3", "jest-preset-angular": "8.1.2", "karma": "4.3.0", "karma-chrome-launcher": "3.1.0", "karma-coverage-istanbul-reporter": "2.1.0", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.4.2", "node-sass": "4.13.1", "prettier": "2.0.4", "protractor": "5.4.3", "ts-jest": "25.2.1", "ts-node": "8.3.0", "tslint": "6.0.0", "typescript": "3.7.5", "webpack-bundle-analyzer": "3.6.1", "webpack-cli": "3.3.11", "webpack-messages": "2.0.4", "webpack-rtl-plugin": "2.0.0", "@nrwl/eslint-plugin-nx": "9.3.0", "@typescript-eslint/parser": "2.19.2", "@typescript-eslint/eslint-plugin": "2.19.2", "eslint-config-prettier": "6.0.0", "@vue/test-utils": "1.0.0-beta.31", "babel-core": "^7.0.0-bridge.0", "jest-serializer-vue": "^2.0.2", "jest-transform-stub": "^2.0.0", "vue-jest": "^3.0.5", "@vue/cli-plugin-typescript": "~4.3.0", "@vue/cli-service": "~4.3.0", "@vue/eslint-config-typescript": "^5.0.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11" } }

/public
index.html
`

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Manjari&family=Nixie+One&display=swap" rel="stylesheet">
`

Failure Logs

no failure logs

Environment

Plugin name and version:
"@nx-plus/vue": "^0.5.0",

@nrwl/angular : 9.3.0
@nrwl/cli : 9.3.0
@nrwl/cypress : 9.3.0
@nrwl/eslint-plugin-nx : 9.3.0
@nrwl/express : Not Found
@nrwl/jest : 9.3.0
@nrwl/linter : 9.3.0
@nrwl/nest : 9.3.0
@nrwl/next : Not Found
@nrwl/node : 9.3.0
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 9.3.0
@nrwl/web : Not Found
@nrwl/workspace : 9.3.0
typescript : 3.7.5

Vue3.x Support Plan?

Description

 # Does this plugin support vue3?

Motivation

 # Vue3 has released the official version, are there any plans to support vue3?

eslint parsing error for vue files

Current Behavior

webstorm and vscode report error when openning vue files

Expected Behavior

should work correctly

Steps to Reproduce

create a new apps using nx cli
open the file using webstorm or vscode with eslint support

Failure Logs

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: src/pages/auth/home.page.vue. The file must be included in at least one of the projects provided.

image

Environment

Plugin name and version:

@nrwl/cli : 10.3.1 @nrwl/cypress : 10.3.1 @nrwl/eslint-plugin-nx : 10.3.1 @nrwl/express : Not Found @nrwl/jest : 10.3.1 @nrwl/linter : 10.3.1 @nrwl/nest : 10.3.1 @nrwl/next : Not Found @nrwl/node : 10.3.1 @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 10.3.1 @nrwl/web : Not Found @nrwl/workspace : 10.3.1 typescript : 4.0.5

Update to NX 11

NX 11 has been released a while ago and seems to getting more stable.

[docusaurus] can not load local / remote urls

I suspect the error is on my side, but I can't find it. I recently added nx-docusaurus but I'm unable to use links in the form [...](https://...)

$ yarn add -D @nx-plus/docusaurus
...
$ nx g @nx-plus/docusaurus:app docs
...

... change the port 3000->3100 to avoid conflicts.

$ nx serve docs                                     ✔  7s   16:32:11 

> nx run docs:serve
Starting the development server...
2019-05-30-welcome.md - 'id' header option is deprecated. Please use 'slug' option instead.
2019-05-29-hello-world.md - 'id' header option is deprecated. Please use 'slug' option instead.
2019-05-28-hola.md - 'id' header option is deprecated. Please use 'slug' option instead.
Docusaurus website is running at: http://localhost:3100/

✖ Client
  Compiled with some errors in 4.65s

ℹ 「wds」: Project is running at http://localhost:3100/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /foo/bar
ℹ 「wds」: 404s will fallback to /index.html


./apps/docs/docs/doc1.md
Module not found: Can't resolve 'url-loader' in '/foo/bar/apps/docs/docs'

Add the option to generate a Vue project that use JavaScript instead of TypeScript

Description

I'd like to be able to generate a Vue project that uses JavaScript instead of TypeScript.

Motivation

This option would ease the migration process for projects written in JavaScript to a Nx workspace. Also, not all users are familiar with TypeScript.

Suggested Implementation

I imagine this can be done similarly to how Nx handles JavaScript support with React.

Add Vue library support

Description

I'd like to be able to generate a Vue library with various options (e.g. testing configured), and be able to build and publish the library.

Motivation

Being able to generate Vue libraries will speed up development for all users, and being able to publish libraries is important for code reuse and OSS projects.

Suggested Implementation

Add a schematic for generating a Vue library and a builder for building a publishable library. The builder could leverage Vue CLI.

@nx-plus/vue:app - Cannot read property 'toString' of null

Current Behavior

The command nx g @nx-plus/vue:app app_name throws a console error: Cannot read property 'toString' of null, and no app is generated.

Expected Behavior

The command should generate a Vue app in a freshly initialized NX workspace.

Steps to Reproduce

git clone https://github.com/akolybelnikov/go-vault-vue.git, after that install dependencies with yarn, and try running the nx g @nx-plus/vue:app app_name in the terminal, in the root of the project.

Failure Logs

No logs were generated.

Environment

Plugin name and version: @nx-plus/vue": "^10.0.0

nx : 10.2.1
@nrwl/angular : Not Found
@nrwl/cli : 10.2.1
@nrwl/cypress : 10.2.1
@nrwl/eslint-plugin-nx : 10.2.1
@nrwl/express : Not Found
@nrwl/jest : 10.2.1
@nrwl/linter : 10.2.1
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 10.2.1
@nrwl/web : Not Found
@nrwl/workspace : 10.2.1
typescript : 3.9.7

publicPath set but does not do anything

Current Behavior

publicPath set but does not do anything

Expected Behavior

publicPath option to do something

Steps to Reproduce

  1. Set public path
          "configurations": {
            "production": {
              "mode": "production",
              "filenameHashing": true,
              "productionSourceMap": true,
              "css": {
                "extract": true,
                "sourceMap": false
              },
              "publicPath": "./"
            },
            "development": {
              "mode": "development",
              "publicPath": "./"
            }
          }
  1. Run with desired mode
  2. index.html in dist do not have public path set

https://github.com/testing-student-app/stract2

Failure Logs

Environment

Plugin name and version: @nx-plus/vue@^10.0.0

nx : Not Found
@nrwl/angular : Not Found
@nrwl/cli : 10.1.0
@nrwl/cypress : 10.1.0
@nrwl/eslint-plugin-nx : 10.1.0
@nrwl/express : Not Found
@nrwl/jest : 10.1.0
@nrwl/linter : 10.1.0
@nrwl/nest : 10.1.0
@nrwl/next : Not Found
@nrwl/node : 10.1.0
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 10.1.0
@nrwl/web : Not Found
@nrwl/workspace : 10.1.0
typescript : 3.8.3

ForkTsCheckerWebpackPlugin configuration has an unknown property 'tsconfig'.

Current Behavior

An unhandled exception occurred: Invalid configuration object. ForkTsCheckerWebpackPlugin has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'tsconfig'. These properties are valid:
   object { async?, typescript?, eslint?, formatter?, issue?, logger? }

Expected Behavior

Vue app is served normally

Steps to Reproduce

Update deps in vue app to. (To use latest vue-devtools)

"vue": "^3.0.0-rc.10"
"@vue/cli-plugin-typescript": "~4.5.4",
"@vue/cli-service": "~4.5.4",
"@vue/compiler-sfc": "3.0.0-rc.10",

The browser & dev-server builders are not calling modifyCopyAssets

Just spent an hour or 6 looking trough the plugin and found that the modifyCopyAssets function was not being called in the webpack for the browser & dev-server builders causing the assets in the public directory to not be added to the dist folder on serve / build.

you ca see in these images that the favicon.ico & the site manifest were copped over on build (because I added the custom modifyCopyAssets2 function to the inlineOptions array; those files are omitted if I comment them out)
image
image

I'll attached the mangled download of the nx-plus repo
the only files I've chnaged to get this to work for me we the
libs\vue\src\builders\browser\builder.ts ( added modifyCopyAssets2 function )
libs\vue\src\webpack.ts ( created modifyCopyAssets2 function )
apps\vue-e2e\tests\vue.test.ts ( removed all unnecessary tests )
libs\vue\src\schematics\application\files\public\site.webmanifest.template (added a non standard template file to see if the copy-webpack-plugin would have any issues)

To reproduce this patch / fix / error.
1). run nx e2e vue-e2e to generate the tmp dist for the app
2). uncomment out the modifyCopyAssets2 (config, options, context, projectRoot); line in the libs\vue\src\builders\browser\builder.ts and run nx e2e vue-e2e again to see if all the same files are present in the dist folder.

TL;DR add modifyCopyAssets to all the builder.ts files because the dev-server * browser builders are not adding static public files to the dist folder.
image

nx-plus.zip

extractCss still needed

Hi. After a bit of digging, I saw that you at one point added extractCss to the build options, but then removed it again. The default seems to be to not extract it for development, and to extract it for prod, but we need it not extracted for both...

Any pointers in the right direction would be much appreciated.

docusaurus.config.js not found

run the following command nx serve docs

// angular.json

"docs": {
    "projectType": "application",
    "root": "apps/docs",
    "sourceRoot": "apps/docs/src",
    "architect": {
      "build": {
        "builder": "@nx-plus/docusaurus:build-docusaurus",
        "options": {
          "outputPath": "dist/docusaurus/docs"
        }
      },
      "serve": {
        "builder": "@nx-plus/docusaurus:docusaurus",
        "options": {
          "port": 3000
        }
      }
    }
  }
},

[error] Error: docusaurus.config.js not found
    at Object.loadConfig (G:\Aplicacion\app\node_modules\@docusaurus\core\lib\server\config.js:43:15)
    at loadContext (G:\Aplicacion\app\node_modules\@docusaurus\core\lib\server\index.js:24:33)
    at Object.load (G:\Aplicacion\app\node_modules\@docusaurus\core\lib\server\index.js:52:21)
    at Object.start (G:\Aplicacion\app\node_modules\@docusaurus\core\lib\commands\start.js:45:34)
    at Observable._subscribe (G:\Aplicacion\app\node_modules\@nx-plus\docusaurus\src\builders\docusaurus\builder.js:10:15)
    at Observable._trySubscribe (G:\Aplicacion\app\node_modules\rxjs\internal\Observable.js:44:25)
    at Observable.subscribe (G:\Aplicacion\app\node_modules\rxjs\internal\Observable.js:30:22)
    at Object.subscribeToResult (G:\Aplicacion\app\node_modules\rxjs\internal\util\subscribeToResult.js:12:23)
    at SwitchMapSubscriber._innerSub (G:\Aplicacion\app\node_modules\rxjs\internal\operators\switchMap.js:65:54)
    at SwitchMapSubscriber._next (G:\Aplicacion\app\node_modules\rxjs\internal\operators\switchMap.js:55:14)
    at SwitchMapSubscriber.Subscriber.next (G:\Aplicacion\app\node_modules\rxjs\internal\Subscriber.js:66:18)
    at G:\Aplicacion\app\node_modules\rxjs\internal\util\subscribeToPromise.js:7:24

@nx-plus/vue:component command

Description

There is an official nx g @nrwl/react:component --project=xxxx xxx, will the author add the same command @nx-plus/vue:component?

Motivation

Suggested Implementation

Alternate Implementations

Folder structure with Nx and Nuxt

As a prefix I want to say sorry if I'm not using the correct channel for this question. Now the actual discussion:

The folder structure with Nx and Nuxt

I have a hard time wrapping my head around the idea of Nx in context with Nuxt.
Do you guys (non-gender) have any tips and/or tricks for me. Maybe an example or two?

Explanation
This is the reason why I'm asking this:
Nuxt itself has a system where it imports all pages and generate a routing system from that. But Nx says that 99% of your code should be in libs. So do you have a libs//pages/ folder with all the pages and manually create the routing system in the app.

[nuxt] Nuxt-i18n integration with lazy mode does not build

Hello there,

First, thanks for your work on this library, I discovered it yesterday and it looks very promising.

I am trying to migrate one of my Nuxt projects to Nx thanks to the plugin, and there is one last error that I can't get rid of. I would be happy to help solving it but I'm not really able to understand alone what would be the best way.

Steps to Reproduce

  1. Generate a fresh app with nx g @nx-plus/nuxt:app my-app
  2. Install nuxt-i18n : npm i nuxt-i18n --save
  3. Add nuxt-i18n to the nuxt.config.ts : modules: ['nuxt-i18n'],
  4. Create a ./locales/en/index.ts file in the Nuxt app with content: export default {}
  5. Configure lazy mode for nuxt-i18n in nuxt.config.ts:
i18n: {
    locales: [
      {
        code: 'en',
        file: 'en/index.ts'
      }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'locales/',
    strategy: 'no_prefix'
  },
  1. Attempt to serve the application: nx serve my-app

Current Behavior

Using nuxt-i18n inside the Nuxt application with lazy mode triggers an error that prevents compilation:

 ERROR  Failed to compile with 1 errors

This dependency was not found:          

* ~/lang in ./dist/apps/my-app/nuxt-i18n/utils.js
To install it, you can run: npm install --save ~/lang

Expected Behavior

The project compiles without any problem.

Environment

Plugin name and version: @nx-plus/nuxt v10.2.0

nx report:

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 10.4.4
  @nrwl/cypress : 10.4.4
  @nrwl/eslint-plugin-nx : 10.4.4
  @nrwl/express : Not Found
  @nrwl/jest : 10.4.4
  @nrwl/linter : 10.4.4
  @nrwl/nest : 10.4.4
  @nrwl/next : Not Found
  @nrwl/node : 10.4.4
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.4.4
  @nrwl/web : Not Found
  @nrwl/workspace : 10.4.4
  typescript : 4.0.5

Thanks for your help!

"Cannot Read Property Unshift of Undefined"

Current Behavior

  • Existing NX workspace with

  • Install @nx-plus/vue [npm install @nx-plus/vue --save-dev]

  • Generate vue application [npx nx g @nx-plus/vue:app my-app]

  • Encounter an error about "Cannot read property unshift of undefined"

image

Expected Behavior

  • Add project to workspace and off to the races

Steps to Reproduce

    updateJsonInTree(`${options.projectRoot}/.eslintrc.json`, (json) => {
      json.extends.unshift(json.extends.pop());
      return json;
    }),

updateJsonInTree comes from the @nrwl/workspace's tooling here: https://github.com/nrwl/nx/blob/master/packages/workspace/src/utils/ast-utils.ts#L496

  • The json parameter is an empty object & json.extends errors out to undefined

  • Creating apps/my-app & adding an .eslintrc.json did not resolve the issue

NOTE: From a new, "fresh" workspace, the below works correctly:

npx create-nx-workspace@latest
# cd my_project
npm install @nx-plus/vue --save-dev
npx nx g @nx-plus/vue:app my-app
npx nx serve my-app

Failure Logs

  • Cannot read property 'unshift' of undefined

Environment

  • Node: v10.15.3

Plugin name and version: @nx-plus/vue: ^10.2.0

nx : Not Found
@nrwl/angular : 10.2.0
@nrwl/cli : 10.2.0
@nrwl/cypress : 10.1.0
@nrwl/eslint-plugin-nx : 10.2.0
@nrwl/express : Not Found
@nrwl/jest : 10.1.0
@nrwl/linter : 10.2.1
@nrwl/nest : 10.2.1
@nrwl/next : Not Found
@nrwl/node : 10.1.0
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 10.2.0
@nrwl/web : Not Found
@nrwl/workspace : 10.2.0
typescript : 3.9.7

Support Nx11 generator for Vue schematics

It would be great to be able to use the new generator syntax in your own generators.

Description

Add additional generators for the schematics

Motivation

While migrating my schematics it would be great to be able to migrate that part using the vue schematics as well

Suggested Implementation

See PR

Support Docusaurus deployments

Description

Support the Docusaurus deployment options listed here.

Suggested Implementation

Add a builder for deploying a Docusaurus website.

Add support for Nx 10

I ran into some problems adding/running a vue app in my monorepo that was generated with [email protected]

Steps to reproduce:

npm -g install create-nx-workspace@next @nrwl/cli@next
create-nx-workspace # Angular + Nest, no routing, no CSS preprocessing
cd my-project-name
npm install --save-dev @nx-plus/vue
# fix up postinstall script by hand, so that we can re-run npm install and trigger it
npm install
nx g @nx-plus/vue:app ui-vue
nx serve ui-vue

I do not have the error message on hand but can add this info later. There is an issue with CopyWebpackPlugin config transformation that is happening here: https://github.com/ZachJW34/nx-plus/blob/master/libs/vue/src/webpack.ts#L103

how to configure webpack

Hi, firstly, thanks for a great library!

I've been struggling to add a simple configuration to webpack, specifically, to set javascriptEnabled = true as a less-loader configuration option, ie:

{
        test: /\.less$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }, {
            loader: "less-loader",
            options: {
                javascriptEnabled: true
            }
        }]
}

However, the config object doesn't seem to follow the conventions in the Vue-cli link in this project's readme.

Any suggestions on how to set the javascriptEnabled option on the less-loader would be appreciated.

Thanks

Add option to modify Vue CLI's webpack configuration

Description

I'd like to be able to modify Vue CLI's webpack configuration.

Motivation

Vue CLI's webpack configuration meets the initial requirements of most projects, but as a project grows and becomes more complex it's likely that small changes will need to be made to the webpack configuration.

Suggested Implementation

There are a number of ways this can be done, but what's most important is that our required webpack modifications take precedence because Vue CLI won't work in a Nx workspace without them.

Support Vue CLI's Modern Mode

Description

Support Vue CLI's Modern Mode so that production builds will produce two versions of an app: one modern bundle targeting modern browsers that support ES modules, and one legacy bundle targeting older browsers that do not.

Motivation

Many modern browsers don't require the transpilation and polyfills that older browsers do, so producing a smaller modern bundle will improve app load-time performance in modern browsers.

Suggested Implementation

Modern Mode requires Babel so that would need to be added. After adding that it's just a matter of adding a new option to the browser builder that interfaces with Vue CLI's modern option.

App schematic fails with Nx v10.3.0

Current Behavior

App schematic fails with Nx v10.3.0

Expected Behavior

App schematic should work as expected.

Steps to Reproduce

# Select empty preset
npx create-nx-workspace@latest my-repo && cd my-repo
yarn add -D @nx-plus/vue
nx g @nx-plus/vue:app my-app

Failure Logs

Screen Shot 2020-10-04 at 12 22 46 PM

Environment

os: macOS 10.15.7 (19H2)
plugin: "@nx-plus/vue": "^10.0.0",

nx : Not Found
@nrwl/angular : Not Found
@nrwl/cli : 10.3.0
@nrwl/cypress : 10.3.0
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 10.3.0
@nrwl/linter : 10.3.0
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 10.3.0
@nrwl/web : Not Found
@nrwl/workspace : 10.3.0
typescript : 4.0.3

Cannot import component from React lib into Markdown (docusaurus)

Current Behavior

Apologies if this has been covered somewhere but I couldn't find it. I'm expecting to be able to import the components to document into Markdown in order to show their behaviour. The components will be in various libs within the NX project developed in Typescript. And apologies if this is not a bug, it just seems the way it should work!

I added the following to my markdown:

---
id: doc2
title: Document Number 2
---

import {Tiles} from "@gb/tiles"

<Tiles/>

This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com/)

Error on render:

./apps/glowsaurus/docs/doc2.md
Module not found: Can't resolve '@gb/tiles' in 'D:\xxxxxx\gb\apps\glowsaurus\docs'

Expected Behavior

Component imported and displayed.

Steps to Reproduce

npx create-nx-workspace@^9.0.0
# named nx project 'gb', empty project
cd gb
npm i --save-dev @nrwl/react
nx g @nrwl/react:library tiles
npm install @nx-plus/docusaurus --save-dev
nx g @nx-plus/docusaurus:app glowsaurus
nx serve glowsaurus

Then I edited doc2.md as shown above.

Environment

Plugin name and version: 10.0.0

$ nx report

>  NX  Report complete - copy this into the issue template

  @nrwl/angular : Not Found
  @nrwl/cli : 9.0.0
  @nrwl/cypress : 10.3.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 10.3.0
  @nrwl/linter : 10.3.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 10.3.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.0.0
  @nrwl/web : 10.3.0
  @nrwl/workspace : 9.0.0
  typescript : 3.7.5

Post install script

Current Behavior

when creating a new app using vue template, the package are installed, but the cli is blocked in Installing pakage
i checked and found that the post install script block the installation, and when lunched manually i got this error

https://ibb.co/vBtrgZr

Expected Behavior

install nxplus/vue and run a vue app

Steps to Reproduce

create a new app

Failure Logs

Environment

@nestjs/schematics": "^7.0.0",
    "@nestjs/testing": "^7.0.0",
    "@nrwl/cli": "10.3.0",
    "@nrwl/cypress": "10.3.0",
    "@nrwl/eslint-plugin-nx": "10.3.0",
    "@nrwl/jest": "10.3.0",
    "@nrwl/nest": "^10.3.0",
    "@nrwl/node": "10.3.0",
    "@nrwl/workspace": "10.3.0",
    "@nx-plus/vue": "^10.1.0",
    "@types/jest": "26.0.8",
    "@types/node": "^8.9.5",
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 10.3.0
  @nrwl/cypress : 10.3.0
  @nrwl/eslint-plugin-nx : 10.3.0
  @nrwl/express : Not Found
  @nrwl/jest : 10.3.0
  @nrwl/linter : 10.3.0
  @nrwl/nest : 10.3.0
  @nrwl/next : Not Found
  @nrwl/node : 10.3.0
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.3.0
  @nrwl/web : Not Found
  @nrwl/workspace : 10.3.0
  typescript : 4.0.3

Add Storybook support

Description

I would to use storybook with nx-plus and vue

Motivation

Nx supports storybook for angular and react

Suggested Implementation

We can take inspiration from nx and the way they implemented the schematics and builder

Lib dependency not found

Hello, first of all awesome work with this package. 🎉

I'm having an issue importing a library that I have under libs, that works perfectly fine in other Angular clients inside apps but Fails in a Vue client.

This dependency was not found:

* @my-awesome-monorepo/api-services in ./apps/vue-app/src/store/index.ts

To install it, you can run: npm install --save @my-awesome-monorepo/api-services
Build failed with errors.

I have it configure the path inside of the tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
   "paths": {
      "@my-awesome-monorepo/api-services": ["libs/api-services/src/index.ts"],
   }
  }
}

It works if I use a relative path, but in this case inside of libs/api-services/src/index.ts I have also imports with @my-awesome-monorepo paths for other libraries.

Add assets option to browser builder in angular.json

Description

It would be great if we could included assets from a shared asset library by just adding a assets option to the browser builder.
image

Motivation

Helps reduce duplicate assets and massively reduces monoprepo sizes.

Suggested Implementation

have webpack look at the path and copy and and paste everything there into the dist folder.
as for duplicate files just overwrite them I guess.

Alternate Implementations

custom webpack but that would take alot of time to setup and doesn't realy follow the nrwl theme of having a single source for webpack stuff (angular.json file)

Support configuring Vue apps with `vue.config.js`

Description

When installing vue cli plugins, they sometimes need to be configured via vue.config.js (ex @vue/cli-plugin-pwa)

This configuration is not possible right now.

Motivation

The configuration of these plugins should be possible.

Suggested Implementation

add a vue.config.js to the application and allow configuration there. This configuration should get merged in with the standard config.

Vue files aren't being linted

Current Behavior

Vue files aren't being linted.

Expected Behavior

Vue files are linted.

Steps to Reproduce

  1. yarn create-playground
  2. nx g @nx-plus/vue:app my-app
  3. Add a lint error to a .vue file
  4. nx lint my-app

Environment

Plugin name and version: @nx-plus/[email protected]

@nrwl/angular : Not Found
@nrwl/cli : 9.4.5
@nrwl/cypress : 9.6.0
@nrwl/eslint-plugin-nx : 9.4.5
@nrwl/express : Not Found
@nrwl/jest : 9.6.0
@nrwl/linter : 9.6.0
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 9.4.5
@nrwl/web : Not Found
@nrwl/workspace : 9.4.5
typescript : 3.8.3

In the image below there's a debugger statement in main.ts and App.vue, but the lint error is only caught in main.ts.

Screen Shot 2020-08-20 at 10 46 11 PM

Component lazy-loading

Description

My goal to have explicit lazy loading component, but it looks like generated by default app, bundle "About" in "app.js"

Can you please suggest workaround to access chainWebpack method in vue.config.js?
I would like to disable prefetch plugin like suggested in article.

UPD:
Just checked in pure vue-cli project. It worked as expected.

How to add transpileDependencies in vue?

First of all i am really sorry for opening a new issue that is related to webpack config. This is related to vuetify.

Description

A month pack i raised an issue about how to implement vuetify. You shared me a repo. That worked fine. Now i wanted to recreate it in a new project.

I created a new vue-cli project with vuetify. And i copy pasted all the files that vue-cli-plugin generated. One of the file it updated was vue.config.js to add transpileDepencies for vuetify. I dont know how to configure it in nx-plus/vue. Can you guide me please?

Thank you. I am really sorry for this issue.

Deleting a default Webpack config rule

Description

Hi any idea how I can delete a rule from the default Webpack config? I need to use vue-svg-loader, but if I add my rule in extend-webpack.js I'm getting an Invalid Component definition error, so I want to try and delete the original rule.

But, although it says "The function can either mutate the config and return nothing, OR return a cloned or merged version of the config." If I try to return a cloned object like so:

module.exports = (config) => {
  const clonedConfig = { ...config };

  // remove a rule here

  return clonedConfig;
};

I get an error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry['app'] should not contain the item '/Users/martinstanojevic/projects/nx-vue/apps/my-app/src/main.ts' twice.
   -> A non-empty array of non-empty strings

The same happens if try to return a cloned or merged object. It only works if I return a new config. Any ideas on how I can work around this?

Thanks in advance!

P.S.

In other projects, I used chainWebpack for deleting existing rules but it isn't supported here.

scss not working

When I generate my app, I set my component.vue like this

<template src="./view.html"></template>
<script src="./script.ts"></script>
<style src="./style.scss" lang="scss"></style>

I do not get any error, but scss is not working, it treat the scss file as css
What am I doing wrong.

Meanwhile I have this in my workerspace.json

"configurations": {
		"production": {
			"mode": "production",
			"filenameHashing": true,
			"productionSourceMap": true,
			"css": {
				"extract": true,
				"sourceMap": false
			}
		}
	}

`You must specify vue-cli config options in '${workspaceFileName}'.`

Current Behavior

If @nx-plus/vue finds a vue.config.js file then it throws the following Error, without any explanation or documentation:

      `You must specify vue-cli config options in workspace.json.

Expected Behavior

Documentation will exist explaining how to set vue-cli config options in workspace.json.

Steps to Reproduce

  • add a vue.config.js file to a vue app
  • run: nx serve

nx reports

Node : 12.20.1
OS : linux x64
npm : 6.14.10

nx : Not Found
@nrwl/angular : Not Found
@nrwl/cli : 11.2.12
@nrwl/cypress : 11.2.12
@nrwl/devkit : 11.2.12
@nrwl/eslint-plugin-nx : 11.2.12
@nrwl/express : Not Found
@nrwl/jest : 11.2.12
@nrwl/linter : 11.2.12
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 11.2.12
@nrwl/web : Not Found
@nrwl/workspace : 11.2.12
typescript : 4.0.7

Docusaurus build crashes during minification

Current Behavior

Build process crashes at the end

Expected Behavior

Build process to pass

Steps to Reproduce

  • Create nx workspace
  • create a docusaurus app
  • Build the docusaurus app

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

> nx run dummy-doc:build 
Creating an optimized production build...
2019-05-28-hola.md - 'id' header option is deprecated. Please use 'slug' option instead.
2019-05-29-hello-world.md - 'id' header option is deprecated. Please use 'slug' option instead.
2019-05-30-welcome.md - 'id' header option is deprecated. Please use 'slug' option instead.

✔ Client
  Compiled successfully in 8.06s

✖ Server
  Compiled with some errors in 9.59s



TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)TypeError: Cannot read property 'replace' of undefined
    at String.replace (<anonymous>)
(undefined) TypeError: Cannot read property 'replace' of undefined
    at Object.options.minifyJS (main:17359:28)
    at Object.chars (main:17847:24)
    at main:46819:19
    at String.replace (<anonymous>)
    at new HTMLParser (main:46811:19)
    at minify (main:17633:3)
    at module.exports.exports.minify (main:17994:16)
    at serverEntry_render (main:84584:38)

Environment

Plugin name and version: @nx-plus/docusaurus#8b21c9f

NX Report complete

  nx : 10.2.1
  @nrwl/angular : Not Found
  @nrwl/cli : 10.2.1
  @nrwl/cypress : 10.2.1
  @nrwl/eslint-plugin-nx : 10.2.1
  @nrwl/express : Not Found
  @nrwl/jest : 10.2.1
  @nrwl/linter : 10.2.1
  @nrwl/nest : Not Found
  @nrwl/next : 10.2.1
  @nrwl/node : Not Found
  @nrwl/react : 10.2.1
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.2.1
  @nrwl/web : 10.2.1
  @nrwl/workspace : 10.2.1
  typescript : 4.0.3```

shared "lib" vuex store between multiple vue apps

Hi guys, im interested in migrating an existing project that has lots of shared business logic into NX workspaces.
these are 4 vue apps that share the same Vuex store and are just seperated by theme data.
i want to extract all UI components (these components also heavily use vuex getters) and vuex store into libs and each app will be it's own entity.
im trying to understand how to go about and execute this approach, or maybe it's just wrong?

thanks :)

[HELP WANTED] Nx plugin package is not including package specified deps

Description

I'm also developing nx plugins, but I got a strange trouble which seems to only occurs to me(so I choose to ask help from
the experienced community plugin developers instead of opening a issue in nx repo).
My problem is that nx plugin package doesn't include dependencies it used, these deps are npm packages. use --with-deps or --buildableProjectDepsInPackageJsonType=dependencies flag will only include packages in same repo.

For example, I got a plugin called nx-plugin-esbuild, its package.json file looks like this:

{
  "name": "nx-plugin-esbuild",
  "version": "0.0.1-1",
  "main": "src/index.js",
  "generators": "./generators.json",
  "executors": "./executors.json",
}

use nx run nx-plugin-esbuild:build --with-deps --buildableProjectDepsInPackageJsonType=dependencies will generate dist package.json like this:

{
  "name": "nx-plugin-esbuild",
  "version": "0.0.1-1",
  "main": "./src/index.js",
  "generators": "./generators.json",
  "executors": "./executors.json",
  "scripts": {
    "link": "pnpm link && npm-run-all --print-label --print-name  link:**",
    "link:decorator": "pnpm link ../esbuild-plugin-decorator",
    "link:alias-path": "pnpm link ../esbuild-plugin-alias-path",
    "link:devkit": " pnpm link ../nx-plugin-devkit"
  },
  "dependencies": {
    "esbuild-plugin-decorator": "0.0.1-1",
    "esbuild-plugin-alias-path": "0.0.1-1",
    "nx-plugin-devkit": "0.0.1-1",
  },
  "typings": "./src/index.d.ts"
}

and those node_module packages is ignored, like fs-extra chokidar..., I've checked nx plugins repo in github, their deps are correctly placed at packages/plugin-xxx/package.json, like this repo.

So how can i add deps to package/nx-plugin-esbuild/package.json? Does nx support deps auto detect?

Support for Webcomponent

Description

Support Vue CLI's web component generation, so the built artifacts can be integrated as web components.

Motivation

Many apps want to share components as web components and do want to integrate them, as they are framework agnostic. To be able to do that easily a type web component would be great.

Suggested Implementation

The Vue Cli already provides a target for it. It seems that all is similar to the library builder, but the target should be wc instead of lib. One way could be to implement a whole new type webcomponent, another to enhance the lib type so a option can be provided for setting the target.

Docusaurus TypeScript support

Hello 👋, Thanks for nx-plus plugins for nx! I use it for docusaurus & it works great 👌

Description

I would like to see an option to generate a Docusaurus App with TypeScript instead of only js.

Motivation

My Nx monorepo is composed of APIs in Nestjs in TypeScript, React Apps or Angular Apps in TypeScript, and all my libs & components are written in TS (or tsx). So it could be nice to also move Docusaurus to TypeScript (better interoperability and use of shared libs & components already written in TypeScript).

Suggested Implementation

It seems with Docusaurus 2 you can easily manage to use TypeScript out-of-the-box:

https://v2.docusaurus.io/docs/typescript-support

Could be a nice feature for Docusaurus v2 integration with Nx. I will try to look at the builder in the code to see if I could draft a PR easily.

Thank you for nx-plus plugins & for your help!

Unable to import workspace libraries

Current Behavior

Unable to import any of the libraries in my workspace.

Expected Behavior

The ability to import workspace libraries.

Steps to Reproduce

Create a workspace with NX 12, boostrap a react component library and docusaurus. Try to import the react component library.

Failure Logs

./apps/docs/src/scenes/BoidScene.tsx
Module not found: Can't resolve '@react-ecs/boids' in '/home/ldlework/src/react-ecs/apps/docs/src/scenes'./apps/docs/src/pages/index.tsx
Module not found: Can't resolve '@react-ecs/core' in '/home/ldlework/src/react-ecs/apps/docs/src/pages'


### Environment
  Node : 14.16.0
  OS   : linux x64
  yarn : 1.22.10
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.0.6
  @nrwl/cypress : 12.0.6
  @nrwl/devkit : 12.0.6
  @nrwl/eslint-plugin-nx : 12.0.6
  @nrwl/express : Not Found
  @nrwl/jest : 12.0.6
  @nrwl/linter : 12.0.6
  @nrwl/nest : Not Found
  @nrwl/next : 12.0.6
  @nrwl/node : Not Found
  @nrwl/react : 12.0.6
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.0.6
  @nrwl/web : 12.0.6
  @nrwl/workspace : 12.0.6
  @nrwl/storybook : 12.0.6
  @nrwl/gatsby : Not Found
  typescript : 4.1.5

Setup debugging ts code using webstorm

Description

Hello everyone, i want first to thanks the author and contributors of nrwl and this awesome plugin that make using monorepos using nestjs and vue possible.

My idea today is to make debugging typescript component code possible, i tried to follow official webstorm debugging tutorial setup for vuejs, but debugger dosen't stop at breaking point

If you have any idea how to make it work, that would be awesome
Thanks you

// setup webstorm and vue js official
Debugging the app
We can debug our application using WebStorm’s built-in debugger. All we have to do is create a new JavaScript debug configuration, specify the URL our app is running on (http://localhost:8080) in it, put the breakpoints right in the source code, and start the debug session.

Once the code where the breakpoint is has been triggered, the execution will stop, and you’ll see the local and global variables, the call stack, and many other things in the IDE debug tools window.

webstorm-debugging-vue-app

You can then explore the app state, evaluate expressions, add watches, and step through the code to see what’s going on in the app and investigate the possible problem.

Public Path option

Would it be possible to add the public path option from vue directly to this plugin? I do not think there is another way to set this. When using the vue.config.js it will disable all the other options set in workspace.json.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.