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


Update to previous post where we used REST API to access the content

Image for post
Image for post

Overview

I started a series on using strapi.io as a headless CMS for Ionic Framework application written in ReactJS. In all of the earlier videos, I was using the REST API to access the content in the CMS and I wanted to try using the GraphQL API that is provided.

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.

This post goes along with the video I created showing how to refactor the code from the REST API to start using the GraphQL…


Image for post
Image for post

Strapi.io — Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable, and developer-first.
www.strapi.io

Ionic Framework — An open source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web. https://ionicframework.com


LIMITED TIME DISCOUNT COUPON

Image for post
Image for post

The Book

Beta Release: Build a VueJS App with Ionic Framework, SQLite And Capacitor.

It is an ebook that I am self-publishing on Gumroad. The book is written using vuejs without typescript and walks you through the process of building a CRUD application using SQLite as the data storage mechanism. We also step through the process of running the app on IOS and Android since the SQLite Plugin only works on the device.

You can get more specifics about the contents of the book by checking out the book landing page .


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…

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…


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


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…

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