Skip to content

Setup Vue



We will setup Vue 3 in this tutorial

Now go to directory which contains package.json, by default, it is root directory.

$ npm install vue-loader @vue/compiler-sfc --save-dev
# install vue
$ npm install vue@3

Edit frontend/webpack/webpack.common.js

const { VueLoaderPlugin } = require('vue-loader');

plugins: [

    new VueLoaderPlugin()

module: {
  rules: [

      test: /\.vue$/,
      loader: "vue-loader",
  1. Add VueLoaderPlugin to plugins
  2. Please also add rule to the module.rules to let webpack use vue-loader to process .vue files.

That is it, now the frontend project should work with Vue.

Sample App

Create frontend/src/components/HelloWorld.vue

  <div class="hello">
    <h1>{{ msg }}</h1>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="" target="_blank" rel="noopener">vue-cli documentation</a>.

  export default {
    name: 'HelloWorld',
    props: {
      msg: String

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  ul {
    list-style-type: none;
    padding: 0;
  li {
    display: inline-block;
    margin: 0 10px;
  a {
    color: #42b983;

Create frontend/src/components/App.vue

  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

import HelloWorld from './HelloWorld.vue'

export default {
  name: 'App',
  components: {

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

In the App.vue, we import HelloWorld.vue and render it under <div id="app">

Create frontend/src/application/app_vue.js

import { createApp } from 'vue';
import App from '../components/App.vue';


Now the file structures would seem like this:

$ npm run start

Edit Django template templates/index.html

{% load webpack_loader static %}

<!DOCTYPE html>
  <meta charset="utf-8" />
  <script src=""></script>
  {% stylesheet_pack 'app' 'app_vue' %}
  {% javascript_pack 'app' 'app_vue' attrs='defer' %}

<div class="bg-gray-50 py-5" data-jumbotron>
  <div class="container mx-auto px-4 py-10">
    <h1 class="text-4xl font-bold leading-tight">Welcome to Our Website</h1>
    <p class="mt-4 text-lg">This is a hero section built using Tailwind CSS.</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 rounded-lg">Get Started</button>
    <div class="flex justify-center">
      <img src="{% static 'vendors/images/webpack.png' %}"/>

<div id="app">

$ python runserver


Here we use Vue to render specific component in the page, and we can still use raw HTML to write other parts, which is convenient

Vue example