Overview

Flask-VueJs-Template is a web application template that combines Flask and Vue.js. It provides a minimal Flask 1.0 app with a Flask-RestPlus API that has class-based secure resource routing. The template also includes a starter PyTest test suite. On the Vue.js side, it uses the vue-cli 3 + yarn setup and includes Vuex, Vue Router, and Axios for backend communication. Heroku configuration is provided for easy one-click deployment with Gunicorn.

Features

• Minimal Flask 1.0 App
• Flask-RestPlus API with class-based secure resource routing
• Starter PyTest test suite
• vue-cli 3 + yarn setup
• Vuex for state management
• Vue Router for client-side routing
• Axios for backend communication
• Sample Vue Filters
• Heroku Configuration with one-click deployment + Gunicorn

Installation

Before getting started, make sure you have the following installed and running:

• Yarn
• Vue Cli 3
• Python 3
• Pipenv (optional)
• Heroku Cli (if deploying to Heroku)

Clone the repository and set it up:

git clone <repository-url>
cd flask-vue-template

Setup virtual environment, install dependencies, and activate it:

pipenv install
pipenv shell

Install JavaScript dependencies:

cd static
yarn install

Run Flask API development server:

python run.py

From another terminal tab in the same directory, start the webpack dev server:

cd static
yarn serve

The Vue.js application will be served from localhost:8080 and the Flask API and static files will be served from localhost:5000.

Summary

Flask-VueJs-Template is a web application template that combines the power of Flask and Vue.js. It provides a minimal Flask app with a secure API, along with a Vue.js frontend that includes Vuex, Vue Router, and Axios. The template also includes sample Vue filters and provides easy Heroku configuration for one-click deployment. With its comprehensive set of features and easy installation process, Flask-VueJs-Template is a great choice for building web applications.