INTRODUCING
#THEFUTUREISWRITTENINCODE

Payload CMS Nuxt JS - Authentication in Nuxt Using a Custom Plugin #payloadcms #nuxtjs #vuejs #webdevelopment This video covers one way to integrate Payload CMS SignIn, SignOut and Create Account in a Nuxt JS Application. Payload CMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms - https://payloadcms.com/ ⚠️ Payload CMS 2.0 is coming out next week so I didn't want to go too deep here since this is v1. I will be updating all of the Payload CMS content to account for changes in v2 It includes the code for the necessary pages the custom plugin for connecting with Payload CMS to get current user and manage the user information; and the middleware for controlling access to application pages Payload CMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms 👉🏾 Setting Up Payload CMS - https://youtu.be/TDd9EedIrGY 💥 Chapters -------------------------- 00:00 - Introduction 01:07 - How it works, App Demo 02:15 - Looking at the code - Custom Plugin 04:36 - Auth Middleware to Control Page Access 05:25 - Index/ Home Page 07:33 - Login Page 08:50 - Wrap Up 💥 Links -------------------------- - Payload CMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass 🚀 Blog Post - https://dev.to/aaronksaunders/payload-cms-authentication-in-nuxt-using-a-custom-plugin-1gg5 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb

Payload CMS Ionic Vue - Deploy To IOS and Android In this video series, we will set up PayloadCMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can log in using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework. In this video, Part 4, we show how to get the application deployed on IOS and Android devices using Ionic Framework Capacitor Payload CMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms Ionic Framework - The mobile SDK for the Web. An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework The Series ========== Part 1 will take us from setting up the project through logging in with Customer collection from a vuejs web application - https://youtu.be/TDd9EedIrGY?si=ls9YV1s49MSqZS4p Part 2 will handle checking for existing user's session, and discussing cookies - https://youtu.be/Tj7eM7tEiwM Part 3 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Intro 00:32 - Reviewing tools used in application 01:52 - Using vscode extension for setting up Ionic Capacitor project starting with IOS 03:09 - Setting up debuggung for IOS app using Safari 04:49 - Updating authservice and consolidating API calls 09:38 - Changing url to Payload CMS and resolving CORS 10:30 - Testing sign-in and getUser on IOS 12:31 - Using JWT for authentication with server API routes, Saving JWT locally 23:40 - Signout and clearing stored JWT 25:40 - Deploying and debuggung on Android 28:30 - Configuring android scheme, resolving CLEAR TEXT issue 31:00 - Setting localhost on Payload CMS server to support android 34:50 - Final test 💥 Links -------------------------- - Payload CMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass - Ionic Framework - https://ionicframework.com/ - Ionic Capacitor - https://capacitorjs.com/ 🚀 SOURCE CODE - https://github.com/aaronksaunders/payload-vue-ionic-video 🚀 BLOG POST - Coming Soon 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb #capacitor #mobileapp #mobileappsrt

In this video series, we will set up Payload CMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can log in using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework. PayloadCMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms Ionic Framework - The mobile SDK for the Web. An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework The Series ========== Part 1 - https://youtu.be/TDd9EedIrGY?si=ls9YV1s49MSqZS4p Part 2 - https://youtu.be/Tj7eM7tEiwM Part 3 - https://youtu.be/57RY3fbWOnU Part 4 - Coming Soon - Migrating to the mobile app, managing JWT for authenticated access 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Links -------------------------- - Payload CMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass - Ionic Framework - https://ionicframework.com/ 🚀 SOURCE CODE - https://github.com/aaronksaunders/payload-vue-ionic-video 🚀 BLOG POST - Coming Soon 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders

