INTRODUCING
#THEFUTUREISWRITTENINCODE

Getting Started Building Mobile Apps With The Nuxt Ionic Module for Nuxt 3 #nuxtjs #ionic #vue Walking through a simple ionic framework deployment of a mobile app with camera integration using the Nuxt/Ionic module from Daniel Roe. Timestamp ---------------------------------------- 00:00 - Intro 01:37 - What are the tools and other resources 02:23 - Build Project Following Documentation 03:54 - Update nuxt.config.js to include module 04:30 - Remove app.vue 05:07 - Setting Up Capacitor using VS Code Ionic Plugin 06:57 - Setting the webDir when using VSCode Plugin and changing ionic:build command 09:10 - Add Pages and Run Nuxt App to test configuration 13:52 - Issue with ionic classes not getting loaded by default 15:31 - Add an Additional page to test Routing and navigation animations 21:58 - Deploy to android emulator 23:35 - Add Capacitor Plugin to take photos using native camera + shoutout to Daniel Roe !! 30:33 - Deploy to Emulator to use the camera 32:00 - deploy to device and test Additional Information ------------------------------------------- Module - https://ionic.roe.dev/ VS Code Plugin - https://marketplace.visualstudio.com/items?itemName=ionic.ionic Ionic Vue - https://ionicframework.com/vue Capacitor - https://capacitorjs.com/docs/apis/camera Volar Typescript Issue [FIXED] - https://github.com/ionic-team/ionic-framework/issues/24169# Project Source - https://github.com/aaronksaunders/nuxt-app-using-nuxt-ionic-module Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic

Working WIth Remix and the new version of React Router In React JS - A Look at Data APIs in DataBrowserRouter #remix #reactrouter #react #ionic #ionicframework This is based on BETA software... but it is still awesome to see what's coming!! Simple Application showing the following using the DataBrowserRouter, no useRefs, no change events for the form data... its excellent, it just works. This application also shows an approach for getting input in a modal and submitting it to a route's action function React Router v6.4 introduces all of the data abstractions from Remix for React Router SPAs. Now you can keep your UI and your data in sync with the URL automatically. Chapters --------------- 00:00 - Intro - New React Router, Data APIs 01:11 - Walking through the React Router Documentation as an Overview 03:03 - Moving To CodeSandbox.io - Setup 03:33 - DataBrowserRouter Setup 04:15 - Home Page 04:42 - About Page Adding Loader Functionality 11:10 - Home Page Add Data Mutation with Modal 17:22 - Home Page Action Function for actual Mutation 24:33 - Home Page Getting Data Back In UI With useActionData & useLoaderData 28:32 - Testing It All More Information ---------------------------- - React Router Documentation: https://beta.reactrouter.com/en/dev/getting-started/data - See It In CodeSandbox: https://codesandbox.io/s/remix-router-in-react-js-343czt - Remix Run Documentation: https://remix.run Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic

Working With Remix Router In A Vue Application with Ionic Framework UI Components #vuejs #remix #ionic ⚠️ remix-router-vue is very much in an alpha state and production usage is highly discouraged This is a walkthrough of a sample application build using the remix-router as a new way to build and structure VueJS applications. It brings over a fair bit of the Remix-Run functionality and I think it is pretty awesome. More Information ---------------------------- - Source Code - https://github.com/aaronksaunders/vue-ionic-remix-router-1 - Ionic Framework - https://ionicframework.com/vue - Remix Documentation - https://remix.run/ - Remix-Router Blog Post - https://remix.run/blog/remixing-react-router - Remix Router Project - https://www.npmjs.com/package/remix-router-vue Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration #remix #aws #authentication Walkthrough a code sample of integrating AWS Amplify with a Remix Application. We show how to implement complete authentication flows to your application with minimal boilerplate. We then make a database query using the AWS Appsync API to retrieve data. This video does not walkthrough setting up an aws amplify environment, there are plenty of videos cover that already, this just shows how to using remix with that environment Chapters --------------- 00:00 Introduction 01:18 Quick Application Demo 03:28 Changes In Root.jsx 04:29 Changes to Index.jsx, redirecting when not authenticated 05:28 Login.jsx, using AWS Amplify Authenticator Component 06:50 Using a Fetcher to Submit Credential Tokens to Create Session Cookie 07:47 In Session.Server.ts managing the session cookie 08:22 Loading Data Using AppSync API with credentials saved in Session Cookie 10:44 Using Client Side SDK to Get User Information 11:29 Signout using client SDK and clear server session information 12:14 Review Pattern Source Code -------------------- - https://github.com/aaronksaunders/amplify-remix-todos-1 Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies AWS Amplify Web Client SDK - https://docs.amplify.aws/cli/start/install/ AWS Amplify Node SDK - https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html AWS Amplify UI Components - https://ui.docs.amplify.aws/react/components/authenticator Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

