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

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

3.
SPA with Flask & Vue | @vannsl
Codebase
github.com/Vannsl/spa-flask-vue

4.
SPA with Flask & Vue | @vannsl
past
index.html
main.js
styles.css

5.
SPA with Flask & Vue | @vannsl
now
Frontend development logos

6.
SPA with Flask & Vue | @vannsl
SPA with Flask and Vue

7.
SPA with Flask & Vue | @vannsl
😱
Another FE Framework?

8.
SPA with Flask & Vue | @vannsl
Progressive JS framework
• Approachable
• Versatile
• Performant

9.
SPA with Flask & Vue | @vannsl
Core Features

10.
SPA with Flask & Vue | @vannsl
Declarative Rendering
Reactive Data Binding

11.
SPA with Flask & Vue | @vannsl
Small & Reusable Components
Composing with Components
Single File Components

12.
SPA with Flask & Vue | @vannsl
Vue Lifecycle Hooks
The Vue Instance

13.
SPA with Flask & Vue | @vannsl
index.html
main.js
styles.css
App.vue

14.
SPA with Flask & Vue | @vannsl
And that’s why: Webpack
Webpack 4

15.
SPA with Flask & Vue | @vannsl
The good news:
You don’t have to care
🤷

16.
SPA with Flask & Vue | @vannsl
vue-cli
• CLI für rapid Vue.js development
• Scaffolding the project
• Ready-to-use app skeletons

17.
SPA with Flask & Vue | @vannsl
vue-cli

18.
SPA with Flask & Vue | @vannsl
Project Structure

19.
SPA with Flask & Vue | @vannsl
Project Structure

20.
SPA with Flask & Vue | @vannsl
Sources

21.
SPA with Flask & Vue | @vannsl
HelloWorld.vue

22.
SPA with Flask & Vue | @vannsl
Sources

23.
SPA with Flask & Vue | @vannsl
Vue Router
mode hash: localhost:8080/#/faq
mode history: localhost:8080/faq

24.
SPA with Flask & Vue | @vannsl
Add router to App.vue

25.
SPA with Flask & Vue | @vannsl
Create the backend
- FAQ - Endpoint…

26.
SPA with Flask & Vue | @vannsl
Component FAQ.vue

27.
SPA with Flask & Vue | @vannsl
npm run dev
&&
FLASK_APP=run.py
FLASK_DEBUG=1 flask run

28.
SPA with Flask & Vue | @vannsl

29.
SPA with Flask & Vue | @vannsl
www.awesome-vue.com
• Datepicker
• Spinner
• Waterfall Layout
• Adsense
• Electron
• i18n
• Google Analytics

30.
SPA with Flask & Vue | @vannsl
Thanks 🙏Thanks 🙏