René's URL Explorer Experiment


Title: Build a Blog Using Django, GraphQL, and Vue – Real Python

Open Graph Title: Build a Blog Using Django, GraphQL, and Vue – Real Python

Description: In this step-by-step project, you'll build a blog from the ground up. You'll turn your Django blog data models into a GraphQL API and consume it in a Vue application for users to read. You'll end up with an admin site and a user-facing site you can continue to refine for your own use.

Open Graph Description: In this step-by-step project, you'll build a blog from the ground up. You'll turn your Django blog data models into a GraphQL API and consume it in a Vue application for users to read. You'll end up with an admin site and a user-facing site you can continue to refine for your own use.

Mail addresses
?subject=Python article for you&body=Build a Blog Using Django, GraphQL, and Vue on Real Python https://realpython.com/python-django-blog/

Opengraph URL: https://realpython.com/python-django-blog/

X: @realpython

direct link

Domain: realpython.com

Hey, it has json ld scripts: 
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "Build a Blog Using Django, GraphQL, and Vue",
  "image": {
    "@type": "ImageObject",
    "url": "https://files.realpython.com/media/Build-a-blog-using-Django-Vue-and-GraphQL_Watermarked.8b39500c821c.jpg",
    "width": 1920,
    "height": 1080
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://realpython.com/python-django-blog/",
    "lastReviewed": "2024-07-12",
    "author": {
      "@type": "Person",
      "name": "Philipp Acsany",
      "image": "https://realpython.com/cdn-cgi/image/width=400,height=400,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/phi5_2.0e61b4c66f6b.jpg",
      "url": "https://realpython.com/team/pacsany/",
      "affiliation": {
        "@type": "Organization",
        "@id": "https://realpython.com/#organization",
        "name": "Real Python",
        "url": "https://realpython.com",
        "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
      }
    },
    "reviewedBy": [
      {
        "@type": "Person",
        "name": "Aldren Santos",
        "image": "https://realpython.com/cdn-cgi/image/width=500,height=500,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/Aldren_Santos_Real_Python.6b0861d8b841.png",
        "url": "https://realpython.com/team/asantos/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "Brad Solomon",
        "image": "https://realpython.com/cdn-cgi/image/width=1188,height=1188,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/Screen_Shot_2021-09-28_at_3.13.21_PM.3310c56e90bd.jpg",
        "url": "https://realpython.com/team/bsolomon/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "Brenda Weleschuk",
        "image": "https://realpython.com/cdn-cgi/image/width=320,height=320,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/IMG_3324_1.50b309355fc1.jpg",
        "url": "https://realpython.com/team/bweleschuk/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "David Amos",
        "image": "https://realpython.com/cdn-cgi/image/width=400,height=400,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/me-small.f5f49f1c48e1.jpg",
        "url": "https://realpython.com/team/damos/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "Dane Hillard",
        "image": "https://realpython.com/cdn-cgi/image/width=1050,height=1050,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/profilenew.cf86e4c32676.jpg",
        "url": "https://realpython.com/team/dhillard/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "Geir Arne Hjelle",
        "image": "https://realpython.com/cdn-cgi/image/width=800,height=800,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/gahjelle.470149ee709e.jpg",
        "url": "https://realpython.com/team/gahjelle/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "Joanna Jablonski",
        "image": "https://realpython.com/cdn-cgi/image/width=800,height=800,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/jjablonksi-avatar.e37c4f83308e.jpg",
        "url": "https://realpython.com/team/jjablonski/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "Jacob Schmitt",
        "image": "https://realpython.com/cdn-cgi/image/width=400,height=400,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/profile-small_js.2f4d0d8da1ca.jpg",
        "url": "https://realpython.com/team/jschmitt/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      },
      {
        "@type": "Person",
        "name": "Martin Breuss",
        "image": "https://realpython.com/cdn-cgi/image/width=456,height=456,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/martin_breuss_python_square.efb2b07faf9f.jpg",
        "url": "https://realpython.com/team/mbreuss/",
        "affiliation": {
          "@type": "Organization",
          "@id": "https://realpython.com/#organization",
          "name": "Real Python",
          "url": "https://realpython.com",
          "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
        }
      }
    ]
  },
  "datePublished": "2024-04-15T14:00:00+00:00",
  "dateModified": "2024-07-12T05:23:07.742178+00:00",
  "publisher": {
    "@type": "Organization",
    "@id": "https://realpython.com/#organization",
    "name": "Real Python",
    "url": "https://realpython.com",
    "logo": {
      "@type": "ImageObject",
      "url": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png",
      "width": 512,
      "height": 512
    },
    "description": "Real Python is a leading provider of online Python education and one of the largest language-specific online communities for software developers. It publishes high-quality learning resources, such as tutorials, books, and courses to an audience of millions of developers, data scientists, and machine learning engineers each month.",
    "slogan": "Become a Python Expert",
    "email": "info@realpython.com",
    "sameAs": [
      "https://github.com/realpython",
      "https://www.youtube.com/realpython",
      "https://twitter.com/realpython",
      "https://x.com/realpython",
      "https://www.linkedin.com/company/realpython-com/",
      "https://www.facebook.com/learnrealpython",
      "https://www.instagram.com/realpython",
      "https://www.tiktok.com/@realpython.com"
    ]
  },
  "author": {
    "@type": "Person",
    "name": "Philipp Acsany",
    "image": "https://realpython.com/cdn-cgi/image/width=400,height=400,fit=crop,gravity=auto,format=auto/https://files.realpython.com/media/phi5_2.0e61b4c66f6b.jpg",
    "url": "https://realpython.com/team/pacsany/",
    "affiliation": {
      "@type": "Organization",
      "@id": "https://realpython.com/#organization",
      "name": "Real Python",
      "url": "https://realpython.com",
      "logo": "https://realpython.com/static/real-python-logo-square-512.157ae6bf64ed.png"
    }
  },
  "description": "In this step-by-step project, you'll build a blog from the ground up. You'll turn your Django blog data models into a GraphQL API and consume it in a Vue application for users to read. You'll end up with an admin site and a user-facing site you can continue to refine for your own use."
}
authorReal Python
twitter:cardsummary_large_image
twitter:imagehttps://files.realpython.com/media/Build-a-blog-using-Django-Vue-and-GraphQL_Watermarked.8b39500c821c.jpg
og:imagehttps://files.realpython.com/media/Build-a-blog-using-Django-Vue-and-GraphQL_Watermarked.8b39500c821c.jpg
twitter:creator@realpython
og:typearticle

