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

Question

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?

Did you maybe forget that gunicorn uses threads? Variables are not always shared through gunicorn! — Luke
– Luke, Commented May 8, 2017 at 0:29
{{ and }} are used by flask for its variable rendering .... you need to configure vue to use alternative delimiters like [[ message ]] — Joran Beasley
– Joran Beasley, Commented May 8, 2017 at 0:34

AjayR · Accepted Answer · 2018-08-31 11:00:25Z

16

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>

edited Aug 31, 2018 at 11:00

AjayR

4,1894 gold badges49 silver badges81 bronze badges

answered May 8, 2017 at 0:38

Joran Beasley

114k13 gold badges167 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Greg Over a year ago

Thanks! Just to mention, delimiters should be set as: delimiters: ['[[', ']]']

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related