Image for post
Image for post

Firebase has come a long way and IMHO the API has gotten much easier to integrate into your applications even without third-party libraries. I was looking to do a video on integrating vuefire and after poking around for a while I decided to start with the basics first and then maybe later show a vuefire integration.

The whole project is a simple list/detail application in VueJS and Ionic Framework. We display the list, you can pull to refresh and you can click a list item to route to a detail page and load the user.

For the blog post, I am going over the firebaseService we create to access the data; the Ionic components are covered in the video linked below. …


Video Tutorial and Source Code

Image for post
Image for post

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. …


Image for post
Image for post

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! …


Image for post
Image for post

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.

Image for post
Image for post

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…

Image for post
Image for post

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…

Image for post
Image for post

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…


More Ionic VueJS and ReactJS Video Content FiWiC YouTube Channel

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.

In this video, we create a vue 3 google map component using the newer SFC component with setup. …

About

Clearly Innovative

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store