Overview
The idea here is to show how to create a navigation stack in your Ionic VueJS Application that is specifically for a modal dialog. The modal dialog will still be working with pages, pushing and popping onto the navigation stack and the changes will not impact the overall application navigation.
Source code available at the end of the blog post, I have edited out imports to keep the code concise
Overview
This video series covers Create React App, ReactFire, Redux Toolkit and Firebase Emulator to build a simple CRUD application.
When I am developing solutions I like to find tools that make it easier for me to focus on adding value through the application and spend less time on the technical implementation. I believe this combination can be beneficial to you also, so please take a look.
Setup, Login, Logout, And Testing With Firebase Emulator
In part one, We set up the firebase project and connected it all to the firebase emulator for authentication and account creation all using reactfire. We will build the login screen and the…
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
Welcome,
In the last few weeks, I mixed it up with some VueJS and ReactJS. Had a few videos that were quite popular but the most popular was the video on using StorybookJS With Vue JS and Ionic Framework. You can see all the videos here on the YouTube Channel
How To Use Storybook with Ionic Framework and Vue JS
Intro video for configuring vuejs storybook and ionic framework.We will create a story for a LoginForm component with two input fields that emits events for login and create account
NEW REACT CONTENT
Quick Intro To ReactJS React Fire…
Video
Ionic Vue JS AWS Amplify Authentication CRUD Tutorial Part 1, Authentication UI Component — YouTube
Getting Started
Following the directions from Amplify Documentation
npm install -g @aws-amplify/cliCreate AWS Account. If you don’t already have an AWS account, you’ll need to create one in order to follow the steps outlined in this tutorial.
Configure Amplify if you haven’t done that before. There is a great video walkthrough or step by step instructions provided here
Workflow for Adding Authentication
Initialize the project for use with amplify. This project is the base Ionic Vue Application built from the cli using the blank template.
amplify initAdd authentication……
Managing Form Validation In Vue with Custom Form Components And Vee-Validate Composition API
We are going to show how to create decoupled form components that can be used/reused in your application and utilizing the composition API functionality of Vee Validate and Yup to validate and submit the form.
In the graphic above, the Credentials section is a separate component from the Personal Info section yet we are able to manage retrieving the values of the components and properly validate the form fields as if both components were just elements in one form.
Overview
This is a quick overview as a companion document to video tutorial linked below.
We will create a story for a LoginForm component with two input fields that emits events for login and create account.
There are a few extra steps that you need to follow to get your Ionic Vue project working together with Storybook and luckily once you get Storybook project configure for your first story, you are good to go for the remainder of the stories you create.
Lets Go
Install storybook at the root of your project and launch it.
npx sb@next initnpm run storybook
We need…
Update to previous post where we used REST API to access the content
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…
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
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 .
Clearly Innovative
DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru
