Using Ionic Web Components as Vanilla JS

Hi,

I love the UI components you guys have put together. And I’ve used the framework for apps. I’ve watched your video presentation at Polymer Summit last year and to your guest speaker on The Web Platform podcast.

It sounds like you’re moving heavily into web components and I couldn’t be happier about that. My question is how can I use the web components you’ve put together in a a NON ionic framework? Ideally, I should be able to use these in a vanilla JS environment. I’m purposely NOT using Angular or React. Though, I am using Polymer, gulp, babel and webpack as build tools for es5 and es6 bundling.

Do you have the components up on npm as es6 imports?

Love the work you’re doing. Hoping to continue utilizing the UI aspects while moving away from framework churn.

p.s. And, in this particular case, I’m just building out PWAs, so wouldn’t need the native aspects.

You need to use Ionic 4, which isn’t production ready yet. But pieces of it are. ion-grid is probably fine to use in vanilla JS, for example. Ionicons v4 is also ready for prime time, I believe.

If you want to test the alpha version of Ionic 4, add a script tag to the CDN:

<script src="https://unpkg.com/@ionic/core@4.0.0-alpha.7/dist/ionic.js"></script>

And you should be good to go. See Readme.md

This is great! Love what you’re doing here, as I’m a fan of web components and working mostly framework free. Are there compoenents/areas you could use help on?

And also, any plans on adding the family of components to nom?

The ionic team doesn’t visit this forum very often (it’s mostly run by community members). If you want to get in touch with them, it’s probably best to join the ionic-worldwide slack or ask on twitter (e.g. @Justinwillis96)

You might really enjoy Stencil. There’s a dedicated Slack for it. It’s basically a web component compiler that the Ionic team has created. I’ve built a few web components with it. (Example) The goal is for those components to be plug-and-run anywhere, but it isn’t quite true yet.

1 Like