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