SlideShare a Scribd company logo

SPA Flask Vue

V
Vanessa Böhner

This document outlines the development of a single-page application (SPA) using Flask and Vue.js, emphasizing a pain-free approach for frontend development. It details core features of Vue, project structure, and tools like vue-cli and webpack for efficient development. The content includes practical examples such as routing and component usage, along with useful resources.

Software
1 of 30
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
SPA with Flask & Vue | @vannsl Pain Free Frontend Development SPA with Flask and Vue
Vanessa Böhner Frontend Developer @vannsl @vannsl vannsl.io
SPA with Flask & Vue | @vannsl Codebase github.com/Vannsl/spa-flask-vue
SPA with Flask & Vue | @vannsl past index.html main.js styles.css
SPA with Flask & Vue | @vannsl now Frontend development logos
SPA with Flask & Vue | @vannsl SPA with Flask and Vue
SPA with Flask & Vue | @vannsl 😱 Another FE Framework?
SPA with Flask & Vue | @vannsl Progressive JS framework • Approachable • Versatile • Performant
SPA with Flask & Vue | @vannsl Core Features
SPA with Flask & Vue | @vannsl Declarative Rendering Reactive Data Binding
SPA with Flask & Vue | @vannsl Small & Reusable Components Composing with Components Single File Components
SPA with Flask & Vue | @vannsl Vue Lifecycle Hooks The Vue Instance
SPA with Flask & Vue | @vannsl index.html main.js styles.css App.vue
SPA with Flask & Vue | @vannsl And that’s why: Webpack Webpack 4
SPA with Flask & Vue | @vannsl The good news: You don’t have to care 🤷
SPA with Flask & Vue | @vannsl vue-cli • CLI für rapid Vue.js development • Scaffolding the project • Ready-to-use app skeletons
SPA with Flask & Vue | @vannsl vue-cli
SPA with Flask & Vue | @vannsl Project Structure
SPA with Flask & Vue | @vannsl Project Structure
SPA with Flask & Vue | @vannsl Sources
SPA with Flask & Vue | @vannsl HelloWorld.vue
SPA with Flask & Vue | @vannsl Sources
SPA with Flask & Vue | @vannsl Vue Router mode hash: localhost:8080/#/faq mode history: localhost:8080/faq
SPA with Flask & Vue | @vannsl Add router to App.vue
SPA with Flask & Vue | @vannsl Create the backend - FAQ - Endpoint…
SPA with Flask & Vue | @vannsl Component FAQ.vue
SPA with Flask & Vue | @vannsl npm run dev && FLASK_APP=run.py FLASK_DEBUG=1 flask run
SPA with Flask & Vue | @vannsl
SPA with Flask & Vue | @vannsl www.awesome-vue.com • Datepicker • Spinner • Waterfall Layout • Adsense • Electron • i18n • Google Analytics
SPA with Flask & Vue | @vannsl Thanks 🙏Thanks 🙏

More Related Content

PDF
Pain Free Frontend Development
Vanessa Böhner
 
PDF
Infinum - Building API based apps without an API
Infinum
 
PPTX
Angular PWA
Vinci Rufus
 
PDF
Serverless Application Model - Executing Lambdas Locally
Alex
 
PDF
Driving Pipeline Automation With Newman and the Postman API
Postman
 
PPTX
How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin...
UK DevOps Collective
 
PPTX
Selenium Conference Austin 2017 - Automate Windows and Mac Apps With The WebD...
Selenium Conference Austin 2017
 
PDF
180929_NextBuild_From_Java_to_Kotlin
Paulien van Alst
 
Pain Free Frontend Development
Vanessa Böhner
 
Infinum - Building API based apps without an API
Infinum
 
Angular PWA
Vinci Rufus
 
Serverless Application Model - Executing Lambdas Locally
Alex
 
Driving Pipeline Automation With Newman and the Postman API
Postman
 
How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin...
UK DevOps Collective
 
Selenium Conference Austin 2017 - Automate Windows and Mac Apps With The WebD...
Selenium Conference Austin 2017
 