Links:

https://realpython.com/
Start Herehttps://realpython.com/start-here/
Learn Python https://realpython.com/python-django-blog/
Python Tutorials →In-depth articles and video courseshttps://realpython.com/search?kind=article&kind=course&order=newest
Learning Paths →Guided study plans for accelerated learninghttps://realpython.com/learning-paths/
Quizzes & Exercises →Check your learning progresshttps://realpython.com/quizzes/
Browse Topics →Focus on a specific area or skill levelhttps://realpython.com/tutorials/all/
Community Chat →Learn with other Pythonistashttps://realpython.com/community/
Office Hours →Live Q&A calls with Python expertshttps://realpython.com/office-hours/
Podcast →Hear what’s new in the world of Pythonhttps://realpython.com/podcasts/rpp/
Books →Round out your knowledge and learn offlinehttps://realpython.com/products/books/
Reference →Concise definitions for common Python termshttps://realpython.com/ref/
Code Mentor →BetaPersonalized code assistance & learning toolshttps://realpython.com/mentor/
Unlock All Content →https://realpython.com/account/join/
More https://realpython.com/python-django-blog/
Learner Storieshttps://realpython.com/learner-stories/
Python Newsletterhttps://realpython.com/newsletter/
Python Job Boardhttps://www.pythonjobshq.com
Meet the Teamhttps://realpython.com/team/
Become a Tutorial Writerhttps://realpython.com/write-for-us/
Become a Video Instructorhttps://realpython.com/become-an-instructor/
Searchhttps://realpython.com/search
https://realpython.com/search
Joinhttps://realpython.com/account/join/
Sign‑Inhttps://realpython.com/account/login/?next=%2Fpython-django-blog%2F
Browse Topicshttps://realpython.com/tutorials/all/
Guided Learning Pathshttps://realpython.com/learning-paths/
Basicshttps://realpython.com/search?level=basics
Intermediatehttps://realpython.com/search?level=intermediate
Advancedhttps://realpython.com/search?level=advanced
aihttps://realpython.com/tutorials/ai/
algorithmshttps://realpython.com/tutorials/algorithms/
apihttps://realpython.com/tutorials/api/
best-practiceshttps://realpython.com/tutorials/best-practices/
careerhttps://realpython.com/tutorials/career/
communityhttps://realpython.com/tutorials/community/
databaseshttps://realpython.com/tutorials/databases/
data-sciencehttps://realpython.com/tutorials/data-science/
data-structureshttps://realpython.com/tutorials/data-structures/
data-vizhttps://realpython.com/tutorials/data-viz/
devopshttps://realpython.com/tutorials/devops/
djangohttps://realpython.com/tutorials/django/
dockerhttps://realpython.com/tutorials/docker/
editorshttps://realpython.com/tutorials/editors/
flaskhttps://realpython.com/tutorials/flask/
front-endhttps://realpython.com/tutorials/front-end/
gamedevhttps://realpython.com/tutorials/gamedev/
guihttps://realpython.com/tutorials/gui/
machine-learninghttps://realpython.com/tutorials/machine-learning/
newshttps://realpython.com/tutorials/news/
numpyhttps://realpython.com/tutorials/numpy/
projectshttps://realpython.com/tutorials/projects/
pythonhttps://realpython.com/tutorials/python/
stdlibhttps://realpython.com/tutorials/stdlib/
testinghttps://realpython.com/tutorials/testing/
toolshttps://realpython.com/tutorials/tools/
web-devhttps://realpython.com/tutorials/web-dev/
web-scrapinghttps://realpython.com/tutorials/web-scraping/
Table of Contentshttps://realpython.com/python-django-blog/#toc
Demo: A Django Blog Admin, a GraphQL API, and a Vue Front Endhttps://realpython.com/python-django-blog/#demo-a-django-blog-admin-a-graphql-api-and-a-vue-front-end
Project Overviewhttps://realpython.com/python-django-blog/#project-overview
Prerequisiteshttps://realpython.com/python-django-blog/#prerequisites
Step 1: Set Up the Django Bloghttps://realpython.com/python-django-blog/#step-1-set-up-the-django-blog
Install Djangohttps://realpython.com/python-django-blog/#install-django
Create the Django Projecthttps://realpython.com/python-django-blog/#create-the-django-project
Run Django Migrationshttps://realpython.com/python-django-blog/#run-django-migrations
Create a Superuserhttps://realpython.com/python-django-blog/#create-a-superuser
Step 1 Summaryhttps://realpython.com/python-django-blog/#step-1-summary
Step 2: Create the Django Blog Adminhttps://realpython.com/python-django-blog/#step-2-create-the-django-blog-admin
Create the Django Blog Applicationhttps://realpython.com/python-django-blog/#create-the-django-blog-application
Enable the Django Blog Applicationhttps://realpython.com/python-django-blog/#enable-the-django-blog-application
Create the Django Blog Data Modelshttps://realpython.com/python-django-blog/#create-the-django-blog-data-models
Create the Model Admin Configurationhttps://realpython.com/python-django-blog/#create-the-model-admin-configuration
Create the Model Migrationshttps://realpython.com/python-django-blog/#create-the-model-migrations
Start Blogginghttps://realpython.com/python-django-blog/#start-blogging
Step 2 Summaryhttps://realpython.com/python-django-blog/#step-2-summary
Step 3: Set Up Graphene-Djangohttps://realpython.com/python-django-blog/#step-3-set-up-graphene-django
Install Graphene-Djangohttps://realpython.com/python-django-blog/#install-graphene-django
Configure Graphene-Djangohttps://realpython.com/python-django-blog/#configure-graphene-django
Step 3 Summaryhttps://realpython.com/python-django-blog/#step-3-summary
Step 4: Set Up django-cors-headershttps://realpython.com/python-django-blog/#step-4-set-up-django-cors-headers
Install django-cors-headershttps://realpython.com/python-django-blog/#install-django-cors-headers
Configure django-cors-headershttps://realpython.com/python-django-blog/#configure-django-cors-headers
Step 4 Summaryhttps://realpython.com/python-django-blog/#step-4-summary
Step 5: Set Up Vue.jshttps://realpython.com/python-django-blog/#step-5-set-up-vuejs
Install Node.jshttps://realpython.com/python-django-blog/#install-nodejs
Create the Vue Projecthttps://realpython.com/python-django-blog/#create-the-vue-project
Step 5 Summaryhttps://realpython.com/python-django-blog/#step-5-summary
Step 6: Create Basic Views and Componentshttps://realpython.com/python-django-blog/#step-6-create-basic-views-and-components
Remove Existing Viewshttps://realpython.com/python-django-blog/#remove-existing-views
Add Your Viewshttps://realpython.com/python-django-blog/#add-your-views
Remove Existing Componentshttps://realpython.com/python-django-blog/#remove-existing-components
Create Your Componentshttps://realpython.com/python-django-blog/#create-your-components
Set Up Routeshttps://realpython.com/python-django-blog/#set-up-routes
Step 6 Summaryhttps://realpython.com/python-django-blog/#step-6-summary
Step 7: Update the Vue Componentshttps://realpython.com/python-django-blog/#step-7-update-the-vue-components
Link to the Authorhttps://realpython.com/python-django-blog/#link-to-the-author
Prep the Blog Posts Listhttps://realpython.com/python-django-blog/#prep-the-blog-posts-list
Render All Blog Postshttps://realpython.com/python-django-blog/#render-all-blog-posts
Show Posts for a Given Taghttps://realpython.com/python-django-blog/#show-posts-for-a-given-tag
Show Information About an Authorhttps://realpython.com/python-django-blog/#show-information-about-an-author
Display a Single Blog Posthttps://realpython.com/python-django-blog/#display-a-single-blog-post
Adjust the Routes for the Apphttps://realpython.com/python-django-blog/#adjust-the-routes-for-the-app
Step 7 Summaryhttps://realpython.com/python-django-blog/#step-7-summary
Step 8: Implement Vue Apollohttps://realpython.com/python-django-blog/#step-8-implement-vue-apollo
Install Vue Apollohttps://realpython.com/python-django-blog/#install-vue-apollo
Configure Vue Apollohttps://realpython.com/python-django-blog/#configure-vue-apollo
Step 8 Summaryhttps://realpython.com/python-django-blog/#step-8-summary
Step 9: Fetch the Datahttps://realpython.com/python-django-blog/#step-9-fetch-the-data
AllPostsView Queryhttps://realpython.com/python-django-blog/#allpostsview-query
PostView Queryhttps://realpython.com/python-django-blog/#postview-query
AuthorView Queryhttps://realpython.com/python-django-blog/#authorview-query
PostsByTagView Queryhttps://realpython.com/python-django-blog/#postsbytagview-query
Step 9 Summaryhttps://realpython.com/python-django-blog/#step-9-summary
Next Stepshttps://realpython.com/python-django-blog/#next-steps
Conclusionhttps://realpython.com/python-django-blog/#conclusion
https://realpython.com/feedback/survey/article/python-django-blog/liked/?from=article-sidebar
https://realpython.com/feedback/survey/article/python-django-blog/disliked/?from=article-sidebar
Philipp Acsanyhttps://realpython.com/python-django-blog/#author
https://realpython.com/python-django-blog/#reader-comments
advancedhttps://realpython.com/tutorials/advanced/
apihttps://realpython.com/tutorials/api/
djangohttps://realpython.com/tutorials/django/
front-endhttps://realpython.com/tutorials/front-end/
web-devhttps://realpython.com/tutorials/web-dev/
Demo: A Django Blog Admin, a GraphQL API, and a Vue Front Endhttps://realpython.com/python-django-blog/#demo-a-django-blog-admin-a-graphql-api-and-a-vue-front-end
Project Overviewhttps://realpython.com/python-django-blog/#project-overview
Prerequisiteshttps://realpython.com/python-django-blog/#prerequisites
Step 1: Set Up the Django Bloghttps://realpython.com/python-django-blog/#step-1-set-up-the-django-blog
Install Djangohttps://realpython.com/python-django-blog/#install-django
Create the Django Projecthttps://realpython.com/python-django-blog/#create-the-django-project
Run Django Migrationshttps://realpython.com/python-django-blog/#run-django-migrations
Create a Superuserhttps://realpython.com/python-django-blog/#create-a-superuser
Step 1 Summaryhttps://realpython.com/python-django-blog/#step-1-summary
Step 2: Create the Django Blog Adminhttps://realpython.com/python-django-blog/#step-2-create-the-django-blog-admin
Create the Django Blog Applicationhttps://realpython.com/python-django-blog/#create-the-django-blog-application
Enable the Django Blog Applicationhttps://realpython.com/python-django-blog/#enable-the-django-blog-application
Create the Django Blog Data Modelshttps://realpython.com/python-django-blog/#create-the-django-blog-data-models
Create the Model Admin Configurationhttps://realpython.com/python-django-blog/#create-the-model-admin-configuration
Create the Model Migrationshttps://realpython.com/python-django-blog/#create-the-model-migrations
Start Blogginghttps://realpython.com/python-django-blog/#start-blogging
Step 2 Summaryhttps://realpython.com/python-django-blog/#step-2-summary
Step 3: Set Up Graphene-Djangohttps://realpython.com/python-django-blog/#step-3-set-up-graphene-django
Install Graphene-Djangohttps://realpython.com/python-django-blog/#install-graphene-django
Configure Graphene-Djangohttps://realpython.com/python-django-blog/#configure-graphene-django
Step 3 Summaryhttps://realpython.com/python-django-blog/#step-3-summary
Step 4: Set Up django-cors-headershttps://realpython.com/python-django-blog/#step-4-set-up-django-cors-headers
Install django-cors-headershttps://realpython.com/python-django-blog/#install-django-cors-headers
Configure django-cors-headershttps://realpython.com/python-django-blog/#configure-django-cors-headers
Step 4 Summaryhttps://realpython.com/python-django-blog/#step-4-summary
Step 5: Set Up Vue.jshttps://realpython.com/python-django-blog/#step-5-set-up-vuejs
Install Node.jshttps://realpython.com/python-django-blog/#install-nodejs
Create the Vue Projecthttps://realpython.com/python-django-blog/#create-the-vue-project
Step 5 Summaryhttps://realpython.com/python-django-blog/#step-5-summary
Step 6: Create Basic Views and Componentshttps://realpython.com/python-django-blog/#step-6-create-basic-views-and-components
Remove Existing Viewshttps://realpython.com/python-django-blog/#remove-existing-views
Add Your Viewshttps://realpython.com/python-django-blog/#add-your-views
Remove Existing Componentshttps://realpython.com/python-django-blog/#remove-existing-components
Create Your Componentshttps://realpython.com/python-django-blog/#create-your-components
Set Up Routeshttps://realpython.com/python-django-blog/#set-up-routes
Step 6 Summaryhttps://realpython.com/python-django-blog/#step-6-summary
Step 7: Update the Vue Componentshttps://realpython.com/python-django-blog/#step-7-update-the-vue-components
Link to the Authorhttps://realpython.com/python-django-blog/#link-to-the-author
Prep the Blog Posts Listhttps://realpython.com/python-django-blog/#prep-the-blog-posts-list
Render All Blog Postshttps://realpython.com/python-django-blog/#render-all-blog-posts
Show Posts for a Given Taghttps://realpython.com/python-django-blog/#show-posts-for-a-given-tag
Show Information About an Authorhttps://realpython.com/python-django-blog/#show-information-about-an-author
Display a Single Blog Posthttps://realpython.com/python-django-blog/#display-a-single-blog-post
Adjust the Routes for the Apphttps://realpython.com/python-django-blog/#adjust-the-routes-for-the-app
Step 7 Summaryhttps://realpython.com/python-django-blog/#step-7-summary
Step 8: Implement Vue Apollohttps://realpython.com/python-django-blog/#step-8-implement-vue-apollo
Install Vue Apollohttps://realpython.com/python-django-blog/#install-vue-apollo
Configure Vue Apollohttps://realpython.com/python-django-blog/#configure-vue-apollo
Step 8 Summaryhttps://realpython.com/python-django-blog/#step-8-summary
Step 9: Fetch the Datahttps://realpython.com/python-django-blog/#step-9-fetch-the-data
AllPostsView Queryhttps://realpython.com/python-django-blog/#allpostsview-query
PostView Queryhttps://realpython.com/python-django-blog/#postview-query
AuthorView Queryhttps://realpython.com/python-django-blog/#authorview-query
PostsByTagView Queryhttps://realpython.com/python-django-blog/#postsbytagview-query
Step 9 Summaryhttps://realpython.com/python-django-blog/#step-9-summary
Next Stepshttps://realpython.com/python-django-blog/#next-steps
Conclusionhttps://realpython.com/python-django-blog/#conclusion
Remove adshttps://realpython.com/account/join/
Vuehttps://vuejs.org/
GraphQLhttps://graphql.org/
Projectshttps://realpython.com/intermediate-python-project-ideas/
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/quizzes/python-django-blog/
Build a Blog Using Django, GraphQL, and Vuehttps://realpython.com/quizzes/python-django-blog/
https://realpython.com/python-django-blog/#demo-a-django-blog-admin-a-graphql-api-and-a-vue-front-end
Blog applicationshttps://realpython.com/build-a-blog-from-scratch-django/
Vue.js 3https://vuejs.org/
composition APIhttps://vuejs.org/glossary/#composition-api
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#project-overview
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/python-django-blog/#prerequisites
HTTP requests and responseshttps://realpython.com/python-requests/
Python & APIs: A Winning Combo for Reading Public Datahttps://realpython.com/python-api/
starting a Django projecthttps://realpython.com/django-setup/
customizing the Django adminhttps://realpython.com/customize-django-admin-python/
Get Started with Django Part 1: Build a Portfolio Apphttps://realpython.com/get-started-with-django-1/
JavaScripthttps://realpython.com/python-vs-javascript/
jQueryhttps://jquery.com/
Vue introductionhttps://vuejs.org/guide/introduction.html
Working with JSON Data in Pythonhttps://realpython.com/python-json/
https://realpython.com/python-django-blog/#step-1-set-up-the-django-blog
terminalhttps://realpython.com/terminal-commands/
https://realpython.com/python-django-blog/#install-django
virtual environmenthttps://realpython.com/python-virtual-environments-a-primer/
Windowshttps://realpython.com/python-django-blog/#windows-1
Linux + macOShttps://realpython.com/python-django-blog/#linux-macos-1
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#create-the-django-project
initialize your Django projecthttps://realpython.com/django-setup/
directory treehttps://realpython.com/directory-tree-generator-python/
https://realpython.com/python-django-blog/#run-django-migrations
Django Migrations: A Primerhttps://realpython.com/django-migrations-a-primer/
SQLitehttps://realpython.com/python-sqlite-sqlalchemy/
https://realpython.com/python-django-blog/#create-a-superuser
https://realpython.com/python-django-blog/#step-1-summary
https://files.realpython.com/media/01-django-landingpage.448641b473b2.png
https://files.realpython.com/media/02-django-admin.f56beaca25b6.png
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#step-2-create-the-django-blog-admin
https://realpython.com/python-django-blog/#create-the-django-blog-application
https://realpython.com/python-django-blog/#enable-the-django-blog-application
configuration classhttps://docs.djangoproject.com/en/5.0/ref/applications/#django.apps.AppConfig
https://realpython.com/python-django-blog/#create-the-django-blog-data-models
data modelshttps://docs.djangoproject.com/en/5.0/topics/db/models/
https://realpython.com/python-django-blog/#the-profile-model
importhttps://realpython.com/python-import/
https://realpython.com/python-django-blog/#the-tag-model
https://realpython.com/python-django-blog/#the-post-model
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#create-the-model-admin-configuration
Customize the Django Admin With Pythonhttps://realpython.com/customize-django-admin-python/
https://realpython.com/python-django-blog/#create-the-model-migrations
https://realpython.com/python-django-blog/#start-blogging
https://files.realpython.com/media/03-django-admin-post.14e8c09ba6ca.png
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#step-2-summary
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/python-django-blog/#step-3-set-up-graphene-django
GraphQLhttps://graphql.org/
RESTful APIshttps://realpython.com/api-integration-in-python/
Graphene-Djangohttps://docs.graphene-python.org/projects/django/en/latest/
https://realpython.com/python-django-blog/#install-graphene-django
https://realpython.com/python-django-blog/#configure-graphene-django
https://realpython.com/python-django-blog/#update-django-settings
https://realpython.com/python-django-blog/#add-a-url-pattern-for-graphql-and-graphiql
cross-site request forgery (CSRF)https://en.wikipedia.org/wiki/Cross-site_request_forgery
https://realpython.com/python-django-blog/#create-the-graphql-schema
GraphQL typehttps://graphql.org/learn/schema/#type-system
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#step-3-summary
https://files.realpython.com/media/04-django-graphql.b3729778aecc.png
https://files.realpython.com/media/05-django-graphql-query.e08011545aed.png
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/python-django-blog/#step-4-set-up-django-cors-headers
cross-origin resource sharing (CORS)https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
django-cors-headers projecthttps://pypi.org/project/django-cors-headers/
https://realpython.com/python-django-blog/#install-django-cors-headers
django-cors-headers documentationhttps://github.com/adamchainz/django-cors-headers
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#configure-django-cors-headers
regular expressionshttps://realpython.com/regex-python/
https://realpython.com/python-django-blog/#step-4-summary
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/python-django-blog/#step-5-set-up-vuejs
Vuehttps://vuejs.org
Node.jshttps://nodejs.org
https://realpython.com/python-django-blog/#install-nodejs
JavaScripthttps://realpython.com/python-vs-javascript/
piphttps://realpython.com/what-is-pip/
Node Package Managerhttps://www.npmjs.com/
official Node.js download pagehttps://nodejs.org/en/download
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#create-the-vue-project
Visual Studio Codehttps://realpython.com/python-development-visual-studio-code/
working with Githttps://realpython.com/python-git-github-intro/
https://realpython.com/python-django-blog/#step-5-summary
Vitehttps://vitejs.dev
https://files.realpython.com/media/06-vite-landingpage.02cafeae5782.png
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#step-6-create-basic-views-and-components
Sourcehttps://vuejs.org/guide/essentials/component-basics.html
https://realpython.com/python-django-blog/#remove-existing-views
https://realpython.com/python-django-blog/#add-your-views
Single-File Componenthttps://vuejs.org/guide/scaling-up/sfc.html
Remove adshttps://realpython.com/account/join/
https://realpython.com/python-django-blog/#remove-existing-components
https://realpython.com/python-django-blog/#create-your-components
https://realpython.com/python-django-blog/#set-up-routes
https://realpython.com/python-django-blog/#step-6-summary
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/python-django-blog/#step-7-update-the-vue-components
https://realpython.com/python-django-blog/#link-to-the-author
Propshttps://vuejs.org/guide/components/props.html
defineProps()https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
Computed propertieshttps://vuejs.org/guide/essentials/computed.html
https://realpython.com/python-django-blog/#prep-the-blog-posts-list
Booleanhttps://realpython.com/python-boolean/
built-in Vue directivehttps://vuejs.org/api/built-in-directives.html
https://realpython.com/python-django-blog/#render-all-blog-posts
destructuring assignmenthttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://realpython.com/python-django-blog/#show-posts-for-a-given-tag
dynamically matched routehttps://router.vuejs.org/guide/essentials/dynamic-matching.html
bound attributehttps://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings
https://realpython.com/python-django-blog/#show-information-about-an-author
https://realpython.com/python-django-blog/#display-a-single-blog-post
datetime objecthttps://realpython.com/python-datetime/
formatted datehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
https://realpython.com/python-django-blog/#adjust-the-routes-for-the-app
https://realpython.com/python-django-blog/#step-7-summary
https://files.realpython.com/media/08-vue-blog-no-content.9de3fc120727.png
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/python-django-blog/#step-8-implement-vue-apollo
Vue Apollohttps://apollo.vuejs.org/
https://realpython.com/python-django-blog/#install-vue-apollo
apollo-composablehttps://github.com/vuejs/apollo/tree/v4/packages/vue-apollo-composable
GraphQL.jshttps://graphql.org/graphql-js/
graphql-taghttps://github.com/apollographql/graphql-tag
https://realpython.com/python-django-blog/#configure-vue-apollo
h() render functionhttps://vuejs.org/api/render-function.html#h
Document Object Modelhttps://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://realpython.com/python-django-blog/#step-8-summary
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/python-django-blog/#step-9-fetch-the-data
https://realpython.com/python-django-blog/#allpostsview-query
https://realpython.com/python-django-blog/#postview-query
https://realpython.com/python-django-blog/#authorview-query
foreign key relationshiphttps://en.wikipedia.org/wiki/Foreign_key
https://realpython.com/python-django-blog/#postsbytagview-query
GraphQL fragmentshttps://graphql.org/learn/queries/
https://realpython.com/python-django-blog/#step-9-summary
https://realpython.com/python-django-blog/#next-steps
https://realpython.com/python-django-blog/#conclusion
Click here to download the free sample codehttps://realpython.com/bonus/django-vue-graphql/
https://realpython.com/quizzes/python-django-blog/
Build a Blog Using Django, GraphQL, and Vuehttps://realpython.com/quizzes/python-django-blog/
https://realpython.com/feedback/survey/article/python-django-blog/liked/?from=article-footer
https://realpython.com/feedback/survey/article/python-django-blog/disliked/?from=article-footer
https://realpython.com/team/pacsany/
» More about Philipphttps://realpython.com/team/pacsany/
https://realpython.com/team/asantos/
Aldrenhttps://realpython.com/team/asantos/
https://realpython.com/team/bsolomon/
Bradhttps://realpython.com/team/bsolomon/
https://realpython.com/team/bweleschuk/
Brendahttps://realpython.com/team/bweleschuk/
https://realpython.com/team/damos/
Davidhttps://realpython.com/team/damos/
https://realpython.com/team/dhillard/
Danehttps://realpython.com/team/dhillard/
https://realpython.com/team/gahjelle/
Geir Arnehttps://realpython.com/team/gahjelle/
https://realpython.com/team/jjablonski/
Joannahttps://realpython.com/team/jjablonski/
https://realpython.com/team/jschmitt/
Jacobhttps://realpython.com/team/jschmitt/
https://realpython.com/team/mbreuss/
Martinhttps://realpython.com/team/mbreuss/
Level Up Your Python Skills »https://realpython.com/account/join/?utm_source=rp_article_footer&utm_content=python-django-blog
Level Up Your Python Skills »https://realpython.com/account/join/?utm_source=rp_article_footer&utm_content=python-django-blog
https://realpython.com/feedback/survey/article/python-django-blog/liked/?from=article-comments
https://realpython.com/feedback/survey/article/python-django-blog/disliked/?from=article-comments
LinkedInhttps://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Frealpython.com%2Fpython-django-blog%2F
Twitterhttps://twitter.com/intent/tweet/?text=Interesting%20Python%20article%20on%20%40realpython%3A%20Build%20a%20Blog%20Using%20Django%2C%20GraphQL%2C%20and%20Vue&url=https%3A%2F%2Frealpython.com%2Fpython-django-blog%2F
Blueskyhttps://bsky.app/intent/compose?text=Interesting%20Python%20article%20on%20%40realpython.com%3A%20Build%20a%20Blog%20Using%20Django%2C%20GraphQL%2C%20and%20Vue%20https%3A%2F%2Frealpython.com%2Fpython-django-blog%2F
Facebookhttps://facebook.com/sharer/sharer.php?u=https%3A%2F%2Frealpython.com%2Fpython-django-blog%2F
Get tips for asking good questionshttps://realpython.com/python-beginner-tips/#tip-9-ask-good-questions
get answers to common questions in our support portalhttps://support.realpython.com
Real Python Community Chathttps://realpython.com/community/
“Office Hours” Live Q&A Sessionhttps://realpython.com/office-hours/
advancedhttps://realpython.com/tutorials/advanced/
apihttps://realpython.com/tutorials/api/
djangohttps://realpython.com/tutorials/django/
front-endhttps://realpython.com/tutorials/front-end/
web-devhttps://realpython.com/tutorials/web-dev/
Get Started With Django: Build a Portfolio Apphttps://realpython.com/get-started-with-django-1/?utm_source=realpython&utm_medium=web&utm_campaign=related-post&utm_content=python-django-blog
Build a Blog From Scratch With Djangohttps://realpython.com/build-a-blog-from-scratch-django/?utm_source=realpython&utm_medium=web&utm_campaign=related-post&utm_content=python-django-blog
Choosing the Best Coding Font for Programminghttps://realpython.com/coding-font/?utm_source=realpython&utm_medium=web&utm_campaign=related-post&utm_content=python-django-blog
Documenting Python Code: A Complete Guidehttps://realpython.com/documenting-python-code/?utm_source=realpython&utm_medium=web&utm_campaign=related-post&utm_content=python-django-blog
Get Started With FastAPIhttps://realpython.com/get-started-with-fastapi/?utm_source=realpython&utm_medium=web&utm_campaign=related-post&utm_content=python-django-blog
https://realpython.com/account/signup/?intent=continue_reading&utm_source=rp&utm_medium=web&utm_campaign=rwn&utm_content=v1&next=%2Fpython-django-blog%2F
Continue »https://realpython.com/account/signup/?intent=continue_reading&utm_source=rp&utm_medium=web&utm_campaign=rwn&utm_content=v1&next=%2Fpython-django-blog%2F
Sign-Inhttps://realpython.com/account/login/?next=/python-django-blog/
Start Herehttps://realpython.com/start-here/
Learning Resourceshttps://realpython.com/search
Code Mentorhttps://realpython.com/mentor/
Python Referencehttps://realpython.com/ref/
Python Cheat Sheethttps://realpython.com/cheatsheets/python/
Support Centerhttps://support.realpython.com/
Learning Pathshttps://realpython.com/learning-paths/
Quizzes & Exerciseshttps://realpython.com/quizzes/
Browse Topicshttps://realpython.com/tutorials/all/
Live Courseshttps://realpython.com/live/
Bookshttps://realpython.com/books/
Podcasthttps://realpython.com/podcasts/rpp/
Newsletterhttps://realpython.com/newsletter/
Community Chathttps://realpython.com/community/
Office Hourshttps://realpython.com/office-hours/
Learner Storieshttps://realpython.com/learner-stories/
Plans & Pricinghttps://realpython.com/account/join/
Team Planshttps://realpython.com/account/join-team/
For Businesshttps://realpython.com/account/join-team/inquiry/
For Schoolshttps://realpython.com/account/join-team/education-inquiry/
Reviewshttps://realpython.com/learner-stories/
About Ushttps://realpython.com/about/
Teamhttps://realpython.com/team/
Mission & Valueshttps://realpython.com/mission/
Editorial Guidelineshttps://realpython.com/editorial-guidelines/
Sponsorshipshttps://realpython.com/sponsorships/
Careershttps://realpython.workable.com
Press Kithttps://realpython.com/media-kit/
Merchhttps://realpython.com/merch
https://www.youtube.com/realpython
https://x.com/realpython
https://www.linkedin.com/company/realpython-com
https://www.facebook.com/LearnRealPython
https://github.com/realpython/
Privacy Policyhttps://realpython.com/privacy-policy/
Terms of Usehttps://realpython.com/terms/
Securityhttps://realpython.com/security/
Contacthttps://realpython.com/contact/
https://realpython.com/

Viewport: width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover

Robots: max-image-preview:large

URLs of crawlers that visited me.