Video Tutorial and Source Code

We show an approach to managing page renders in an Ionic Framework Tab Application. You can see the side effects in an application that has multiple tabs, but in general, it happens in all apps… rendering of pages that are not visible.

The documentation explains what is happening

From Ionic React Documentation:
“For instance, componentDidMount fires the first time a page is displayed, but if you navigate away from the page “Ionic might keep the page around in the DOM”, and a subsequent visit to the page might not call componentDidMount again. …

The amazing thing about Ionic Framework is that it doesn’t ask you to get into the battle over which is better, React, Vue 3, or Angular it just says come build something using our web components.

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular and React. ( AND VUE )

Recently the VueJS components and CLI integration for Ionic became available through the official release and needless to say I was excited.

I recorded a simple tutorial to show how to create and integrate slides into your solution using the IonSlides, which is built on top of SwiperJS, Component in VueJS. Then the next day I saw a similar question about integrating IonSlides using ReactJS… So I made another video! …

Showing how to build a basic CRUD application using Composition API and Firebase Storage using the new Ionic Framework Web Components for Vue 3.

We cover the following:

• Firebase Authentication
• Using Tabs In Your Vue Application
• Child/Nested Routes In Tab Application
• Using Ionic Modals
• Using Ionic Alerts
• Using Composition API
• CRUD for data in memory, will use firebase eventually

I am using the latest beta release of the Ionic Integration with Vuejs Beta 3. I am using typescript in the example and relying heavily on the new pattern of Composition API when creating single file components.

Below are links to the first four videos and next week I will release two more videos covering additional topics as we work through building the applications

That’s a long title but there is a lot going on here.

Overview

Source code provides and fully commented starter template for creating solutions based on this starter template. There is minimal use of typescript and we are using the older vue2 style options API instead of the newer vue3 composition API using the setup method in the components.

Ionic VueJS Ebook — Coming Soon

Please give me some feedback on my book, early folks will get a discount on the book, join the email list to get notified — https://leanpub.com/ionic-vue-sqlite-crud/

Looking for a firebase alternative…

I stumbled across Supabase.io a while ago but got interested again when I saw they just got 6M in funding so I figured I would take it for a spin and also do some live coding.

The website says: The Open Source Firebase Alternative

Create a backend in less than 2 minutes. Start your project with a Postgres Database, Authentication, instant APIs, and real-time subscriptions.

Configuring Project

The video is here along with the source code. To get the project to work you will need your own credentials and then modify the config.js file

import { createClient } from "@supabase/supabase-js";
const SUPABASE_KEY = "FILL_IN_FROM_YOUR_SUPABASE_PROJECT";
const SUPABASE_URL = "FILL_IN_FROM_YOUR_SUPABASE_PROJECT";
export const SUPABASE_CLIENT = createClient(SUPABASE_URL…

The last of the 3 part video series is available now. Ionic Framework Vue 3 and Google Maps Example Project — Maps, Markers, GeoCoder API, Map Resizing, Adding Markers, Adding InfoWindow

Jump To Videos

PART ONE: https://youtu.be/HS2wdAtCYKg
PART TWO: https://youtu.be/XAaDe0-59EQ
PART THREE: https://youtu.be/XS-lIBBIJSc

Maps are a critical part of many web and mobile solutions and the rich set of functionality provided by Google Maps make it an obvious choice in many situations. When I was looking for a Vue3 compatible solution I really didn’t find anything I loved so I decided to see how to roll my own.

Part One — Getting the Map on The Page

1) In this video, we create a vue 3 google map component using the newer SFC component with setup. We will and marker, infoboxes, event handlers, and access to related services as we work through the project.
We also end the video by deploying the build to IOS and Android devices to showcase…