add support for vue config

[ZachJW34]

Current Behavior

No support for vue.config.js

Expected Behavior

Support vue.config.js

Related Issue(s)

#160

Also fixes an issue with create-playground script as it will install Nx 12 without being pinned (and using yarn create wasn't working for me).

I'm not 100% convinced on my implementation. It adds complexity supporting both workspace options and vue-config. It could be made simpler if the user chooses one or the other but I thought I'd wrap this PR up and get some thoughts on it as it is.

[BuckyMaler]

I don't like this direction. I think we should support workspace.json or vue.config.js, but not both. As a user it's unusual and confusing to merge configuration from multiple files for a single project. It also makes the code unnecessarily difficult to follow.

I don't know which option is better and we haven't gotten enough user feedback to determine what users would prefer. What I do know is we currently support ~50% of the options supported by vue.config.js and we can support up to ~90%. Our support being limited by file type, i.e. .json as opposed to .js.

My opinion is we should continue to add options on an as needed basis for use in workspace.json and wait for user feedback.

[BartInTheField]

For me, it is essential that the config can be set in a .js file. workspace.js support instead of vue.config.js will go a long way.

[BuckyMaler]

@BartInTheField thanks for your feedback. Can you explain one or two use cases where you've been blocked because workspace.json isn't as configurable as vue.config.js?

Please give #160 a 👍  to help us begin to gather user feedback about this.

[BartInTheField]

One use case we like to use is using the dotenv plugin to load in the stage for proxy server. The stage in this example will result in a developer specific stage (e.g. dev-bart).

require('dotenv').config({ path: '../.env' });

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: `https://api.${process.env.stage ||
                    'dev'}.application.com/`,
                changeOrigin: true,
                secure: true,
                logLevel: 'debug'
            }
        }
    },
};

[fallenrayne]

A project that I am working on could greatly use the vue.config.js route.

In my current Vue2 app I am utilizing both style-resources-loader with a config based default import for a scss variable file. I am also using vue-svg-loader and have not found a way to cleanly add it to my Nx prototype.

This would be a blocker for my project's transition to Nx. I can likely find work arounds but it is quite a large project so I am definitely looking for the least disruptive solution, which vue.config.js support would likely be.

[danielquintero]

I have the feeling this should be made possible following what custom-webpack does. Allowing you to specify where your vue.config.js lives and then a possible merge strategy.

[BuckyMaler]

@fallenrayne @danielquintero thanks for your feedback. If you have more please add it to #160.

Also, we support customizing your webpack configuration. The docs are here.

[SvenBudak]

@BuckyMaler Any news here? i hope for support of vue.config.js because webpack is to complicate for me. :)
I tryed today for about 6h to migrate a project with this vue.config.js:

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  publicPath: process.env.VUE_APP_BUILD_PATH,
  css: {
    loaderOptions: {
      sass: {
        prependData: `
        @import "@/scss/functions/_px-to-em.scss";
        @import "@/scss/mixins/_aspect-ratio.scss";
        @import "@/scss/mixins/_common.scss";
        @import "@/scss/mixins/_media.scss";
        @import "@/scss/mixins/_perfect-grid.scss";
        @import "@/scss/mixins/_rfs.scss";
        @import "@/scss/mixins/_spaces.scss";
        @import "@/scss/mixins/_typography.scss";
        @import "@/scss/_variables.scss";
        `
      }
    }
  }
}

But no way. i was not able to make the project run in NX because the vue.config.js is not working...

[SvenBudak]

If someone need a solution for loading scss files: Install sass-resources-loader and use this config:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-resources-loader',
            options: {
              // Provide path to the file with resources
              resources: [
                path.join(__dirname, 'dirty-webpack-solution.scss')
              ]
            },
          },
        ],
      },
    ],
  },
};

Then you need to create the file dirty-webpack-solution.scss where you import all the styles you want to have available globally.

[DaniilPonomarev-Web]

@SvenBudak Can you describe in more detail what and where you add? Thx y !!!

[SvenBudak]

@SvenBudak Can you describe in more detail what and where you add? Thx y !!!

I am very sorry... i dont remember this task anymore 100%. we switched now to angular because this and some other issues we had in nx with vue.

[DaniilPonomarev-Web]

@SvenBudak Can you describe in more detail what and where you add? Thx y !!!

I am very sorry... i dont remember this task anymore 100%. we switched now to angular because this and some other issues we had in nx with vue.

We are just starting a new project on nx + vue )) I'm thinking of moving to react. Thanks for the answer !

[AmbrosiaDevelopments]

With Vue3, is there a way to turn on runtimeCompiler without requiring vue.config.js? I want to configure custom elements during runtime using app.config.compilerOptions.isCustomElement but nx-plus/vue already has vue-loader configured so I can't change the options and add isCustomElement in configure-webpack.js. My custom elements are not in .vue files, they're defined in .ts files but the tags are used in the HTML of .vue files but they are continually loaded by Vue despite my best efforts to have them ignored.