How to use plugins like Filesystem in VanillaJS

I have been trying to use this plugin in VanillaJS, but I cannot use it now.

Before it was possible because it was part of the capacitorjs file, so if we used it according to the docs it works in v2, but, since it was taken out of the capacitor package and added to its own package in v3 it doesn’t work anymore.

I was wondering how to use it now, since I have been trying to add it to a project with no luck.

A reminder that this is for VanillaJS, not Angular or React.

Using the plugins as explain here doesn’t work anymore in v3

Theres examples here: Capacitor - build cross platform apps with the web

You need to install the plugins as explained on each plugin docs, then you can still use Capacitor.Plugins object, every plugin you install will be added to the object, but that will only work on iOS and Android native builds.

If you want to use plugins on web, I recommend using a bundler/loader.

If you don’t want to use a bundler/loader, you can use something simpler like pika web.

By running npx @pika/web --dest www, it searches for packages in your node_modules and copies them to the www folder. Then you can create a .js file and put it in your head like this <script src="script.js" type="module"></script>, and inside it you can do import { Camera } from './@capacitor/camera.js'; and use it as the plugin docs say.

Well, this still looks like a bundler/loader, but simpler.

2 Likes

I already tried that and it didn’t work. Nothing works as in the official docs.

@jcesarmobile

I will try pika/web and see if that works, thanks .