title: Pass value to VueJs component variable via Flask on render_template
body: <p>I am trying to integrate VueJS with Python Flask, but I am having some issues to pass variables to compiled component via render_template. Basically, in the example below, I have a component Quadriblock.vue that has a variable 'message'. The value of this variable should come from my app.py via render_template. I already tried changing the delimiters but it did not work.. the variable empty.How to populate a variable via flask render_template?</p>
  <p>Quadriblock.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;row col-md-12&quot;&gt;
          &lt;h2&gt;{{message}}&lt;/h2&gt;
          &lt;div class=&quot;row col-md-12&quot;&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;img src=&quot;img_chania.jpg&quot; alt=&quot;Flowers in Chania&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;img src=&quot;img_chania.jpg&quot; alt=&quot;Flowers in Chania&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;row col-md-12&quot;&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;img src=&quot;img_chania.jpg&quot; alt=&quot;Flowers in Chania&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;img src=&quot;img_chania.jpg&quot; alt=&quot;Flowers in Chania&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
        props: ['message'],
        data: () =&gt; ({})
      };
  &lt;/script&gt;
  &lt;style&gt;
  &lt;/style&gt;
  
  &lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;SearchBar/&gt;
      &lt;QuadriBlock message={{message|tojson}}/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>This is the App.vue</p>
  <pre><code>&lt;script&gt;
  import SearchBar from './components/SearchBar.vue'
  import QuadriBlock from './components/QuadriBlock.vue'
  export default {
      name: 'App',
        components: {
          SearchBar,
          QuadriBlock
        }
      };
  &lt;/script&gt;
  
  &lt;style lang=&quot;scss&quot;&gt;
  #app{
      width: 960px;
      align: center;
      background:blue;
      margin: auto;
  }
  &lt;/style&gt;
  </code></pre>
  <p>This is main.js</p>
  <pre><code>import 'mutationobserver-shim'
  import Vue from 'vue'
  import './plugins/bootstrap-vue'
  
  import App from './App.vue'
  import vuetify from './plugins/vuetify'
  import '@babel/polyfill'
  import 'roboto-fontface/css/roboto/roboto-fontface.css'
  import '@mdi/font/css/materialdesignicons.css'
  import VueResource from 'vue-resource'
  
  Vue.use(VueResource)
  
  Vue.config.productionTip = false
  Vue.http.options.crossOrigin = true;
  
  new Vue({
  //  router,
  //  store,
    vuetify,
    delimiters: ['[[',']]'],
    render: h =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  <p>After compiling them with npm run build, flask with use the js, html and css files from dist to render the html. On catch_all, i use render_template to pass 'this is a flask message' to the variable message I refer to on App.vue. The problem is that when I run flask run, the h2 property is empty.</p>
  <pre><code>#!/usr/bin/env python3
  # -*- coding: utf-8 -*-
   
  from flask import Flask, render_template, jsonify
   
  app = Flask(__name__)
  
  @app.route('/')
  def catch_all():
      return render_template(&quot;vue/index.html&quot;,message=&quot;This is a FLASK message?&quot;)
          
  if __name__ == '__main__':
      app.run()
  </code></pre>