├── 03_flask_blueprints ├── api │ ├── __init__.py │ └── api.py ├── client │ ├── __init__.py │ ├── client.py │ ├── static │ │ └── index.js │ └── templates │ │ └── index.html └── app.py ├── .gitignore ├── 02_separate_ends ├── webapp │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── App.vue │ │ └── components │ │ │ └── HelloWorld.vue │ ├── .gitignore │ ├── README.md │ └── package.json └── api │ └── app.py ├── 02_separate_ends_with_ssr ├── webapp │ ├── static │ │ ├── favicon.ico │ │ └── README.md │ ├── components │ │ ├── README.md │ │ └── Logo.vue │ ├── .editorconfig │ ├── layouts │ │ ├── README.md │ │ └── default.vue │ ├── pages │ │ ├── README.md │ │ └── index.vue │ ├── assets │ │ └── README.md │ ├── plugins │ │ └── README.md │ ├── middleware │ │ └── README.md │ ├── package.json │ ├── store │ │ └── README.md │ ├── nuxt.config.js │ └── .gitignore └── api │ └── app.py ├── requirements.txt ├── 01_vue_in_jinja ├── app.py ├── static │ └── index.js └── templates │ └── index.html ├── README.md └── .github └── workflows └── combine-prs.yml /03_flask_blueprints/api/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03_flask_blueprints/client/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | __pycache__ 2 | .vscode/ 3 | env/ -------------------------------------------------------------------------------- /02_separate_ends/webapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/HEAD/02_separate_ends/webapp/public/favicon.ico -------------------------------------------------------------------------------- /02_separate_ends/webapp/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/HEAD/02_separate_ends/webapp/src/assets/logo.png -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-jace/combining-flask-with-vue/HEAD/02_separate_ends_with_ssr/webapp/static/favicon.ico -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | click==7.1.2 2 | Flask==1.1.2 3 | Flask-Cors==3.0.9 4 | itsdangerous==1.1.0 5 | Jinja2==2.11.3 6 | MarkupSafe==1.1.1 7 | six==1.15.0 8 | Werkzeug==1.0.1 9 | -------------------------------------------------------------------------------- /01_vue_in_jinja/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, render_template 2 | 3 | app = Flask(__name__) 4 | 5 | @app.route("/") 6 | def index(): 7 | return render_template("index.html", **{'greeting': 'Hello from Flask!'}) 8 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: function (h) { return h(App) }, 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /01_vue_in_jinja/static/index.js: -------------------------------------------------------------------------------- 1 | const vm = new Vue({ // Again, vm is our Vue instance's name for consistency. 2 | el: '#vm', 3 | delimiters: ['[[', ']]'], 4 | data: { 5 | greeting: 'Hello, Vue!' 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /02_separate_ends/api/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from flask_cors import CORS 3 | 4 | app = Flask(__name__) 5 | CORS(app) 6 | 7 | @app.route("/greeting") 8 | def greeting(): 9 | return {'greeting': 'Hello from Flask!'} 10 | -------------------------------------------------------------------------------- /03_flask_blueprints/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from api.api import api_bp 3 | from client.client import client_bp 4 | 5 | app = Flask(__name__) 6 | app.register_blueprint(api_bp, url_prefix='/api_v1') 7 | app.register_blueprint(client_bp) -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/api/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from flask_cors import CORS 3 | 4 | app = Flask(__name__) 5 | CORS(app) 6 | 7 | @app.route("/greeting") 8 | def greeting(): 9 | return {'greeting': 'Hello from Flask!'} 10 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /03_flask_blueprints/api/api.py: -------------------------------------------------------------------------------- 1 | from flask import Blueprint 2 | 3 | api_bp = Blueprint('api_bp', __name__) # "API Blueprint" 4 | 5 | @api_bp.route("/greeting") # Blueprints don't use the Flask "app" context. They use their own 6 | def greeting(): 7 | return {'greeting': 'Hello from Flask!'} 8 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/README.md: -------------------------------------------------------------------------------- 1 | # webapp 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webapp", 3 | "version": "1.0.0", 4 | "description": "My astounding Nuxt.js project", 5 | "author": "based-jace", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "nuxt": "^2.0.0" 15 | }, 16 | "devDependencies": {} 17 | } 18 | -------------------------------------------------------------------------------- /03_flask_blueprints/client/client.py: -------------------------------------------------------------------------------- 1 | from flask import Blueprint, render_template 2 | 3 | client_bp = Blueprint('client_bp', __name__, # 'Client Blueprint' 4 | template_folder='templates', # Required for our purposes 5 | static_folder='static', # Again, this is required 6 | static_url_path='/client/static' # Flask will be confused if you don't do this 7 | ) 8 | 9 | @client_bp.route('/') 10 | def index(): 11 | return render_template('index.html') 12 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /03_flask_blueprints/client/static/index.js: -------------------------------------------------------------------------------- 1 | const apiEndpoint = '/api_v1/'; 2 | 3 | const vm = new Vue({ 4 | el: '#vm', 5 | delimiters: ['[[', ']]'], 6 | data: { 7 | greeting: 'Hello, Vue!', 8 | flaskGreeting: 'flaskGreeting' 9 | }, 10 | created: async function(){ 11 | const gResponse = await fetch(apiEndpoint + 'greeting'); 12 | const gObject = await gResponse.json(); 13 | this.flaskGreeting = gObject.greeting; 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /02_separate_ends_with_ssr/webapp/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /02_separate_ends/webapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "prod": "http-server" 9 | }, 10 | "dependencies": { 11 | "http-server": "^0.12.3", 12 | "vue": "^2.6.11" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-service": "~4.3.0", 16 | "vue-template-compiler": "^2.6.11" 17 | }, 18 | "browserslist": [ 19 | "> 1%", 20 | "last 2 versions", 21 | "not dead" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /03_flask_blueprints/client/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |[[ greeting ]]
11 |[[ flaskGreeting ]]
12 |{{ greeting }}
12 |[[ greeting ]]
13 |{{ greeting }}
4 |{{ flaskGreeting }}
5 |{{ greeting }}
4 |{{ flaskGreeting }}
5 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |