Vue app doesn't load when served through Python Flask server

5
votes

I have a simple "hello world" VueJS app I'm trying to get working:

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="https://unpkg.com/vue"></script>    
</head>
<body>    
  <div id="app">
    Message: {{ message }}
  </div>    
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "Hello, world"
    }
  });
</script>  
</body>
</html>

When I load this file in the browser, off my local disk (ie: file:///home/user/vue-project/index.html), it loads and "Hello, world" is displayed.

However, if I try to take the same file and serve it through the python flask development server, or through gunicorn, {{message}} renders blank.

Does anyone know what might be causing that to happen?

1
pythonflaskvuejs2
Did you maybe forget that gunicorn uses threads? Variables are not always shared through gunicorn! - Luke
{{ and }} are used by flask for its variable rendering .... you need to configure vue to use alternative delimiters like [[ message ]] - Joran Beasley

1 Answers

10
votes

flask renders its variables with jinja2 which uses {{ variable }} as its parsing delimiter

render("mytemplate.html",message="Hello") would replace all {{ message }} blocks with "Hello" before any javascript is handled ... since you dont define message it is simply an empty string... you will need to configure vue to use alternative delimiters (I use [[ message ]])

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="https://unpkg.com/vue"></script>    
</head>
<body>    
  <div id="app">
    Message: [[ message ]]
  </div>    
<script>
  var vm = new Vue({
    el: "#app",
    delimiters : ['[[', ']]'],
    data: {
      message: "Hello, world"
    }
  });
</script>  
</body>
</html>