Это видео недоступно.
Сожалеем об этом.
Build Nuxt 3 Saas AI Platform with Vue, Typescript, Supabase, Stripe, Tailwind | Full Tutorial 2024
HTML-код
- Опубликовано: 14 авг 2024
- Build Nuxt 3 Saas AI Platform with Vue, Typescript, Supabase, Stripe, Tailwind | Full Tutorial 2024 | Nuxt 3 Project
Welcome to this comprehensive tutorial on building a full stack web application in 2023 using Nuxt 3! In this tutorial, I'll guide you through the process of creating a powerful Nuxt 3 Saas AI Platform using Vue, Typescript, Supabase, Stripe, and Tailwind for styling. Get ready for a full-stack development adventure!
This project is inspired from @codewithantonio channel and I copied a lot of basic styles as well. But his video is in Next js and our is in Nuxt js. But it's important to mention this. You can check the video here
• Build a SaaS AI Platfo...
🛠️ Key Technologies & Tools 🛠️
Database: I'll be harnessing the capabilities of Supabase for seamless database management, allowing you to store and retrieve data efficiently.
ORM: Our data modeling will be handled by Prisma, ensuring your application's data structure remains organized and consistent.
Payment Integration: For secure and smooth payment processing, we're integrating Stripe, a trusted payment gateway.
Styling: Crafting a beautiful and responsive user interface is crucial. We'll be using Tailwind CSS and Shadcn to make your web app shine.
Support: For Live chat I’ll use the Crisp.
AI-Powered Features: Enhance your application with Open AI, enabling AI-driven functionalities for code generation, conversation management, and image processing.
🚀 This tutorial is perfect for developers looking to build advanced web applications and take advantage of the latest technologies. Whether you're a beginner or an experienced developer, we'll walk you through the entire process, step by step.
Don't forget to like, share, and subscribe to stay updated with the latest developments in web development and technology. Let's get started on this exciting journey of building a Nuxt 3 Sass AI Platform together!
Timestamps:
00:00 - Introduction
09:14 - Basic Setup
19:10 - Auth with Supabase
47:10 - Layout ( Sidebar, Header )
1:43:00 - Open AI Setup
1:46:00 - Conversation ( Open AI )
2:41:00 - Server Route Protection
2:44:00 - Code ( Open AI )
2:59:00 - Image( Open AI )
3:23:00 - Replicate Setup
3:27:00 - Music
3:38:00 - Video
3:46:00 - Prisma Setup
3:50:00 - Free Counter Utils
4:08:00 - Counter UI
4:22:00 - Auto Increment Counter ( Nuxt Magic )
4:25:00 - Pro Modal
4:47:00 - Stripe
5:36:00 - Hide Counter
6:01:00 - Landing Page
6:06:00 - Crisp
6:11:00 - Outro
🔗 Links:
Support me: 3627575266943....
GitHub Repository: github.com/haf...
Supabase - supabase.com/
Prisma - www.prisma.io/
Stripe - stripe.com/
Tailwind CSS - tailwindcss.co...
Open AI - openai.com/
Replicate - replicate.com/
✉️ Business Inquiries
hafizjaidi786@gmail.com
👇 FOLLOW ME ON SOCIAL
Get updates or reach out to Get updates on my Social Media Profiles!
Website: codewithhafizj...
Linked In: / hafizjavaid
Github: github.com/haf...
Twitter: / codewithhafiz
Facebook: bit.ly/3gDg74t
Let's embark on this coding journey together and turn your vision into reality! If you have any questions or run into issues, feel free to leave a comment below. Happy coding!
#nuxtjs #vuejs #ai #nuxt3 #vue3 #vue #2023 #nuxt #2024
🛠️ Key Word
nuxt js,nuxt js tutorial,nuxt js project,nuxt js tutorial for beginners,nuxt js 3 tutorial,nuxt js authentication, nuxt3 projects, nuxt projects,nuxt js vs vue js,nuxt 3 tutorial,nuxt 3 project,nuxt project,vue js,vue js tutorial,vue js tutorial for beginners,vue js project,vue js crash course,nuxt crash course,nuxt js 3 crash course,nuxt 3 supabase cru,nuxt 3 supabase prisma,nuxt supabase,nuxt supabase prisma,nuxt stripe,openai,sass,ai,typescript,prisma,supabase,shadcn,shadcn ui, shadcn ui nuxt, shadcn ui vue
Hello Guys, my channel is not monetized and if you want me to support so I can become full time creator you can buy this course from here. And don't worry free version and paid version both are same, it's the optional support if you want. Love you all
3627575266943.gumroad.com/l/jlskb
I don't know what would world do without Indian instructors. Thanks for the video.
I'm from Pakistan 🥲
@@CodeWithHafizJavaid Pakistan too!
Thanks for the video.
really appreciate this, need all the Nuxt Supabase and Stripe combo content available, trying to learn how to use.
Seriously the best channel for learning vue/nuxt in a real world project !
Hope you can make more content like this ( i can pay for this ! ).
Did you have a discord or Something ? :)
Thank you for your kind words
If you want to support you can buy from here
3627575266943.gumroad.com/l/jlskb
No, I don't have discord
@@CodeWithHafizJavaid Promise👌
Thanks for this Amazing Tutorial!
You are welcome
I am making a different website with similar style. I decided to do the the stripe Integration a bit differently as the server api kept throwing some errors, great tutorial.
Glad you like it.
Let me know if you need any help from my side
That's real talent sir 🔥💝
Thanks brother
well looks great. i will check
I hope you will like this
nice video! i was about to learn nuxt since I prefer using vue and I found this video. thanks! most tutorial I found were about nextjs
edit: this is exactly the stack i was looking for
Glad you like it and I'm sure after this you will be much improved. Let me know your thoughts once you are done with tutorial
@@CodeWithHafizJavaid do i have to pay for the openai? is seem to have a request limit error
@@jemuelmaglupay441 no initally it's free, Please keep in mind you should have < 4 Selected or maybe you can create. new account
Could you create a project using Nuxt.js 3, TypeScript, Tailwind CSS, Nuxt UI,mongoDb and Pinia? It should be a system where there is a main administrator who has access to all routes, and this main administrator will add secondary administrators who will not have full access to the system, only to certain pages. These secondary administrators will have a group of users who will have access to a few routes. The system should have managers and supervisors, similar to a call centre system.
Thank you for your suggestion. I'll keep this in my notes and will sure develop one day
I love it ❤
Thank you 😊
Thank you brother
My pleasure brother
next project with nuxt 3 🔥
Yes, I converted the code with antonio ai sass clone into Nuxt 3
@@CodeWithHafizJavaid awesome, convert the code with Antonio again😅
Very useful tutotial , i add one technical question about nuxt and nuxt 3 , is the server folder sufficient for a saas project or should use a different backend separatly like express or something
Yes, it is sufficient
Please Ecommerce and Social Media with vue js typescript project
Noted, I'll try my best to do this as soon as possible because I do this on weekends because I'm doing full time job as well.
Mean while you can share your feedback how I can improve further
Ei Hafiz, greetings from brazil, loved ur content bro, i am really curiuos about the extension you use, can u share with us?
Glad you like it
Can you please tell me for what task?
@@CodeWithHafizJavaid 1:05:56
if you have any tips some extensions can improve developer experience i will be glad to know
ex: in 1:05:56
you showed the "route." and it has a code completion
my vscode doesn't look likes yours, is it some kind of vscode extension?
sorry for my english btw
@@alysonramos3424 It's not the extention. It's the magic and power of nuxt + typescript. Almost in everything where you use nuxt stuff and u are using typescript you will get these suggestions for code completion.
English is not a problem, Mine is also very bad. Core thing is we understood each other
🙂
Thank you man,
You are welcome
Why can your useFetch obtain the type?
Sorry I didn't understand your question. Can you please be more clear 🙏
nice video Hafiz, greetings from Brazil
Thank you man. Glad you like it
Love from Pakistan
When I try to run yarn dev it gives me error messages
Can you please send me the error
I’ve been struggling to set up the environment
SUPABASE_URL=""
SUPABASE_KEY=""
#
NUXT_OPENAI_KEY=""
NUXT_REPLICATE_KEY=''
DATABASE_URL=""
NUXT_PUBLIC_STRIPE_KEY=''
NUXT_STRIPE_SECRET=''
NUXT_STRIPE_WEBHOOK_SECRET=""
NUXT_APP_URL=''"
Dont' forget to add this object in nuxt.config.ts
runtimeConfig: {
openaiKey: '',
replicateKey: '',
stripeSecret: '',
stripeWebhookSecret: '',
appUrl: '',
public: {
publicStripeKey: '',
}
}
Bhai urdu ma banaio asan ho ga banana and or acha response aee ga. Nuxt 3 k backend phar videos banaio.
Brother ap sai hai lakin issue ye hai k Nuxt ki urdu audience bht km hai
@@CodeWithHafizJavaid Bhai Urdu/Hindi ki audience bohot ziyada ha. Or baqi ap ki marze. And Content tora jaldi upload karna ki koshesh karan.
Ap ka bohot shukriy.
Can you share the .env file with us ?
Why do you need the .env file? Can you please share the problem you are facing, I would love to help with that
The content is nice, but the audio is so so bad! Can you check your upload? It goes from loud to barely being able to hear something (e.g. around 4 hour mark)
Let me check and I'll fix it if we have the issue
Thanks for the feedback
Do you know that you don't have to constantly repeat 'you know'? It is so irritating. But despite that, it's still cool content.
Thanks for highlighting this issue
I'm really sorry about this, I noticed this myself as well. It's not intentional I don't know why it became habit of mine while Speaking. I'm working on fixing this issue
I'm Glad you liked the content
Why dont you create your own projects instead of copying them from "Code with Antonio" ?
It's not the copy in terms of functionality because Code with Antonio content is in Next Js and my project is in Nuxt js.
Yes UI is copied but I clearly gave him the credit
So what's wrong with this?
@@CodeWithHafizJavaidI agree with you.
Credits are given to the original creator better still even a link back to his channel is provided.
Many will benefit from this especially those familiar with Nuxt and for the “next” of us, we can enjoy learning how things can be done in other frameworks too.
COOL 😎
@@CodeWithHafizJavaidit’s oukay don’t sweat it 😊
Nice copy from "Coding with antonio". At least give him credit
For credit check out the description of video and it's not copy because the code with antonio video is in Next js and my video is in Nuxt js
My intention is to show how we can do same the stuff with both Next and Nuxt
How can I include ./components/shared in this new pattern that is offered by shadcn?
shadcn: {
/**
* Prefix for all the imported component
*/
prefix: "",
/**
* Directory that the component lives in.
* @default "./components/ui"
*/
componentDir: "./components/ui",
},
Hi Daniel,
Replace the above code with the following
shadcn: {
/**
* Prefix for all the imported component
*/
prefix: '',
/**
* Directory that the component lives in.
* @default "./components/ui"
*/
componentDir: './components/ui'
},
components: [
{ path: '~/components/shared', pathPrefix: false },
'~/components'
]
Notice I added the components array, where I added the path for shared folder
@@CodeWithHafizJavaid It works Hafiz. Thank you very much for your help.
I put it this way and it works as well:
replacing shadcn for it:
components: [
{
path: "./components/ui",
extensions: [".vue"],
prefix: "",
},
{
path: "./components/shared",
extensions: [".vue"],
prefix: "",
},
{
path: "./components",
extensions: [".vue"],
prefix: "",
},
],
It wasn't working before because I didn't add a root path "./components" beyond ui and shared, so my sidebar was disappearing.
Code and video stolen from Code With Antonio on youtube
It's not stolen, code with Antonio project is in next js and mine is in nuxt js
If you see the description I clearly mentioned that and I also provided the link of his video.
Nice copy from "Coding with antonio". At least give him credit
You are right and I totally forgot to record but if you follow me on Twitter I clearly mentioned him. I'm sending you the link because I can't send screenshots here
Another thing it's in Nuxt js and coding with Antonio create content in next js
twitter.com/CodeWithHafiz/status/1715746067579629983?t=J4Y3Je1HSVf1P0k1KdBv0A&s=19
@@CodeWithHafizJavaid, forgot to record!! 🤔
That’s LOW, you shouldn’t , it’s like upload a video here without a title.
Anyway, careful next time.