180929_NextBuild_From_Java_to_Kotlin
Paulien van Alst
 

What's hot (20)

PDF
Is Serverless The New Swiss Cheese?
Chase Douglas
 
PDF
Demystifying Web Performance
Atlassian
 
PDF
Reasonable app development
Arnar Þór Sveinsson
 
PPTX
Writing Performant Front-end Code
Lyubomir Bozhinov
 
PDF
RxJS: A Beginner & Expert's Perspective - ng-conf 2017
Tracy Lee
 
PDF
Building for, perceiving and measuring performance for mobile web
Robin Glen
 
PPTX
Serverless with Azure Functions
Andreas Willich
 
PDF
Develop and Deploy Outside the Repo
afragen
 
PDF
Aptana Jaxer
rajivmordani
 
PDF
Common design principles and design patterns in automation testing
KMS Technology
 
PDF
20 quick wins to improve your website speed
Aymen Loukil
 
PDF
Mesos at OpenTable
samsalisbury
 
PPTX
GAB2017 - Azure function to build serverless SharePoint apps
Riwut Libinuko
 
PDF
Application Performance Monitoring for WordPress
WP Engine
 
PDF
Panoramic view of web APIs
Karen Immanuel
 
PDF
Magnolia Conference Basel 2016 SysEleven
Simon Pearce
 
PDF
Ansible ALLTHETHINGS
Dan Chuparkoff
 
PPTX
What DevOps means for QA Teams
Chris Riley ☁
 
PPTX
Cloud Native Batch Processing
VMware Tanzu
 
PDF
Scaling Without Expanding: a DevOps Story
Atlassian
 
Is Serverless The New Swiss Cheese?
Chase Douglas
 
Demystifying Web Performance
Atlassian
 
Reasonable app development
Arnar Þór Sveinsson
 
Writing Performant Front-end Code
Lyubomir Bozhinov
 
RxJS: A Beginner & Expert's Perspective - ng-conf 2017
Tracy Lee
 
Building for, perceiving and measuring performance for mobile web
Robin Glen
 
Serverless with Azure Functions
Andreas Willich
 
Develop and Deploy Outside the Repo
afragen
 
Aptana Jaxer
rajivmordani
 
Common design principles and design patterns in automation testing
KMS Technology
 
20 quick wins to improve your website speed
Aymen Loukil
 
Mesos at OpenTable
samsalisbury
 
GAB2017 - Azure function to build serverless SharePoint apps
Riwut Libinuko
 
Application Performance Monitoring for WordPress
WP Engine
 
Panoramic view of web APIs
Karen Immanuel
 
Magnolia Conference Basel 2016 SysEleven
Simon Pearce
 
Ansible ALLTHETHINGS
Dan Chuparkoff
 
What DevOps means for QA Teams
Chris Riley ☁
 
Cloud Native Batch Processing
VMware Tanzu
 
Scaling Without Expanding: a DevOps Story
Atlassian
 
Ad

Similar to SPA Flask Vue (20)

PDF
Vue.js Component Tools
Vanessa Böhner
 
PDF
Exploring pwa for shopware
Sander Mangel
 
PPTX
Azure Static Web Apps
Jen Looper
 
PDF
Quinoa: A modern Quarkus UI with no hassles | DevNation tech Talk
Red Hat Developers
 
PPTX
SharePoint Framework - Developer Preview
Sean McLellan
 
PDF
Migrating a modern spring web application to serverless
Jeroen Sterken
 
PDF
NodeJS Interactive 2019: FaaS meets Frameworks
Chris Bailey
 
PDF
How to build a static website in two and a half days with Nuxt and Tailwind CSS
Vanessa Böhner
 
PPTX
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
Short-Training asp.net vNext
Betclic Everest Group Tech Team
 
PDF
Building PWAs: ScalaCode’s Comprehensive Frameworks & Tools Handbook
jeckdavid909
 
PPTX
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
Sébastien Levert
 
PPTX
SharePoint Fest Chicago - From SharePoint to Office 365 Development
Sébastien Levert
 
PDF
Building a Single Page Application with VueJS
danpastori
 
