DEV Community

Discussion on: Vue on Django, Part 4

electrocnic profile image


Sorry, but I just wrote 30minutes of well-formatted documentation for my 3 bugfixes, which was deleted as I accidentely clicked "reload" on this page :(

Now I want at least share a short docu for my main 3 bugs, which I was able to solve, for anybody who comes after me and might have the same struggles:

1st: I installed the newest vue-cli:

npm uninstall vue-cli -g
npm install -g @vue/cli


2nd: I fixed the like described in the comment above, but here is the full file again:

import sys
import fileinput

file = 'templates/index.html'

with open(file, "r+") as f:
    s =
    f.write("{% load staticfiles %}\n" + s)

for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('href=/static/', "href=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('.css', ".css' %}\""))
for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('src=/static/', "src=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('.js', ".js' %}\""))

Will fix the broken index.html template and thus will also fix half of the issues with static files, to be correctly served at runtime.

3rd: Fixed the CopyWebpackPlugin error ERROR in [copy-webpack-plugin] unable to locate '[...]/static' at '[...]/static':
Therefore, a workaround in the build/build.js was necessary. All it does is adding a .gitkeep to the STATIC_ROOT directory before the build.


//add these lines to the other imports:
const webpackConfig = require('./')
const mkdirp = require('mkdirp')
const fs = require("fs")


// add the mkdirp function in the rm-callback:
rm(path.join(,, err => {
  if (err) throw err
  mkdirp(path.join(,, err => {
    if (err) throw err
    // path exists unless there was an error
    fs.closeSync(fs.openSync(path.join(,, '.gitkeep'), 'w'));

  webpack(webpackConfig, function (err, stats) {



4th: I had the following bug at runtime, when I tried to add TODO-Entries:
TypeError: Cannot read property 'push' of undefined

and fixed it by modifying the response.body to in the store/index.js (I renamed that file from store.js to index.js):


'GET_TODOS': function (state, response) {
  state.todos =
'ADD_TODO': function (state, response) {


Hopefully this helps other people who might have the same struggles.

Thanks again for the nice tutorial, maybe I will see other tutorials by you, Sir! :)

Thread Thread
rpalo profile image
Ryan Palo Author

Nicely done! I’m sure a lot of people will appreciate this.