How to use Vanilla Javascript with ionic4/Cordova App

There doesn’t seem to be an area for ionic-v4 yet so I’m posting here.

I’m not trying to add to the forum duplication, but I’ve asked before, again:
Is there any way to use ionic-4 with plain javascript? I can’t seem to get an answer. I do not want to use a CDN link. I wish to use this within a cordova app entirely on the client side. So, I need to download the necessary items and use it in the of my html page. Like you would add any file/folder. So easy with jquery. Just download the entire file and add the script to the header: src=“js/Jquery-2.2.3.js” type=“text/javascript”

Can anyone help? Ionic 4 promised support for plain vanilla javascript and other platforms, but how is it being done? I do not want to be restricted to using Angular.


1 Like

Every time you ask it, this question reminds me of the Zen koan about the sound of one hand clapping.

Frameworks tend to ship with building and bundling tools, and documentation and samples of how to use them to make apps. You seem to be asking for these things, yet you do not wish to use the ones provided by any framework.

This strikes me as paradoxical. It would seem that at the moment you receive what you ask for, you would effectively have been given a framework, at which point you would reject it.

If you don’t like Angular, fine. Choose something else. I think it would be both wise for your app quality and much better for your productivity, though, if you chose something, because otherwise you will be rolling your own framework from scratch. Huge teams of really smart people have invested thousands of hours into making these frameworks, and they have been extensively tested and refined through community feedback. Why refuse offers from giants to lift you upon their shoulders?

Then ionic shouldn’t advertise that 4 will support vanilla javascript. Guess that is enough said. I’ll pass. Seems like this forum isn’t a friendly place for me.



npm install @ionic/core should do the job as I understood it.

From /

Additionally, within this package is a dist/ionic.js file and accompanying dist/ionic/ directory. These are the same files which are used by the CDN, and they’re available in this package so they can be apart of an app’s local development.

Is that what you are asking?


Thank you. That is exactly what I wanted to know. I appreciate it and will give it a go!

Like you would add any file/folder. So easy with jquery. Just download the entire file and add the script to the header


Last time I checked jQuery was not a UI component library, and definitely not lazy load optimized etc.

Quite right about jquery. One of the reasons that I’m looking for a solid replacement. My apps were built on jquery & jquerymobile. They are large, unwieldy things, but they get the job done. I want to rewrite them in a more modern and better development system, but I’m not the world’s greatest coder and need something that I can get my head around. I’ve seriously considered another platform, but it isn’t as well supported. I’ve waited a long time for ionic to get support for multiple platforms. I’ve been following ionic since it first started. I’m appreciative of your help on my question. I enjoy positive and supportive people. Thanks Tommertom and Sujan12. Now, I need to get busy and “play” with ionic4.

Best Regards,

Looking at your dev goals it does bear merit to look at frameworks and make a choice before leaping into recoding your app into the present state of technology

Josh Morony has a blog (dunno link) talking about this

I personally like angular becuz it is highly opinionated about basic dev choices making it very efficient to go around. There is a big community. And google is working hard to make it the best of te best

So do take that one with you as also mentioned in post #2

Hello everyone,
could someone please give more details on this topic.
I would like to use ionic exactly as Curious described: A local copy of the ionic framework which I can use with simple <script src="relative/path/to/ionicstuff"> tags.
There is a nice tutorial how to use Ionic without a framework here:

Only I don’t want to use a CDN like unpkg (because that requires that the app has an internet connection, right? No offline use possible). I’d like to download a copy into a local folder and use it from there.
I did install @ionic/core with npm as Sujan12 has suggested. I have now a node_modules folder full of packages, including @ionic and ionicons.

But how do I continue from there? What do I have to include and where? Do I have to use ES6?
I’d really appreciate a simple Hello World example to get me going, like the simple one in the tutorial mentioned above. I tried all kinds of approaches and always got mostly general js error messages like “xy” not found".

Curious, did you succeed and could you help? Or is there a tutorial somewhere which I could use?

My end goal would be that I would have a folder with all html+ionic+node_modules stuff and could copy that to a different PC which has no node or npm installed and no internet connection, and still be able to continue working from there. Is that possible?

Thanks in advance…

1 Like

Hi there,
i’m using ionic with vanillaJS by using CDN, its working so far good, but the components (alert, navigation, popovers etc) all are lazy-loaded by default and i dont want this lazy-loaded thing, because whenever i first time show an alert or navigate, it takes time which gives the feeling like nothing happened or its not working.

Is there something i can do about this ? Preload components or not lazy-load!!!, something, anything ???

1 Like

Same is true when using Ionic4 with Angular. First time a component is used, it takes a while to load which makes it seem unresponsive. Sometimes prompting a second click from user.

Would love to know if there is a way to preload.

1 Like

It’s 2020 April, David Dal Busco, a brilliant programer, wrote his article 2018 October, and his popover example doesn’t work at all today. Ionic, Stencil, absolutely gorgeous tools, are not really meant to be used without complex frameworks like Angular, React.
Rachel, the original poster used JQM, which was frozen on 2014 with version 1.4.5 JQM is still brilliant totally relevant even today. JQ and JQM are eternal, just like folk music, Elvis or Beatles.

Just to put JQ and JQ into perspective in 2020. JQM with its CSS is 0.4 M together with JQ 0.1 M, so all together 0.5 M. The total size of a small Ionic app is 38M 70 times bigger than a JQ/JQM app. Even when you work with JQM/JQ you have to learn a number of behind the scene technologies like CSS, JQ modules, the way JQ works in order to be proficient with JQM programming. When moving to ionic, stencil, angular, react you should learn at least ten times more behind the scene technologies. Even more complex CSS, Web Components, shadow DOMs, WebPack, the entire crazy complex building process. And in two years you can restart again because your fancy tool set was restructured and rearchitected (again). So, when you love to ride on the bleeding edge, look no further than ionic, stencil, absolutely gorgeous tools. If you just want a tool that is time-proven, dead simple to use and deliver stay with JQ/JQM.

1 Like

Hi you can just migrate to Onsenui it is more flexible than ionic framework but you can get the same result.

This is old but this may help someone in the future.

Find the @ionic/core folder inside node modules
Copy the build or dist folder
Paste it into the folder you use for index.html
In index.html use the script tag and the src = “path/to/ionic.js” and that should work.
Do the same for the ionicon.js

Now do a tag for link and stylesheet = for “path/to/ionic.css”
It did for me.

1 Like

This worked when testing in the browser, but when I tried to build it as a cordova app, the android webview wouldn’t load the files. The error was

Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.

I tried to build the ionic files into one file using webpack as per this stackoverflow question but I didn’t know how. Are you able to help me?

This is late but I cannot help with web pack. I should learn it as company are asking for skills in that tech

I’m a bit late here, but support for VanillaJS is great! We use Ionic cause of the access to hardware APIs and Svelte as our frontend UI. Tbh the framework compents provided in Angular+React for Ionic we’ve seen 100s of bugs over the years, so no more! ;-D

I don’t think it works, I used the cdn and my app is display on the browser

The question is how to deploy it to a native android app
No document on how to use ionic with vanilla JavaScript, it is not everyone that wants to use framework.

If there is no support for vanilla JavaScript they should not say it