Flask-Vue.js

🍣
compatible Vue.js v2
🍣

confrict a Jinja2 delimiter and Vue.js delimiter...

=> change Jinja2 delimiter

from flask import Flask



class CustomFlask(Flask):

  jinja_options = Flask.jinja_options.copy()

  jinja_options.update(dict(

    block_start_string='(%',

    block_end_string='%)',

    variable_start_string='((',

    variable_end_string='))',

    comment_start_string='(#',

    comment_end_string='#)',

  ))



app = CustomFlask(__name__)



#

# your flask code here

#

• different delimiters in jinja2 + flask

=> change Vue.js delimiter

var app = new Vue({

  el: "#app",

  delimiters: ["[[", "]]"],

  data: {

    message: "Hello Vue!"

  }

})

• Vue.js api/#delimiters

Example & Tips

This repository contain some example, if you want to try it please do as follows.

requirements: Flask (=> pip install Flask)

$ git clone https://github.com/yymm/flask-vuejs.git

$ cd flask-vuejs

$ python app.py

see localhost:5000.

Heroku Button

Try it now.

Menu

• Jinja2 & Vue.js


• with SQLAlchemy(Flask-SQLAlchemy)


• more...


• SPA
  
  
  
  • using CDN
    
    
    
    • vue-router
    
    
  
  
  • using Node.js(using vue-cli 'webpack-simple')
    
    
    
    • Single File Component
    
    
    • TypeScript with Single File Component
    
    
    • Vuex
    
    
  
  


• Vue.js v0.10.3