yullin / flask-vuejs

Example & Tips, Flask with Vue.js.

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