Payload CMS - Headless CMS with Vue - Getting Started
ฝัง
- เผยแพร่เมื่อ 19 ก.ค. 2024
- 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...
Part 2 will handle checking for existing user's session, and discussing cookies - • Payload CMS - Headless...
Part 3 - Creating a user/customer account - • Payload CMS - Headless...
Part 4 - Get the application deployed on IOS and Android devices - • Payload CMS - Headless...
💥 Sign Up For Our Newsletter - 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 - payloadcms.com/
- MongoDB Atlas - www.mongodb.com/atlas/database
- MongoDB Compass - www.mongodb.com/products/tool...
- Ionic Framework - ionicframework.com/
🚀 SOURCE CODE - github.com/aaronksaunders/pay...
🚀 BLOG POST - dev.to/aaronksaunders/getting...
💥 Social Media
--------------------------
Twitter - / aaronksaunders
Facebook - / clearlyinnovativeinc
Instagram - / aaronksaunders
Dev.to - dev.to/aaronksaunders
#payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb
*SOURCE CODE* - github.com/aaronksaunders/payload-vue-ionic-video
This video is pretty dope - thanks!
Glad you liked it!
Thank you so much, you're really helping me a lot. God bless you! 🙏
Happy to help!
Thank you for this I was looking into this recently. Love your content BTW.
Glad you enjoyed it, please checkout part two and subscribe to catch other great content - Headless CMS with Vue using PayloadCMS - Getting Current User and Cookies
th-cam.com/video/Tj7eM7tEiwM/w-d-xo.html
Great walk-through! Thank you so much.
Glad it was helpful!
Thank you for this!! I was going to use Strapi as a headless CMS for MongoDB but it isn't supported anymore. Great tutorial on how to use and connect to Payload. Keep it up!!
the support is questionable because it is relatively new, but if you aren't trying to do too much customization, it is a good solution. Using it on a couple of projects now
Thank you so much!!!
Excellent run through. I learned a lot. How would I go about replacing MongoDB with OribitDB?
Will have to check out orbitdb I have never worked with it