Django and Vue Todo App Tutorial (Django Rest Framework / Vue CLI)

[@mariannehartigan]

WOOHOO! I did the whole thing and it WORKED! Thank you.

[@CodeWithStein]

Nice, congrats :-D

[@devilnightmare8997]

Finally i found this:))

[@CodeWithStein]

Great 😄 I also have the Invoice web app tutorial series with the same tech stack 😉

[@fuadyusibov8315]

Hi Stein, thanks for another great tutorial. A question: why is that at 24:41 you get the axios response successfully assigned to this.tasks, whereas when I console.log(this.tasks) I get an empty object, notwithstanding the fact that if I print axios response to console, I do get all the tasks. Seemingly that data isn't properly assigned to this.tasks and based on stackoverflow I should use async/await, but I wonder why it works for you without any issues?

[@CodeWithStein]

Hey, that sounds weird :/ the tutorial is a bit old, maybe it was working previously 🤷🏼‍♂️

[@BrianPainter1]

at 31:00 I think you can use method: 'patch' to avoid having to pass the description

[@CodeWithStein]

Yes, you're absolutely right! I haven't seen that before actually. I will definitely use it from now on :-)

[@michelnaouss748]

Put replaces the whole thing with what is passed. Patch updates only the part that you pass to it, leaving other fields the same

[@CodeWithStein]

Thanks for the clarification 👍🏻😁

[@kevinzheng6108]

Thanks for this tutorial, but I get error saying `"detail": "Invalid username/password."` at 16:19 with the curl command, I tried to set 'DEFAULT_AUTHENTICATION_CLASSES' in settings.py as suggested by Google but still doesn't work, do you know why

[@CodeWithStein]

Hmm, weird :s are you adding the token correctly?

[@facemeukom3900]

Thank you very much for this lesson.

[@CodeWithStein]

You're welcome :-D

[@ytdavide]

For the next videos could you increase the font size? Thank you

[@CodeWithStein]

This video is very old now, i think i have fixed it since ☺️

[@rohankherath]

It works very well thanks, man 🙌

[@CodeWithStein]

Nice :-D

[@rizi619]

when you create different folder one for backend and one for frontend i think its a cleaner approach, but as i am also learning vuejs along with django its getting so complicated when i am deploying them on heroku or linux server to work on same URL, especially on heroku, can u do us a favour and guide us between different approaches when deploying them together on same url. so that code sharing among team member also possible via github.

[@rizi619]

i also find some heroku starter template for vuejs and django running at same url, but the thing that i did't feel right that both vue and django are at same github repository(same folder) .. are there an easy approaches ??? or that approach is perfect ?

[@CodeWithStein]

Hi, thanks for the comments! I will think about it and plan a video for this. I think I would have one folder for Vue and one for Django. I will come back to you about this.

[@nagarajreddy]

I am starting working on this , I am trying to merge this code with modifications as requires ecommerce to send product order to venders as user(vender also user) , should I call different users on same page, and vender( user )can view their indent list on his my account Page

[@CodeWithStein]

Hi! Sorry, not quite understanding what you're trying to achieve here. Do you want to make it possible for users to sell products on your site?

[@nagarajreddy]

@@CodeWithStein actually in ecommerce we buy products from supplier and sell online, I am trying to achieve send multiple products request at one time with bulk quantity and price is then actual selling price(percentage base) to supplier

[@prajnahegde2200]

This is the best tutorial... can you please make a tutorial on bundling this to-do project in Django templates... That would be very helpful :)

[@CodeWithStein]

Hi! Thanks for the tip. It’s added my list of ideas 👍🏻

[@prajnahegde2200]

@@CodeWithStein Looking forward for the tutorial :)

[@younessidbakkasse9742]

Please I'm a bit confused why did you avoid using Django templats and why did you use rest framework ? can't we make the same web app without the django rest framework ?

[@CodeWithStein]

Hi :-) 1) You could build this app with Django + Vue without the rest framework, but then you would have to build the api views yourself. 2) You could also build this app with just Django, but then the screen would need to be refreshed for every todo you added / changed 3) I used Django Rest Framework because it's a very good library for building APIs. It helps you will everything from serialization, view building and security. So the reason I chose this tech stack is for the functionality you get :-)

[@younessidbakkasse9742]

@@CodeWithStein then why do we need an api in the first place why not just a regular website ? Excuse me I just started learning vuejs.

[@CodeWithStein]

