JavaScript is a great option when going full-stack. However, let’s not forget the fact that it is not the only choice. If you are using a JavaScript framework such as Vue.js for the frontend, that doesn’t mean you must use Node.js for the backend. What expertise you have on the backend development, matters the most. In case you are experienced in Python, naturally, you would want to use Python with Vue.js. The purpose of this article to give an introduction on how you can make an application using Vue.js and Django, Flask, or other Python framework.
Why Vue.js with Python?
When making a decision what technologies you will be using for your next project, here is how you can make a decision if Python with Vue is the best option:
- As it was already mentioned previously, the first reason why you should choose developing with Vue.js and Python together is if you have expertise in Python. Node is great, and in case you really know how you can use it, you can make an incredibly fast application. However, the key part is that you should know, how to achieve this, you must had done in the past. But how important is the speed for you, if you aren’t building a real-time application? What is more important, if you are fluent with the technology you will be using. If you already know Python pretty well, why should you wander around other options when there are more important problems to solve?
- Python is a mature, popular, fun to work with the language that is stable and has a good community. There is plenty of tutorials around Python and technologies related to it, and the language itself is trusted for many years. In case you need help, you know there are many who have dealt with the same problem.
Does the Python needs Vue?
As you might know Python on its own can be used for a variety of tasks. It could be used for operations with data, for web scraping, for DevOps tasks, for automation, and so on. For many of the tasks, Python scripts could be run from a command line. The real need for a front end part comes when we are making a web app. And that’s why there are web frameworks that provide the needed tooling. Python is no exception. Probably the most framework is Django. However, some of the frameworks that are being used are web2py, Flask, CherryPy.
Using Vue.js and Python is definitely possible. So the question is not if it is possible, rather is it easy to do so. First of all, let’s define what you want to do with both of the technologies combined. If you want to use Vue.js as a frontend part of your application and you are going to develop a REST API with Python, then there is no serious reason why you couldn’t use Python or any other programming language for the API part. As far as the data comes from the REST API, any JavaScript framework could be used to manipulate the data on the client-side.
Let’s get to the point. We will see how we can use Vue.js with Django and Flask. Before we start, let’s emphasize that there are two different ways how we can use Django with Vue:
- By making a REST API with the Django and using Vue.js for making a client app
- By incorporating Vue.js in the Django and loading Vue.js code as scripts
In the first case, the Django application and Vue.js client-side application will be like two separate projects. You will develop the backend part with Python framework Django, and for the client-side, the whole of it will be built with Vue.js. And the needed back end functionality will be triggered by using API endpoints. Vue.js, by getting and sending data to the endpoints of the Django application, will make a full application.
SPA for python?
The second choice is to make an app by using the classical Django template, by having a Vue and Jinja solution. It is really possible to incorporate Vue only where you think it is needed. Making a full application with Django and Vue is pretty handy. You can use Vue to build a SPA, that is incorporated in the Django project. However, doesn’t mean that you should make everything SPA. As the templates of Django reloads the whole page in the background, in case if the changes are minor, having Vue will enrichen the UX. It will be more reactive and only the changed part of the page will be reloaded. What I mean by this, you are not obliged to make everything SPA. Vue.js is famous for being progressive, so it means it allows you to make some pages with Vue while keeping others on its own.
Installing Vue.js for a Django
What is Django? As you might know, it’s a Python framework that lets you develop web applications. Django is a great choice as it is fast, provides security features that save from some of the common security flaws. Also, the framework is scalable. It might look like a framework similar to any other, however, one feature that is relevant to us, that the Django uses MVT (model, view, template) model. For example, frameworks like Laravel of PHP use the MVC model (model, view, controller).
Prerequisites
Here the tools needed for the Django and Vue.js tutorial:
- Node and npm
- PyCharm Community addition is used for the example. However, any IDE or text editor can be used.
Install Vue and Django manually
For this tutorial, nothing additional instead of Vue and Django will be used. However, if you are willing to try using webpack and babel with the Django, I encourage you to read this article. Michael had covered it pretty well.
Back to the example, first of all, let’s install the Django. I recommend you use a virtual environment for this, instead of installing it globally. For the purpose of the example, I will show you how to start a Django project with PyCharm.
First of all, create a new project in Pycharm. After this, open the terminal of the IDE and run python -m pip install Django. This will get a Django installed for the empty project.
To check if we had installed Django, use the python -m django –version command. Now, when we have Django, let’s make a new Django project. Use this command to create a project:
django-admin startproject djangovue
This should get a project with a basic folder structure created. That should look like this:
Now cd to the djangovue directory and make a quick check if everything works, by executing python manage.py runserver. You should a Django running that could be accessed by 127.0.0.1:8000.
Now let’s get back to the terminal. Even though we had created a project that already has some of the files generated, we need to make an app. And that’s why Django is good, it lets you have different applications under the hood. So you can create a blog app, a store app, and so on. This is handy as later on, we will be able to make an app dedicated to the client-side that uses Vue.js. For now, let’s create a new app called django_app:
python manage.py startapp myapp
And now the we should have two folders in our project structure:
Djangovue folder should have __init__.py, admin.py, apps.py, models.py, tests.py, views.py files, and a migrations folder. Do you know what we do lack? Templates. Django being an MVT framework, should have templates. Let’s create a templates folder that we will use as an entry point for Vue. In the folder, create an HTML file.
In the index.html file, put a simple HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django and Vue test</title>
</head>
<body>
<h1>Testing if the Vue and Django works</h1>
</body>
</html>Add this point, we could even end this tutorial as all we could do is to add a <script srcc=”https://unpkg.com/vue”></script> and we could have Vue in the Django app. However, this is probably not the most efficient way, especially if you willing to use the Vue.js continuously for many different tasks. Just keep in mind that it is a really fast and cheap way how you can use Jinja and Vue.js together.
So let’s move on. Now we need to add this template to the urls.py file that is located in the djangovue directory. What we need to do is basically import some of the libraries such as URL and TemplateView, and add an index.html template. What we have to do there, is to map the newly created HTML view to the URL. In this way, we will be able to access the view by visiting a URL we had set. Add the needed lines to the contents of urls.py file:
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
url(r'^$', TemplateView.as_view(template_name='index.html'), name='index'),
]Here is one important step you should not skip. In the settings.py file, located in the djangovue folder, you have to edit the TEMPLATES variable. Because we had created our template in the other directory that it is outside the current, we need to update this information. Locate the ‘DIRS” variable and add this to it:
os.path.join(BASE_DIR, 'django_app/templates')This is how it should like:
Now check if everything works fine. Run the python manage.py runserver command when you are located in the django_test directory:
So now you can import the Vue.js into the index.html file and start building your app.
Use a Vue-Django plugin
Another way how we can spin up Vue and Django,, is to use a template. Let’s see how we can use the mentioned boilerplate template. Here is a great template on GitHub: https://github.com/NdagiStanley/vue-django.
Make sure you have Vue installed globally, then execute the following command to start a project:
vue init NdagiStanley/vue-django vue-django-project
Move along the settings (you can leave the default settings), and when the project was generated, cd into the project directory. After this, run npm install to install the needed packages. After the installation was successful, execute npm run and if everything went well, you should get an app running that is accessible by localhost:8000.
Before running a Django part of the code, we need to install the needed packages from the requirements.txt file. A recommended way is to create a virtual environment. For this, you need to install the virtualenv: pip install virtualenv, then you should create it: virtualenv env and finally, activate it: source env/bin/activate (for Linux or Mac) or env\Scripts\activate (for Windows). After the environment was activated, make sure you are in the root folder of the created project and run pip install -r requirements.txt. A process of installation should start.
Finally, you can run a bash script to start the server by sh server.sh. However, if you are on Windows machine, it will be more convenient to run python manage.py runserver 8000, instead. The reason why the default port was not used, and we passed another one as a parameter, is that we already have running the Vue.js app on port 8080.
If you’ve visited http://localhost:8000, you will see nothing, as there is nothing there, so don’t think it’s not working. It’s just that it is supposed to be empty as it’s a fresh template. Now you have an application that uses webpack, Vue, and Django. You can continue your further development from this point.
Using Flask and Vue.js
Creating an app that uses both Vue.js and Flask, is nothing different than the methods that were shown previously. Here is a shortlist what steps should be taken:
- Create an app that will keep your Flask and Vue files
- Create a separate folder for Flask files, then create a virtual environment (python -m venv env), and activate it (source env/bin/activate)
- Install the Flask and Flask-Cors packages (pip install Flask Flask-Cors)
- Create a Vue application (vue create app)
- Pretty much it, now install Axios plugin for Vue (npm install axios) for the communication that the back end code you build on Flask.
This is how you can use Vue and Flask.
Final words
Do you really need to use Vue.js for a Django or for a Flask app? If you came to this question, then the answer is no. There is no reason to use a new technology only because it is trendy and everyone is bragging about it. Vue.js is great for single-page applications, however, if you are comfortable with using Django and the tools it delivers, there is no practical reason for using Vue with Python. Unless you have a need, you are not obliged to add any new technology into your stack.