A showcase app for Ionic. Supercharged by Svelte and Vite.
A starter app for all Ionic UI elements - based on Ionic's Tabs Starter
Install this starter:
git clone https://github.com/Tommertom/svelte-ionic-tabs-demo.git
cd svelte-ionic-tabs-demo
npm i
npm run dev
Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-tabs-demo
When using the online playground - make sure you pop-out the render window to see the demo in full size.
iPhone SE | Samsung S8+ |
---|---|
![]() |
![]() |
If you want to get started with Ionic, Svelte and Vite, just use one of the starters:
-
Blank demo
- https://github.com/Tommertom/svelte-ionic-blank-demo
npx degit Tommertom/svelte-ionic-blank-demo svelte-ionic-blank-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-blank-demo
-
Tabs demo
- https://github.com/Tommertom/svelte-ionic-tabs-demo
npx degit Tommertom/svelte-ionic-tabs-demo svelte-ionic-tabs-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-tabs-demo
-
Sidemenu demo
- https://github.com/Tommertom/svelte-ionic-sidemenu-demo
npx degit Tommertom/svelte-ionic-sidemenu-demo svelte-ionic-sidemenu-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-sidemenu-demo
-
Mystarter demo - taking photo with Capacitor
- https://github.com/Tommertom/svelte-ionic-mystarter-demo
npx degit Tommertom/svelte-ionic-mystarter-demo svelte-ionic-mystarter-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-mystarter-demo
-
List demo
- https://github.com/Tommertom/svelte-ionic-list-demo
npx degit Tommertom/svelte-ionic-list-demo svelte-ionic-list-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-list-demo
-
Conference demo - (sort of...check its README)
- https://github.com/Tommertom/svelte-ionic-conference-demo
npx degit Tommertom/svelte-ionic-conference-demo svelte-ionic-conference-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-conference-demo
When using the online playground - make sure you pop-out the render window to see the demo in full size.
And the official demo app - https://github.com/Tommertom/svelte-ionic-app
To help you managing state of the service worker and the various events, a simple svelte store is provided for (lib/pwa.ts
). This store wraps the various events of the service worker in a readable store and a number of derived stores so you can easily listen to various events.
While most tutorials provide you the basics to do all these separately and in an "Hello world" fashion, having all in a store helps wiring things up to the UI across various places in the code.
The following derived stores are implemented:
needRefresh
:boolean
telling you if there is an update availableupdateObject
:undefined|UpdateObject
. When UpdateObject is provided, you can call itsupdateSWObject()
method to update the appofflineReady
:boolean
telling you all offline assets have been loadedregisterError
:any
- the error message when the registration of the service worker failedregistration
:undefined|ServiceWorkerRegistration
- the service worker registration object - when succesfullbeforeInstallPrompt
-undefined|BeforeInstallPromptEvent
- which you can use to fire the.prompt()
method to invoke the install prompt. N.B. this needs to happen right after an userevent (like button press)!
All these props are also available via the pwaStatusStream
readable store.
This code uses Roxi's newest version of its router. See https://v3.ci.routify.dev/docs#guide to know more. By the time of this writing, this is actually still in beta. If you want to change router, please make sure you change the hooks in IonPage.svelte (part of $ionic/svelte/components/IonPage.svelte
).
Please refer to the README on the main repo - https://github.com/Tommertom/svelte-ionic-app