I've seen that config is defined based on user webpack chain:

and then used to remove Vue instances:

Is it possible to create the config another way, apply externals and then apply the chain?

If it's not, maybe a flag on vue.config can do that, so we add an "if" before applying externals

Personally, not having reviewed the source code in depth, @trickstival approach seems like a simple, backwards compatible solution to the problem. We would be happy with a change like that!

I'm still trying to understand the project structure as a whole, but I imagine something like that might work:

    if (!api.service.projectOptions.keepVueInstance) {
      // externalize Vue in case user imports it
      config
        .externals({
          ...config.get('externals'),
          vue: {
            commonjs: 'vue',
            commonjs2: 'vue',
            root: 'Vue'
          }
        })
    }

Here in the original file:

But I'm not sure how to create a test to it right now, still searching some examples in the project

Looking at the code snippet you provided, I might suggest a slightly different incarnation of it. That approach has a limitation in that if your "keepVueInstance" is false, then externals that the developer wanted to configure will not be applied either.

Maybe something like the following:

// externalize Vue in case user imports it

config.externals({
     ...config.get('externals'),
     ...(!api.service.projectOptions.keepVueInstance ? { 
          vue: {
               commonjs: 'vue',
               commonjs2: 'vue',
               root: 'Vue'
          }
     } : {})
   })

That's actually much better!

Apologies for the formatting, just fixed it. I am still learning my way around GitHub's formatting features.

[OFFTOPIC]

If you add js after your backticks you get some code highlighting. Like that:
` ``js
let a = 'hey'

`` `
Without spaces:

let a = 'hey'

i am trying to do something very similar (a core app with modules the user can install, but i don't want to update the app when new modules become available). I justed wanted to start looking into the lib or wc option when i tumbled upon this. If you want to load them at runtime, won't the webcomponent build be an option? or does the webcomponent solution not offer the following capabilities:

<component :is="moduleA">slot content</component>

I'm trying to do this exact thing. Is there any workaround? Also, I wonder if this issue is up for grabs, I would like to work on it.

I'm skeptical about the actual use case.
But if we have to support it, I think vue.config.js is not the best place to put this option, as it only applies the lib or web component target. This name also leads to confusion (Vue instance typically refers to the result of new Vue).

What about adding a flag to the build command? Like:

--inline-vue         include the Vue module in the final bundle of library or web component target

I got my plan to work by globally registering the components i wanted to share to the subcomponents. This way i don't have to call anything special. For data transfer between both i use either props or vuex. I build with target lib and include them using dynamic imports with the native require instead of webpack require.

So far no issues for me

@sodatea When will it be released？ i strongly need this feature

@mithom how do you resolve this question? is there some code to see ?

@sodatea, I really like flag for build command more than vue.config.js option.

Worth updating #4261 PR?

@romansp Yeah go ahead please.

@sodatea I updated #4261 PR. I think we can continue discussion over there.

@sodatea
Is it possible to merge and publish as soon as possible?

This feature is now shipped in both v3.11.0 & v4.0.0-rc.0

@sodatea thanks. perfect!

When inline flag is true, is Vue attached to global variable?

What if two components bundle different versions of Vue?

@Dika-pro no. Vue is module