Hi,
I had started using Vue/Cli v3.0 it looks awesome except it doesn't work for 3rd party plugins e.g when I try to install webpack-obfuscator with
$ vue add webpack-obfuscator

I get following error.

Installing vue-cli-plugin-webpack-obfuscator...

npm ERR! code E404
npm ERR! 404 Not Found: vue-cli-plugin-webpack-obfuscator@latest

I thought it might be this package doesn't exist in NPM but when I install with NPM install webpack-obfuscator it does install the plugin to node_modules.

Even though I installed it with NPM I am not able to invoke the plugin using vue.config.js. my config looks like

module.exports = {
  configureWebpack: {
    plugins: [
      new JavaScriptObfuscator(
        {
          rotateUnicodeArray: true,
          renameGlobals: true,
          stringArray: true,
          stringArrayEncoding: true,
          stringArrayThreshold: 0.5,
          target: "browser"
        },
        ["static/js/vendor**", "static/js/manifest**"]
      )
    ]
  }
};

I am struggling to install 3rd party plugins in VUE project. Please suggest how can I use 3rd party plugins. I had read documentation carefully but the provided guide lines doesn't work for me. I tried

vue add vue-container
vue add vue-i18n

with few others but none of them seems to work.

vue-cli commands only work with vue-cli plugins, but not with generic npm packages.

@Akryum is there a way to use NPM packages with configured webpack? I searched on google but I am not able to find any thread that is using vue/cli 3.0 vue.config.js to configure/add plugins to webpack. By they way I think vue-container and vue-i18n is VUE plugin.

One more thing from where I can find supported plugins for vue/cli 3 ?
I know this one https://github.com/vuejs/awesome-vue but are there any other repos?

Thanks

@riyasat
In about vue-i18n, You can install with vue-cli-plugin-i18n. :)
https://github.com/kazupon/vue-cli-plugin-i18n

And also, You can add the new category to vue-awesome Vue CLI plugin.

@kazupon it means only new plugins will be supported that are converted to vue-cli-plugin... in my opinion this might be big hurdle for new developers like me to find compatible plugins but eventually everyone will catch-up.

@riyasat There is a difference between a vue plugin and a vue-cli plugin. 😉
Vue-cli plugins are special packages that allow things like automatic webpack configuration, file generation, even modifying your main.js file to add things like Vue.use(VuePlugin) for you. This new type of package has been designed to ease the development of a Vue app with vue-cli 3.x, and they need to be specifically created to take advantage of the new vue-cli APIs.

To use a regular Vue plugin, just install it using npm/yarn and import it manually into your sources files and write the Vue.use(VuePlugin) code as usual (by following the said Vue plugin documentation).
For webpack plugins, install them with npm/yarn too and then extend the webpack configuration yourself.

@Akryum Thanks for the clarification :). Though I had tried extending webpack configuration as mentioned in the documentation none of them is working for me as I mentioned earlier for webpack-obfuscator.
for instance after installing webpack-obfuscator with npm, when I add following code to vue.config.js

module.exports = {
  configureWebpack: {
    plugins: [
      new JavaScriptObfuscator(
        {
          rotateUnicodeArray: true,
          renameGlobals: true,
          stringArray: true,
          stringArrayEncoding: true,
          stringArrayThreshold: 0.5,
          target: "browser"
        },
        ["static/js/vendor**", "static/js/manifest**"]
      )
    ]
  }
};

I got following error

> testapp@0.1.0 serve \vuejstests\testapp
> vue-cli-service serve

 ERROR  Error loading vue.config.js:
\vuejstests\testapp\node_modules\@vue\cli-service\lib\Service.js:174
        throw e
        ^

ReferenceError: JavaScriptObfuscator is not defined
    at Object.<anonymous> (\vuejstests\testapp\vue.config.js:4:11)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Service.loadUserOptions (\vuejstests\testapp\node_modules\@vue\cli-service\lib\Service.js:165:22)
    at new Service (\vuejstests\testapp\node_modules\@vue\cli-service\lib\Service.js:28:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! testapp@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the testapp@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

and if I use merge option then I got same error. Therefore I am thinking there is something wrong...

It seems you forgot to import the module:

const JavaScriptObfuscator = require('webpack-obfuscator')

module.exports = {
  configureWebpack: {
    // ...
  }
}

@Akryum I tried that but then npm run serve get stuck at serving....
I uninstalled and installed fresh installation of VUE and other packages now it seems working only in production mode :). Well I am happy with that :)

Thanks