NPM install package within a plugin

[jorgeuos]

Hi,

I'm currently working on a plugin and I need to add(import) a package with NPM. I've read through the documentation, but I can't find any way to do from a plugin.

So here's some background info.

I generate a new Vue component with the ./console generate:vue-component command. I tweak it to my needs and now I want to import or require a package from NPM. Usually I would do a npm install <package_name> intuitively I would do it from my plugin folder. So I can run the ./console vue:build PluginName command, so I don't get weird dependency issues.

What is the best practice around this?

I'm sorry if I couldn't find the info in the docs. Very thankful for any help or pointer I could get.

/Jorge

[peterhashair]

HI, @jorgeuos I don't think we support package.json on the plugin level yet. ping @diosmosis

[diosmosis]

hi @jorgeuos, this is possible and we do it in a couple premium plugins. Your instincts are correct, you would run npm install in the plugin directory, then just import the code as usual from within your plugin's Vue code. If you need to add more type declarations to typescript, however, you'll also have to add another tsconfig.json file in the plugin directory:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "typeRoots": [
      "../../node_modules/@types",
      "../../plugins/CoreVue/types/index.d.ts",
      "./node_modules/@types"
    ],
    "types": [
      "angular",
      "jquery",
      "my-new-dependency",
      "..."
    ]
  }
}

I'll add docs for this soon.

[jorgeuos]

Hi @diosmosis && @peterhashair

Thank you for your reply.
I did a lot of trial-n-error over the weekend and you are correct. I happened to have an own .eslintrc.json file in my plugin. That was giving me compilation errors.

I deleted it and got other compilation errors, so I copy-pasted the one from the matomo root folder: .eslintrc.js.
And now it works.

I'll look into that tsconfig.json thing, it might help me with some VS Code quirks that I'm experiencing.

Thanks!

[sgiehl]

This should now be included in our docs with: matomo-org/developer-documentation#660
@jorgeuos If you have further questions related to that, let us know so we can extend the documentation.