-
Install vue_helper from Pypi:
pip install django-vue-helper -
Add
vue_helpertoINSTALLED_APPSin 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
frontendapp toINSTALLED_APPSin settings.py:
INSTALLED_APPS = [
...
'vue_helper',
'frontend'
]- Create (or modify)
base.htmlto 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
frontendapp 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 avue.config.jsfile with the following contents:
module.exports = {
outputDir: "../static/frontend/dist",
runtimeCompiler: true,
devServer: {
public: "http://localhost:8080"
}
};-
Run
npm run serveand you should see a vue server starting. -
Restart your Django server.