timonweb/django-vue-helper

Django Vue Helper

Install vue_helper from Pypi: pip install django-vue-helper
Add vue_helper to INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
    ...
    'vue_helper'
]

Set the following parameters in your config:

VUE_DEV_MODE = DEBUG
VUE_APP_NAME = 'frontend'
VUE_APP_DIST_DIR_NAME = 'frontend/dist'
VUE_DEV_SERVER_URL = 'http://localhost:8080'

In your Django project create a new app frontend, this is where you will host Vue static assets:

python manage.py startapp frontend

Add frontend app to INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
    ...
    'vue_helper',
    'frontend'
]

Create (or modify) base.html to have a structure similar to:

{% load vue_helper_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  {% vue_preload_styles %}
  {% vue_preload_scripts %}
  {% vue_styles %}
  {% vue_scripts %}
</head>
<body>
  <div id="app">
    <!-- All content here is accessible by Vue app -->
  </div>
</body>
</html>

Make sure you have Vue CLI installed globally in your system, try to run:

vue --version

If you get an error output, that means you need to install Vue CLI, run the following command in terminal:

npm install -g @vue/cli

After installing Vue CLI go into frontend app directory in your project and run the following command:

vue create static_src

This will install a basic vue project into frontend/static_src directory

Go into frontend/static_src, add a vue.config.js file with the following contents:

module.exports = {
  outputDir: "../static/frontend/dist",
  runtimeCompiler: true,
  devServer: {
    public: "http://localhost:8080"
  }
};

Run npm run serve and you should see a vue server starting.
Restart your Django server.

timonweb / django-vue-helper

Django Vue Helper

About

Languages