UPDATED: Remix Firebase Email & Google Authentication Using Remix Cookie Package #remix #firebase #authentication Second attempt at integrating firebase with Remix for authentication. I used a combination of Server Token Validation and the client-side API's for authentication. - firebase auth remix run First Attempt: https://youtu.be/ZUVztkkY218 In this video I walk through the changes I implemented to make this work in more of the "Remix Way". In the first video, I was managing the cookie myself and in this version, I am leveraging the APIs provided on the Remix API (https://remix.run/docs/en/v1/api/remix#cookies) Source Code -------------------- - https://github.com/aaronksaunders/remix-firebase-sample-app Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies Firebase Client SDK - https://firebase.google.com/docs/auth/web/manage-users Firebase Admin SDK - https://firebase.google.com/docs/auth/admin/manage-cookies Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

Remix Firebase Email & Google Authentication #remix #firebase #authentication First attempt at integrating firebase with Remix for authentication. I used a combination of Server Token Validation and the client-side API's for authentication. - firebase auth remix run ************************************************************************* See this video for an updated approach using Remix Cookie Package - https://youtu.be/8GdYy9PWncI ************************************************************************* Let me know what you think of this approach, it is still a work in progress as I get a better understanding of the "Remix Way" of doing things. 00:00 - Intro 00:54 - Technical Approach 02:28 - Start Code Walkthrough Source Code -------------------- - https://github.com/aaronksaunders/remix-firebase-sample-app Documentation Links ---------------------------------- Firebase Client SDK - https://firebase.google.com/docs/auth/web/manage-users Firebase Admin SDK - https://firebase.google.com/docs/auth/admin/manage-cookies Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

How To Build A Nuxt 3 Ionic Capacitor Starter App, Supabase Setup and Authentication #nuxt3 #nuxt #supabase #capacitor Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/ Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/ Ionic Framework - An open source mobile 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/ Supabase - Supabase is an open source Firebase alternative. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage. - https://supabase.com/ This is a series of videos walking you through how to get started with building a mobile application with Nuxt 3 and Ionic Capacitor. In this video, we add Supabase Account Creation and Authentication to the project and deploy it to a mobile device We also touch on the following Nuxt 3 Topics - composables - https://v3.nuxtjs.org/guide/directory-structure/composables/ - plugins - https://v3.nuxtjs.org/guide/directory-structure/plugins - configuration - https://v3.nuxtjs.org/api/configuration/nuxt.config - middleware - https://v3.nuxtjs.org/guide/directory-structure/middleware Timestamps -------------------- 00:00 intro 01:43 Supabase Setup 05:00 Nuxt Config Changes to Access API Keys 06:50 Create Nuxt Plugin To Initialize Supabase Client 09:48 Create Composable to Access Supabase Client In App 13:18 Add Login Screen and Supabase Sign In API Call 23:05 Add Create Account Screen and Supabase Sign Up API Call 29:00 Turn Off Email Verification in Supabase, Missed This Earlier 32:58 Protected Routes Using Nuxt 3 Middleware 39:26 Ran Into Error With Provide and Inject 45:45 Deploy On Mobile Blog ------- https://dev.to/aaronksaunders/how-to-build-a-nuxt-3-ionic-capacitor-starter-app-supabase-setup-and-authentication-3gd0 Source Code -------------------- https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-3 Videos In Series -------------------------- Part 1 - https://youtu.be/tDYPZvjVTcc Part 2 - https://youtu.be/jwntqsrTXc4 Part 3 - https://youtu.be/SgnNFiMlHJE Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps #supabase https://www.clearlyinnovative.com

How To Build A Nuxt3 Ionic Capacitor Starter App #nuxt3 #vuejs #ionic #capacitor Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/ Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/ Ionic Framework - An open source mobile 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/ This is a walkthrough of how to get started with building a mobile application with nuxt3 and Ionic Capacitor. In this video, we add Ionic Vue Components to the Application to give it the mobile look and feel and then deploy to IOS. Videos In Series -------------------------- Part 1 - https://youtu.be/tDYPZvjVTcc Part 2 - https://youtu.be/jwntqsrTXc4 Part 3 - https://youtu.be/SgnNFiMlHJE Source Code -------------------- https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-2 Blog Post --------------- [Comming Soon] Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps https://www.clearlyinnovative.com

How To Build A Nuxt3 Ionic Capacitor Starter App #nuxt3 #vuejs #ionic #capacitor Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/ Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/ This is a walkthrough of how to get started with building a mobile application with nuxt3 and Ionic Capacitor. In this video, we create the basic project and then using the Ionic VS Code Extension, add IOS and Android libraries so we can deploy the application on mobile devices. In the next part of the video we will add server routes to nuxt and deploy a backend that can be connected to the mobile application for database access. Videos In Series -------------------------- Part 1 - https://youtu.be/tDYPZvjVTcc Part 2 - https://youtu.be/jwntqsrTXc4 Part 3 - https://youtu.be/SgnNFiMlHJE Source Code -------------------- https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app Blog Post --------------- https://dev.to/aaronksaunders/how-to-build-a-nuxt3-ionic-capacitor-starter-app-4d3k Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps https://www.clearlyinnovative.com