APIs are used for giving you more functionality. Let's say you have a website with the possibility to sign up to a newsletter. When you type your email and submit, the websites refreshes before you get a success message. BUT, if you have an API and you click the same submit button, the email can be sent to the server without refreshing and you can replace the form with a success message or similar. Anyway, I suck at explaining things like this, so maybe try to google it if I'm unclear :-)

[@younessidbakkasse9742]

@@CodeWithStein Oh ok but is the django restframework adds the todos to the database too ? soo using apis we can make seperate backend and the front end can be anythin like a mobile app or web app ?

[@CodeWithStein]

Kind of. It's still done by Django, but you use Django Rest Framework on top of Django. 1) Data is sent from the website using Vue (or react, or vanilla javascript) 2) Django Rest Framework receives the data, checks if it safe and valid 3) Django Rest Framework uses Django to store the information in the database

[@nedimkulovac6394]

Hi Stein. Is it possible to deploy those two apps (Django and Vue) on the same server? How to spin Vue in this setup? Maybe you have some video about this subject? I'm trying to find this out, but all I'm finding is Django app using Vue CDN.

[@CodeWithStein]

Hi! Thanks 😁 that is no problem! Just go to part two and three of this series 😉

[@nedimkulovac6394]

@@CodeWithStein Oh, I suppose those are videos titled 'Deploying Vue.js and Django 3 to VPS' ? I'm not sure how I missed them :) Anyway, thanks a lot, this was very helpfull :)

[@CodeWithStein]

Yeah, correct 👍🏻👍🏻

[@geeshta]

I wonder how would you deploy such an application? This is the Vue dev server running talking to Django. Would you serve the index.html with the Vue app on Apache and let it talk to Django separately? Or would you serve the index.html file in a Django template via an url in urls.py?

[@CodeWithStein]

Hi, I would deploy it like two separately projects. One Nginx (I don't like Apache) for Django and one Nginx for Vue. If you serve the HTML using a Djange template, you will quickly get problems as soon as you're changing URLS. If you follow my other tutorial series (Invoice Web App), you will learn how to deploy there. I use the same tech stack there ;-)

[@harrisonfok8267]

Why does it give me an error saying that I shouldn't use v-for and v-if together?

[@CodeWithStein]

I think it is because an if statement shouldn’t be on the same element as a for loop.

[@harrisonfok8267]

@@CodeWithStein yes, thanks for your reply. The resolution is here: stackoverflow.com/questions/52463987/filtering-problem-with-v-if-and-v-for-in-vue-js

[@ekaterinabobkova2231]

@@harrisonfok8267 Sorry, could you please explain how you fixed this issue ? I did everything like in the tutorial but I have the same error, can't use v-for and v-if together. Thanks !

[@ekaterinabobkova2231]

@@CodeWithStein Sorry, could you please explain how to fix this problem ? I did everything like in the tutorial but I have the same error, can't use v-for and v-if together. Thanks !

[@业明颜]

you can use to split v-for from v-if

[@timniets8584]

Nice video, please add more content with the same tech stack! :-D

[@CodeWithStein]

I will in January 👍👍

[@slavabugz2612]

@@CodeWithStein Waiting really hard to see Django3 + Vue (not Vuejs), Can't find tutorials online which are proper.. So waiting!!

[@CodeWithStein]

Hi :-) I'm going to start publishing a new video series tomorrow with Django 3 / Django Rest Framework as the backend and Vue as a separate front end. Not sure what you mean with Vue (not Vuejs)?

[@slavabugz2612]

@@CodeWithStein Forget the last part, I'm not a frontend dev, so i was a bit confused, and read about it later on. I meant I wanted a tutorial where Django and Vue are both separated apps (as your new series is, that's what I was searching for). Thanks a lot! (Hopefull this series will also have a deployment of them).

[@CodeWithStein]

Ah I see 👍🏻 yes, the new series will have an episode dedicated to deployment 👍🏻

[@actionphotopassion5082]

Hi there, Thank you for this tutorial. Nice explained. OTOH I have a serious question/problem/annoyance here... I am using Django for backend AND frontend with Django-templating + Bootstrap. I am very urious to understand the added-value of VueJS or React when compared to Bootstrap + Django templating. Indeed the fact that those js frameworks (react/vue) need external libraires implies that they are working slower than native Bootstrap+Django templating... So apart the fact that the framework help in reusing the jsx artefacts is there any real plus to use the javascript frameworks VS using native django templating ? Thanks for any insights.

[@CodeWithStein]

