ortodesign / flask-vuejs

Example & Tips, Flask with Vue.js.

Home Page:https://flaskvuejs.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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
#

=> change Vue.js delimiter

var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    message: "Hello Vue!"
  }
})

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.

Deploy

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

About

Example & Tips, Flask with Vue.js.

https://flaskvuejs.herokuapp.com/


Languages

Language:JavaScript 79.3%Language:HTML 16.3%Language:Python 1.8%Language:CSS 1.4%Language:Vue 1.1%Language:TypeScript 0.1%