Can't use my Capacitor plugin with Ionic Vue

Hello!

I ran into a few issues implementing my plugin to the Ionic Vue project me and my team have been working on. Wanting to troubleshoot, I backed up and started a fresh Ionic project along with a fresh Capacitor plugin, using the respective start and init commands accordingly. I found that a fresh, brand new boilerplate Capacitor plugin could not be installed to a brand new Ionic Vue project without quite a few linting issues. The plugin installs just fine, but as soon as I go to use it in the Vue project, the errors start flying.

I don’t have any code examples, as I was not able to isolate the problem in any way. I get linting errors that prevent the dev environment from building. The problem is usually:

Configuration for rule "@typescript-eslint/explicit-module-boundary-types" is invalid:
    [vue-cli-service] Value {"allowArgumentsExplicitlyTypedAsAny":true}
    should NOT have additional properties.

However, I have bypassed this with the addition of exceptions and overrides in the lint config… but it always seems like another linter gets in the way with another error. It seemed like based off of this SO post (SO Vue Linter) that the issue came from the .tsx/.vue filenames.

I should note that I then tested this with React and Angular projects, and there were no such errors. The plugin works great and as expected.

I don’t quite think this is Ionic Vue, but more with Vue + TS… but admittedly, I don’t know much about the problem. Perhaps someone can start up a Ionic Vue and cap plugin and see what I’m experiencing. As I don’t know exactly what is the issue, I was hoping I could get some insight here. Thanks!

Just answered here https://github.com/ionic-team/create-capacitor-plugin/issues/55#issuecomment-925754393

1 Like

Wanted to confirm the thread instructions worked for me. If you follow the plugin workflow properly, you’ll have built the plugin and have a /dist folder in your node_modules/plugin directory…

In my Ionic Vue project I did:
npm install eslint@7 --legacy-peer-deps

then added an .eslintignore file with the sole contents:
node_modules/my-custom-plugin/dist

This seems to be working without any major breaks. Thanks!