Image for post
Image for post

A simple introduction to using Vuex 4 for state management in Vuejs version 3 with Ionic Framework

We cover two specific scenarios when using a simple count store

  • State management of the store by dispatching an action to change the value in the store, no payload passed
  • State management of the store by dispatching an action to change the value in the store, using the payload passed in my the component

Links


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


Image for post
Image for post

Overview

Forms and Form Validation are a key part of many applications so I wanted to create a small sample application showing one library VeeValidate Template Based Validation for Vue.js, and how to integrate it with the new Vue3 Release.

Since a lot of folks who read my content know I work with Ionic Framework, I have implemented this solution with Ionic Vue3 Web Components

Video

Additional Examples

Image for post
Image for post

Setting Initial Values

<v-form v-slot="{ values }" 
@submit="onSubmit"
:initialValues="formData">
</v-form>

In the script, define the object with the appropriate key/value pairs to be assigned to the form

setup() {
// set some initial values
const formData = ref<any>({
title: "Aaron",
body: null,
gender: "MALE",
save : false…

Image for post
Image for post

Update from original post Jan 2019 which was based on Vue.js version 2 https://dev.to/aaronksaunders/mobile-development-w-vuejs-and-ionic-capacitor-plugins-5fb5

Overview

This sample/tutorial will walk through the integration of the following features in an Ionic Capacitor web/mobile application using the latest version Ionic Framework Vue.js Components and Vue.js, version three which is still in beta.

I am also using the latest beta release of the Ionic integration with Vue. I am using typescript in the example and relying heavily on the new pattern of composition when creating single file components.

created project using latest cli from Ionic using ionic start --tag vue-beta

  • Using VueJS for basic application with Ionic…


Image for post
Image for post

Overview

Create an “Objective” that has subtasks that are required to complete the Objective. Use React Hook Form fields Array functionality to create and Ionic Framework React Components to create a component for a modal form to capture the data.

Whats Covered In The Video

► 1:56 Coding Starts — creating a form with dynamic list items
► 9:38 Passing the form’s data back to parent in a structured object using react hook form
► 13:36 Creating a reusable component, passing properties and calling functions for success in parent component
► 18:07 Going All in with React Hook Form for all input fields
► 21:45 Using Ionic React Components for styling
► 26:24 Deleting Items from the form array
► 27:29 Adding ids to subtasks in the array using an hidden input field
► 29:40 Wrap up

The Video

Source Code


Image for post
Image for post

The Magic..

We listed for this event, MediaQueryListEvent and we get an object that looks something like this back.

MediaQueryListEvent : {
isTrusted: true,
media: "(min-width: 768px)",
matches: true,
...
}

We are looking to see if we get a match from the query and if so, then we want to take action.

Let’s set up our state variable mQuery using useState and initialized it by getting the current window innerWidth.

const [mQuery, setMQuery] = React.useState<any>({
matches: window.innerWidth > 768 ? true : false,
});

In our component we will listen for this event, from the window object by calling window.matchMedia

useEffect(() => {
let mediaQuery = window.matchMedia("(min-width: 768px)")…


Image for post
Image for post

Overview

To wrap up this series we are going to do the following

  • Demonstrate a pattern I use for passing data into a IonModal Page to use the same components for creating and editing an object.
  • Managing Default Values with React Hook Form & Ionic React Components, React Hook Form is a great library that simplifies forms in ReactJS
  • Updating Data in Firebase, Firestore using ReactFire; added the functionality to the Context we introduced in the last post.

For brevity, I have only included snippets of code here, the full source code is available in the github project linked at end of…


Image for post
Image for post

This is a continuation of a series of blog post showing Firebase ReactFire in action with Ionic Framework React Components. In this post, we will move all of the data interaction with firebase into a separate component using Context API and React Hooks to separate Firebase specific code from the User Interface components of the application.

Setting Up The Context

Add the required imports to the file

// DataContext.tsx
import React from "react";
import { useFirebaseApp, useFirestoreCollectionData } from "reactfire";
import { FIREBASE_COLLECTION_NAME } from "./env";
// type for accessing the data structure for saving in firebase
import { IModalData } from "./components/AddSomethingModal";

Next we can describe the shape of the state as an interface that we will use when setting up the context, it will allow us to use intellisense and errors will get generated when compiling is parameters don’t match what is…

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