title: Vue.js
category: page
slug: vuejs
sortorder: 0425
toc: False
sidebartitle: Vue.js
meta: Learn about Vue.js and other JavaScript frameworks for web applications on Full Stack Python.


[Vue.js](https://vuejs.org/) ([source code](https://github.com/vuejs/vue)) 
is a [JavaScript](/javascript.html) web application framework for building 
rich apps that run in web browsers.

<a href="https://vuejs.org/" style="border:none"><img src="/img/logos/vuejs-wide.png" width="100%" alt="Vue.js logo." class="shot"></a>

<div class="well see-also">Vue.js is an implementation of the <a href="/javascript.html">JavaScript frameworks</a> concept. Learn how these pieces fit together in the <a href="/web-development.html">web development</a> chapter or view the <a href="/table-of-contents.html">table of contents</a> for all topics.</div>


### Vue.js-related projects
* [flask-vue-spa](https://github.com/oleg-agapov/flask-vue-spa) is an example
  project with a [Flask](/flask.html) API on the backend and Vue on the front.

* [django-vue-template](https://github.com/ariera/django-vue-template) contains
  example code for a [Django](/django.html) backend. There is also another
  project named 
  [django-vue-template](https://github.com/gtalarico/django-vue-template) by
  a different developer so take a peek at that one as well if the first one
  does not suit your needs.

* [vuepress](https://vuepress.vuejs.org/) 
  ([source code](https://github.com/vuejs/vuepress)) is a 
  [static site generator](/static-site-generator.html) that uses Vue and
  [Markdown](/markdown.html) to create pre-rendered static HTML pages.


### Vue.js resources
* [Building web apps with Vue and Django](https://dafoster.net/articles/2021/02/16/building-web-apps-with-vue-and-django-the-ultimate-guide/)
  covers architectural decisions such as whether to use one or
  two servers and then explains how to go down the one server
  route with a [Django](/django.html) back end.

* [A friendly introduction to Vue.js](https://appendto.com/2016/11/a-friendly-introduction-to-vue-js/)
  contains the code and brief explanations of what it's doing so you can
  learn to create your first Vue app.

* [Developing a Single Page App with Flask and Vue.js](https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/)
  walks through all of the environment configuration, project setup and
  coding you need to do to build a legitimate Vue.js application that
  uses a [Flask](/flask.html) API on the backend. 

* [Building a SaaS using Django and Vue.js](https://www.youtube.com/playlist?list=PLpyspNLjzwBnGesxJOt_0r4xTWR80j7Y3)
  shows how to create a software-as-a-service application with a 
  [Django](/django.html) back end and Vue on the front end via a 
  series of videos that are each between 10-15 minutes in length.

* [Learn Vue by Building and Deploying a CRUD App](https://testdriven.io/courses/learn-vue/?utm_source=fsp)
  is an awesome course that walks through the Vue basics and building
  a whole application and deploying it to 
  [Netlify](https://www.netlify.com/).

* The official 
  [Vue.js getting started documentation](https://vuejs.org/v2/guide/)
  is fantastic and highly recommended as a top starting resource.

* [Replacing jQuery With Vue.js: No Build Step Necessary](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/)
  explains why you may want to replace existing jQuery code with Vue and how
  to do so with minimal steps, depending on the complexity of your applicationi
  code, of course!

* [Why we chose Vue.js](https://about.gitlab.com/2016/10/20/why-we-chose-vue/)
  covers GitLab's reasons for using this JavaScript framework over other
  options.

* The Vue.js publishes their own documentation page on how Vue 
  [compares with other frameworks](https://vuejs.org/v2/guide/comparison.html).
  It is refreshing to see a straightforward technical analysis without the
  posturing that often comes from authors of one project discussing other work
  in the same space.

* [Build a Crud application using Vue and Django](https://codesource.io/build-a-crud-application-vue-and-django/)
  combines [Django](/django.html) and 
  [Django REST Framework](/django-rest-framework-drf.html) with Vue.js in
  this tutorial that shows how to build a simple web app for managing 
  subscriptions.

* [Building Modern Applications with Django and Vue.js](https://auth0.com/blog/building-modern-applications-with-django-and-vuejs/)
  combines [Django](/django.html), 
  [Django REST Framework](/django-rest-framework-drf.html), Vue.js
  and [Auth0](https://auth0.com/) 
  (an authentication web [API](/application-programming-interfaces.html))
  in an introductory web application.

* [Vue.js And SEO: How To Optimize Reactive Websites For Search Engines And Bots](https://www.smashingmagazine.com/2019/05/vue-js-seo-reactive-websites-search-engines-bots/)
  shows how pre-rendering and various other attributes of JavaScript MVC 
  frameworks like Vue.js can negatively impact your SEO. It then walks 
  through the most important items to address to mitigate these problems
  on your own Vue-based sites.

* [Exploring Data with Serverless and Vue: Automatically Update GitHub Files With Serverless Functions](https://css-tricks.com/exploring-data-with-serverless-and-vue-part-i/)
  combines a [serverless](/serverless.html) backend with Vue.js on the
  front.