In this video series, we will set up PayloadCMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can log in using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework. In this video, Part 3, we show how to create a new user account and we do some refactoring on the API method calls Payload CMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms Ionic Framework - The mobile SDK for the Web. An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework The Series ========== Part 1 will take us from setting up the project through logging in with Customer collection from a vuejs web application - https://youtu.be/TDd9EedIrGY?si=ls9YV1s49MSqZS4p Part 2 will handle checking for existing user's session, and discussing cookies - https://youtu.be/Tj7eM7tEiwM Part 3 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 Introduction 00:52 Modify Customer Collection Access To Allow Create 02:47 Creating the SignUp Page 05:31 Adding Ionic DateTimeButton to CaptureBirthday 08:45 Writing HandleSignUp Function 11:40 Testing Signup UI, Minor Edits 13:02 Testing Signup Functionality 14:50 Signup Works Fine, But Doesn't Login User 15:35 Refactor To Include AuthService 21:44 Testing Complete SignUp Process with Login 23:01 Wrap Up 💥 Links -------------------------- - Payload CMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass - Ionic Framework - https://ionicframework.com/ 🚀 SOURCE CODE - https://github.com/aaronksaunders/payload-vue-ionic-video 🚀 BLOG POST - Coming Soon 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb

In this video series, we will set up Payload CMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can log in using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework. In this video, Part 2, we will handle checking for existing user's session and discussing the payload-token cookies that is being used. Payload CMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms Ionic Framework - The mobile SDK for the Web. An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework The Series ========== Part 1 will take us from setting up the project through logging in with Customer collection from a vuejs web application - https://youtu.be/TDd9EedIrGY?si=ls9YV1s49MSqZS4p Part 2 will handle checking for existing user's session, and discussing cookies - https://youtu.be/Tj7eM7tEiwM Part 3 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 Introduction - Working with http-only cookies, getting current user 01:25 Modifying Code in Home Page to Check for User 05:30 Checking onMount in HomePage.vue for the user 10:21 Adding Credentials Included to Ensure we get the cookies/credentials 11:48 Checking for Cookie in Browser's Chrome Developer Tools 13:22 Setting CORS and CSRF in payload.config.ts 💥 Links -------------------------- - Payload CMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass - Ionic Framework - https://ionicframework.com/ 🚀 SOURCE CODE - https://github.com/aaronksaunders/payload-vue-ionic-video 🚀 BLOG POST - Coming Soon 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders #payloadcms #vue #ionic #typescript #cms #nuxtjs

Getting Started with Payload CMS & Vue JS - Free, Open Source, Typescript, Extensible - with paid cloud option In this video series, we will set up Payload CMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can login using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework. Payload CMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms Ionic Framework - The mobile SDK for the Web. An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework The Series ========== Part 1 will take us from setting up the project through logging in with Customer collection from a vuejs web application - https://youtu.be/TDd9EedIrGY?si=ls9YV1s49MSqZS4p Part 2 will handle checking for existing user's session, and discussing cookies - https://youtu.be/Tj7eM7tEiwM Part 3 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Introduction 01:23 - About PayloadCMS 04:22 - Project Setup and Installation 10:30 - Launching Admin Console - REST API, GraphQL API Exposed 13:00 - Looking At A Collection from the Source Code - Users.ts 14:00 - Create New Collection - Customers.ts 19:02 - Looking In the MongoDB at our Collections 19:41 - About the Vue Application, Ionic Framework and Mobile App 20:20 - Client/Website/Mobile App Project Setup 22:40 - Walkthrough of the template App Created 23:09 - Adding Routes for Create Account & Login 23:40 - Creating SignIn and SignUp Pages and Explaining UI Components 24:45 - The SignIn Page UI / template section 26:50 - The SignIn Page Code / script section 30:20 - PayloadCMS Documentation - Login 31:44 - Integrating PayloadCMS Login REST API 35:47 - Resolving CORS Issues Using payload.config.ts 37:30 - Login Working, AuthToken and Cookie 💥 Links -------------------------- - Payload CMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass - Ionic Framework - https://ionicframework.com/ 🚀 SOURCE CODE - https://github.com/aaronksaunders/payload-vue-ionic-video 🚀 BLOG POST - https://dev.to/aaronksaunders/getting-started-with-payloadcms-vue-js-46mn 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb

#nuxtjs #typescript #trpc Build a full-stack typescript nuxt application without the boilerplate code of tRPC using the nuxt-remote-fn module we will build a simple nuxt application to save and retrieve data from a sqlite database through a typesafe server-side API. ## Links - FULL VIDEO - https://youtu.be/37VR1hfHq1o - BLOG - https://dev.to/aaronksaunders/full-stack-nuxt-typescript-app-without-trpc-3io7 - CODE - https://github.com/aaronksaunders/remote-fn-nuxt-youtube-app - nuxt-remote-fn - https://github.com/wobsoriano/nuxt-remote-fn - better-sqlite-3 - https://github.com/WiseLibs/better-sqlite3

A tRPC Alternative for a Nuxt FullStack Typesafe Application #nuxt #vue #trpc Build a full-stack typescript nuxt application without the boilerplate code of tRPC using the nuxt-remote-fn module we will build a simple nuxt application to save and retrieve data from a sqlite database through a typesafe server-side API. 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - introduction 02:08 - Project Setup 03:20 - Create and Test A Simple Remote Function 06:50 - More Complex Example 07:25 - Create SQLite Service For Database Interaction 08:18 - Create Remote Function to Add To Database 12:41 - Create Remote Function to Query Database 14:57 - Using useAsyncData when Querying Database on Client 17:55 - Getting Typed Results from Remote Function to Query Database 20:20 - Demonstrating Type safety of Remote Function to Add To Database 23:30 - Handling Error from Remote Functions 26:40 - Wrap Up 💥 Links -------------------------- - Nuxt tRPC Video Series - https://www.youtube.com/watch?v=XX-4A4xkRB8 - blog - https://dev.to/aaronksaunders/full-stack-nuxt-typescript-app-without-trpc-3io7 - nuxt-remote-fn - https://github.com/wobsoriano/nuxt-remote-fn - better-sqlite-3 - https://github.com/WiseLibs/better-sqlite3 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders #typescripttutorial #nuxtjs #typescript #sqlite #sqlite3 #bettersqlite

Getting Started with tRPC Nuxt Part 3 - Finalizing Database Queries and Adding Nuxt UI - Build A Full-Stack Typescript Application #tRPC #nuxt #vuejs tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. Experience the full power of TypeScript inference to boost productivity for your NUXT full-stack application. 💥 This is the third video in the series ---------------------------------------------------------------- Part One - https://youtu.be/XX-4A4xkRB8 Part Two - https://youtu.be/qkH-nxVglXY Part Three - https://youtu.be/5jIPf5naq38 In this video, we are adding a UI for the application using Nuxt UI and connecting the application to the tRPC API for creating new thought entries using NuxtUI Form and displaying query of all thoughts using Nuxt UI Data Table 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Introduction 01:06 - Cleanup From Last Video - Setting Appropriate Type On Return Value 02:00 - Setup for Nuxt UI In Project 03:04 - UContainer Integration 03:50 - UTable Integration, Data Table for List Of Thoughts 06:08 - UCard 07:25 - UForm Integration, Form for Adding Thoughts 12:59 - USelect - Provide the predefined moods in the form 16:00 - Using Information From Form to Make Call Using tRPC to Save New Thought 21:12 - Update Data Table using refresh() from the useQuery Call 22:25 - UModal - Creating A Modal Alert 29:56 - Wrap Up 💥 Links -------------------------- - trpc-nuxt - https://trpc-nuxt.vercel.app/ - trpc - https://trpc.io/ - better-sqlite-3 - https://github.com/WiseLibs/better-sqlite3 - Nuxt UI - https://ui.nuxtlabs.com/getting-started 💥 Social Media -------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders