Payload CMS - Headless CMS with Vue - Getting Started
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 - • Payload CMS - Headless CMS with Vue -...
Part 2 will handle checking for existing user's session, and discussing cookies - • Payload CMS - Headless CMS with Vue -...
Part 3 - Creating a user/customer account - • Payload CMS - Headless CMS with Vue -...
Part 4 - Get the application deployed on IOS and Android devices - • Payload CMS - Headless CMS with Vue -...
💥 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/tool...
- Ionic Framework - https://ionicframework.com/
🚀 SOURCE CODE - https://github.com/aaronksaunders/pay...
🚀 BLOG POST - https://dev.to/aaronksaunders/getting...
💥 Social Media
--------------------------
Twitter - / aaronksaunders
Facebook - / clearlyinnovativeinc
Instagram - / aaronksaunders
Dev.to - https://dev.to/aaronksaunders
#payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb
Watch video Payload CMS - Headless CMS with Vue - Getting Started online without registration, duration hours minute second in high quality. This video was added by user Aaron Saunders 22 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,80 once and liked it 8 people.