2022-02-17
3171
#django#vue
Rose Chege
93213
Feb 17, 2022 â‹… 11 min read

How to build a Vue.js app with Django REST framework

Rose Chege Rose is a lover of technology and an upright individual who is not afraid to get out of her comfort zone and try out new programming paradigms.

Recent posts:

A Guide To Wrapper Vs. Container Classes In CSS

A guide to wrapper vs. container classes in CSS

A breakdown of the wrapper and container CSS classes, how they’re used in real-world code, and when it makes sense to use one over the other.

Temitope Oyedele
Jul 7, 2025 â‹… 10 min read
Stagehand and Gemini logos on a gradient background symbolizing AI web automation

How to build a web-based AI agent with Stagehand and Gemini

This guide walks you through creating a web UI for an AI agent that browses, clicks, and extracts info from websites powered by Stagehand and Gemini.

Elijah Asaolu
Jul 4, 2025 â‹… 8 min read
Getting Started With Claude 4 API: A Developer's Walkthrough

Getting started with Claude 4 API: A developer’s walkthrough

This guide explores how to use Anthropic’s Claude 4 models, including Opus 4 and Sonnet 4, to build AI-powered applications.

Andrew Baisden
Jul 3, 2025 â‹… 16 min read
ai dev tool power rankings

AI dev tool power rankings & comparison [July 2025 edition]

Which AI frontend dev tool reigns supreme in July 2025? Check out our power rankings and use our interactive comparison tool to find out.

Chizaram Ken
Jul 2, 2025 â‹… 3 min read
View all posts

6 Replies to "How to build a Vue.js app with Django REST framework"

    1. I agree something is not right with this tutorial I am not able to post data from vue to django only can with django did yo figure it out thanks Im still trying .

      1. The same, I get some errors too, besides that components in Vue.js must be multi- words. And there are other errors in the tutorial, it seems that some revision was missing.

  1. Thank your for this great tutorial. There are just a few minor errors in it:

    * “from totasks import views” → “from tasks import views”
    * “Navigate to your Postman and enter the URL http://localhost:8000/api/ts/” → “…/api/tasks/”
    * It might be worth mentioning that the use of Vue2 is assumed (it does not work out of the box for Vue3)

  2. Thank you for this great tutorial, it helps a lot! and like @Falko said, a few errors in it, and I add some further:
    * correct Vue3 sentence for main.js error in vue project/src:

    const app = createApp(App)
    app.config.globalProperties.$http = axios;
    app.mount(“#app”)

    (instead of using “Vue.prototype.$http = axios;”)

    * toggle and delete’s js error:

    urls.py in task app (python part)

    path(‘tasks/’, views.task_detail),

    toggeTask method in Tasks.vue in component (Vue part)

    const response = await this.$http.put(`http://localhost:8000/api/tasks/${task.id}`, {

    which means unify the expression end with/without slashes of api’s url pattern.

  3. Hi Nice tutorial its my second time attempting this exact tutorial but when I try to submit data from vue js frontend the submit button is not doing anything the only way for me to submit data is to use django. I thought maybe it was due to vue js version or axios version but I did the exact version you used in this tutorial and am still not able to submit data from the frontend to the backend. Do you have a live example to see it working because I followed your example and sadly it does not work. Thank you I would appreciate your help.

Leave a Reply