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

• [x] Jinja2 & Vue.js
• [x] with SQLAlchemy(Flask-SQLAlchemy)
• [x] more…
• SPA
  • using CDN
    • [x] vue-router
  • using Node.js(using vue-cli ‘webpack-simple’)
    • [x] Single File Component
    • [ ] TypeScript with Single File Component
    • [x] Vuex
• [x] Vue.js v0.10.3