SPA Flask Vue

SPA with Flask & Vue | @vannsl
Pain Free Frontend Development
SPA with Flask and Vue

Vanessa Böhner
Frontend Developer
@vannsl
@vannsl
vannsl.io

Codebase
github.com/Vannsl/spa-ﬂask-vue

past
index.html
main.js
styles.css

now
Frontend development logos

SPA with Flask and Vue

😱
Another FE Framework?

Progressive JS framework
• Approachable

• Versatile

• Performant

Core Features

Declarative Rendering
Reactive Data Binding

Small & Reusable Components
Composing with Components
Single File Components

Vue Lifecycle Hooks
The Vue Instance

index.html
main.js
styles.css
App.vue

And that’s why: Webpack
Webpack 4

The good news:
You don’t have to care
🤷

vue-cli
• CLI für rapid Vue.js development

• Scaﬀolding the project

• Ready-to-use app sk...

vue-cli

Project Structure

Sources

HelloWorld.vue

Vue Router
mode hash: localhost:8080/#/faq
mode history: localhost:8080/faq

Add router to App.vue

Create the backend
- FAQ - Endpoint…

Component FAQ.vue

npm run dev
&&
FLASK_APP=run.py
FLASK_DEBUG=1 ﬂask run

www.awesome-vue.com
• Datepicker

• Spinner

• Waterfall Layout

• Adsense

• Electron

• i...

Thanks 🙏Thanks 🙏