PPTX
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
PDF
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
PDF
Essentials in JavaScript App Bundling with Webpack
Khaled Al-Ansari
 
PPTX
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
Sébastien Levert
 
PDF
Building your own calendly using amazon app sync
Dhaval Nagar
 
Vue.js Component Tools
Vanessa Böhner
 
Exploring pwa for shopware
Sander Mangel
 
Azure Static Web Apps
Jen Looper
 
Quinoa: A modern Quarkus UI with no hassles | DevNation tech Talk
Red Hat Developers
 
SharePoint Framework - Developer Preview
Sean McLellan
 
Migrating a modern spring web application to serverless
Jeroen Sterken
 
NodeJS Interactive 2019: FaaS meets Frameworks
Chris Bailey
 
How to build a static website in two and a half days with Nuxt and Tailwind CSS
Vanessa Böhner
 
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
Short-Training asp.net vNext
Betclic Everest Group Tech Team
 
Building PWAs: ScalaCode’s Comprehensive Frameworks & Tools Handbook
jeckdavid909
 
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
Sébastien Levert
 
SharePoint Fest Chicago - From SharePoint to Office 365 Development
Sébastien Levert
 
Building a Single Page Application with VueJS
danpastori
 
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development
Sébastien Levert
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Essentials in JavaScript App Bundling with Webpack
Khaled Al-Ansari
 
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
Sébastien Levert
 
Building your own calendly using amazon app sync
Dhaval Nagar
 
Ad

Recently uploaded (20)

PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
William Chong
 
PPTX
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
IT IDOL Technologies
 
PDF
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
Actowiz Solustions
 
PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
rohnjim07
 
PPT
Introduction Database Management System for Course Database
ReinertYosua
 
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
ghrom2211g
 
PDF
How Creative Agencies Leverage Project Management Software.pdf
Orangescrum
 
PDF
PTS Company Brochure 2025 (1).pdf.......
pts464036
 
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
ghrom2211g
 
PDF
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
OnePlan Solutions
 
PDF
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
pts464036
 
PDF
Navsoft: AI-Powered Business Solutions & Custom Software Development
Navsoft
 
PDF
AI in Product Development-omnex systems
omnex systems
 
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 41
ghrom2211g
 
PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
Conacent Consulting
 
PPTX
CHAPTER 2 - PM Management and IT Context
KevinPutra14
 
PDF
Design an Analysis of Algorithms II-SECS-1021-03
DilanEscobar1
 
PPTX
Operating system designcfffgfgggggggvggggggggg
rmskumara09
 
PDF
Odoo Companies in India – Driving Business Transformation.pdf
azhuhardeen1968
 
PPTX
ISO 45001 Occupational Health and Safety Management System
EHA Soft Solutions
 
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
William Chong
 
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
IT IDOL Technologies
 
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
Actowiz Solustions
 
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
rohnjim07
 
Introduction Database Management System for Course Database
ReinertYosua
 
Adobe Illustrator 28.6 Crack My Vision of Vector Design
ghrom2211g
 
How Creative Agencies Leverage Project Management Software.pdf
Orangescrum
 
PTS Company Brochure 2025 (1).pdf.......
pts464036
 
Wondershare Filmora 15 Crack With Activation Key [2025
ghrom2211g
 
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
OnePlan Solutions
 
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
pts464036
 
Navsoft: AI-Powered Business Solutions & Custom Software Development
Navsoft
 
AI in Product Development-omnex systems
omnex systems
 
Internet Downloader Manager (IDM) Crack 6.42 Build 41
ghrom2211g
 
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
Conacent Consulting
 
CHAPTER 2 - PM Management and IT Context
KevinPutra14
 
Design an Analysis of Algorithms II-SECS-1021-03
DilanEscobar1
 
Operating system designcfffgfgggggggvggggggggg
rmskumara09
 
Odoo Companies in India – Driving Business Transformation.pdf
azhuhardeen1968
 
ISO 45001 Occupational Health and Safety Management System
EHA Soft Solutions
 

SPA Flask Vue