Ionic Framework VueJS and SwiperJS

Ionic has depreciated IonSlides in the v6 release and recommends using the underlying library SwiperJS.

In this short post I show how to integrate SwiperJS and it VueJS wrapper to display a set of slides holding IonCards. How to dynamically add and removed slides from the list of slides using the SwiperJS library.

See Previous Video For Setting Up Vite & Ionic Project

Also because vitejs is awesome and fast, I will be using that as the starting point for my application. See more information on Ionic and ViteJS and how to setup the app in the video I posted last week.

Video Version of Blog Post

Adding SwiperJS

after the project is set up you…


Vite + Ionic v6 + VueJS

Since Ionic has announced the beta for v6, I wanted to see if I can start using ionic with ViteJS

If you want to understand more why Vite was created and what its benefits are, you can read here

The approach I took is to follow the instructions for creating a vuejs project in vite and then add in the Ionic stuff, it worked for me but if some has done it the other way, creating project in Ionic and. then add vite, please let me know.

After creating the vite project, you need to install the Ionic…


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


A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn’t boilerplatey or opinionated.

Introduction to React State Management with Zustand — YouTube

  • Zustand — https://zustand.surge.sh/ — Means condition or state in German - definition of zustand
  • global state is all of the objects that are needed through out the application
  • There are various state management packages available for react, the most common would probably be react-redux. We are looking for a more straight forward state management library that doesn't require a lot of boiler-plate
  • Blog Post on different State…

This is based on the quickstart example(s) provided by supabase using React.js and Next.js

Just a reminder from the Supabase Documentation what exactly supabase is

Supabase is an open source Firebase alternative. We are a service to:

Listen to database changes.

Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).

Create, update, and delete rows.

Manage your users and their permissions.

Interact with your database using a simple UI.

Intro

This example provides the steps to build a simple user management app (from scratch!) using Supabase and Vue.js. It includes:

  • Supabase Database: a Postgres database for storing your…


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/cli

Create 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 init

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

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