Hi! Thanks for the feedback :-) Well, Bootstrap is mostly a CSS framework. It makes it easier to put together a user interface. It has a couple of more functionality through jQuery like modals, expanding panels, etc. Vue.js is a JavaScript framework. You use this to add functionality to your site like form validation, sending data to the backend and similar. Jsx is a part of React, Vue.js doesn't have this (thank God). Vue.js uses a very simple template syntax. So Vue.js, React and similar add interactivity to the website. Bootstrap, Bulma (which I use in this video), Foundation, etc are CSS frameworks, these makes it easier to build/compose the UI. Hope this helps :-)

[@DevBishwasBh]

Thanks but please do NextAuth with Django Rest Framework for Authentication, with email and password. Also, adding OAuth (Django-based) on the same tutorial will be great. I am desperetely waiting for your response.

[@CodeWithStein]

Hey, thanks for the tip! I've added the idea to my list ;-)

[@SomebodyOutTh3re]

Hi, thank you for the video! Quick question, how can you delete a task using the api structure you used in this video?

[@CodeWithStein]

Hi! You’re welcome 😃 instead of sending a post request, you just send a delete request with the correct ID. I am going to make more tutorials on similar things in January 😉

[@taylogs]

Just completed the whole video trough and trough, great job! I'm kind of a "NOOB" so it gave me some headaches but it was pretty good thanks for content like this, I will try to implement the recommendations u said. BTW, I would like to bother myself to recommend u to please up the volume of ur microphone its way TOO low, and also when u walk trough stuff explain a bit more how the functions works and stuff, the JS part kinda makes my head blow but no hahahahaha nonetheless awesome work, bro! Edit: Got urself a new suscriber! I found u trough the "Python Weekly" newsletter :D

[@CodeWithStein]

Hi Carlos! Thanks for the feedback :-) It's nice to get feedback like this. This is things I really can improve on! Nice! The Python Weekly newsletter is really good, there's so much good content every week :D

[@monicasomaiya20]

Hi... I got error with task_task : no such table in shell terminal

[@CodeWithStein]

Hi, did you remember to run "python manage.py makemigrations" and "python manage.py migrate"?

[@unknownusername9827]

Amazing video. Exactly what I was looking for but I have a question. I see that you're currently passing the user credentials in the "auth". What alternatives do I have? Is there a way I can use the Django sessions or something similar to how Django functions like just login once and the rest happens via the sessions and requests.

[@unknownusername9827]

My goal is base my current application completely over Django. How would I do that?

[@CodeWithStein]

Hi! Since the frontend and backend are separated as they are here, you can't use sessions from Django. If you're just using Django and just some Vue.js, you can use Djangos built in system. You can check out my buiding a saad using django and vue.js series, there I use Djangos default authentication 😚 thanks for the feedback by the way 😁

[@aminuaminaldo]

ERROR command failed: npm install --loglevel error --legacy-peer-deps I'm getting this error with a bunch of errors while creating vue project

[@CodeWithStein]

Hmm :s are you on Windows or Mac?

[@hotchaddi]

Random question: How to return a user from its token in DRF?

[@CodeWithStein]

Hi! Sorry for a late answer. Do you mean that you want to send a token to DRF and get a user in return?

[@hotchaddi]

@@CodeWithStein Yes but now I found the solution in the DRF official docs

[@CodeWithStein]

@@hotchaddi Ah, nice :-)

[@hotchaddi]

Thanks tho :) Spent like 2 days searching for a solution to this tiny problem in so many forums and reddit but all I had to do was follow the docs. This experience has taught me something that will help me in future.

[@ysshin0927]

good video!

[@CodeWithStein]

Thank you 😊

[@hemanth6951]

This is not django+vue, this django as bk and vue as fe

[@CodeWithStein]

Yes, exactly as the title says? ☺️

[@hemanth6951]

@@CodeWithStein no problem, because I'm searching on that topic google showed me your video 😉

[@hemanth6951]

@@CodeWithStein if possible please make one video on this +, I need remove jQuery

[@CodeWithStein]

I have many videos where I use normal Django and then just implement Vue.js on some pages. Checkout my Building a time tracking SaaS or Building an Ecommerce website using Django and Vue :-)

[@hemanth6951]

@@CodeWithStein thank 👍you

[@rohitmaharjan6137]

gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3]; Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime

[@CodeWithStein]

That’s the price you pay for using Windows 😉 jokes aside, try using dart-sass instead of node-sass 👍🏻

[@stannyc2512]

Bookmarking this video.. in case I need something to makes me asleep....

[@CodeWithStein]

Well, as long as the video can be helpful for something. I'm happy ;-P

[@sunnie8460]

Wow this is rude to say. This is a tutorial, not a TV show.