How do I build performant Vue applications? Training
Beginner · 2 half days or 1 days or flexible as in-house training · In-House
Favorite
Agenda
Understanding performance and making it measurable
We lay the foundation: what does performance mean for your users?
- Why performance is a feature
- Core Web Vitals: LCP, INP and CLS
- Distinguishing lab data from field data
- Typical performance problems in Vue applications
Establishing a performance budget
Together we define the benchmarks your application has to meet.
- What belongs in a performance budget?
- Sensible target values for bundle size, requests and load times
- Anchoring and documenting the budget within the team
- Detecting budget violations automatically
Tools for analysis
You get to know the tools you use to track down bottlenecks.
- Chrome DevTools: Performance, Network and Coverage panel
- Lighthouse and Web Vitals in practice
- Vue DevTools and the component timeline
- Bundle analysis with Vite and Rollup Visualizer
Rendering and reactivity in Vue 3
We take a look under the hood and understand when Vue re-renders.
- An overview of the Vue 3 reactivity system
- Detecting and avoiding unnecessary re-renders
-
Using
computed,watchandwatchEffectdeliberately -
Keeping reactive data lean with
shallowRefandmarkRaw
Optimizing components
Small changes in component design with a big impact.
- Designing props, slots and events for performance
-
v-forwith stable keys andv-memo -
v-onceand static hoisting - Rendering large lists with virtual scrolling
-
Offloading expensive components with
defineAsyncComponent
Reducing load times and bundle size
We get the application onto the screen faster.
- Code splitting and route-based lazy loading
- Tree shaking and dealing with third-party libraries
- Optimizing images, fonts and assets
- Preload, prefetch and caching strategies
Outlook and next steps
So that performance stays firmly anchored in your project.
- Server-side rendering and static site generation as an option
- Performance checks in the CI pipeline
- Monitoring in production
-
Checklist and further resources for your project
<!-- /accordion -->
What you should know
This course has no special prerequisites.
The course “How do I build performant Vue applications?” is aimed at Beginner.
What's Included
Request in-house/corporate training
Submit a request and book a preliminary meeting with our advisor.
What our participants say
Bekanntes vertieft und Neues gelernt hinsichtlich Vue/Performance
Attended How do I build performant Vue applications? Training
Ein sehr gelungener Workshop und hervorragende Einblicke in die Thematik. Vielen Dank!
Attended How do I build performant Vue applications? Training
Super Workshop. Leicht verständlich und trotzdem detailliert. Das gelernte wurde mit kleinen Aufgaben direkt umgesetzt und Fragen wurden ausführlich beantwortet.
Attended How do I build performant Vue applications? Training
Ich konnte dem Trainer super gut folgen und er war sehr kompetent.
Attended Vue.js & TypeScript Intensive Training
Super Grundlagen Schulung! Hier lernt man alles was man wissen muss, um mit dem ersten Vue.js Projekt zu starten.
Attended Vue.js & TypeScript Intensive Training
Gute Erklärungen mit genug Prxisanteil, dass man auch tatsächlich was behält
Attended Vue.js & TypeScript Intensive Training
Questions and answers
Our public How do I build performant Vue applications? remote courses take place from 9:00 AM to 1:00 PM, on-site How do I build performant Vue applications? trainings from 9:00 AM to 4:30 PM.
For in-house seminars, individual adjustments are possible.
Yes. At the end of each of our How do I build performant Vue applications? seminars, participants receive a signed certificate of attendance.
The certificate includes a verification URL and can be shared on your LinkedIn profile. Learn more about managing certificates on LinkedIn.
Yes, we offer our How do I build performant Vue applications? seminars in German and English.
Public dates are held in German, unless explicitly stated otherwise.
In-house seminars can be conducted in the desired language.
All materials and exercises are fully available in English.
Yes. We offer our How do I build performant Vue applications? seminars both remotely and on-site. Thanks to our virtual classroom, you can conveniently participate in our workshops from anywhere. Our online presentations are regularly updated, and you have permanent access after the training. Exercises can be accessed and unlocked through an online interface, and we have added additional tasks to prepare you for remote workshops.
We also offer in-house seminars and public trainings on-site. In our schedule overview, you can see the respective venue of the trainings. For in-house trainings, we are happy to discuss the venue details individually with you.
For public How do I build performant Vue applications? seminars, we use the online meeting tool Zoom alongside our classroom.
A test link is also included in the preparation to let you try out the technology. The remote workshop is designed so that everyone works from different locations with their own computer.
For in-house seminars, we can conduct the meeting via Zoom or Microsoft Teams.
Other meeting software may be used by arrangement.
For our in-house seminars, we additionally offer code mentoring.
What is code mentoring?
- Ask-Me-Anything sessions: Clarify questions and uncertainties from the course directly with an expert.
- Code review: Submit your own code snippets and have them analyzed and evaluated by experts.
- Advanced topics: Ask in-depth questions about the course topic to expand your knowledge.
For participants of public trainings, we recommend joining our community Discord server.
Your benefits on Discord:
- Diverse channels for questions and discussions – beyond the course topic.
- An engaged community that supports you in learning.
Our trainers are experienced experts from the industry:
- Experienced software developers
- Book and article authors
- Active members of the web community
- Organizers of meetups and conferences
Yes. You can enter your routing ID directly in our order form. Our invoices are sent as ZUGFeRD PDFs right after booking.
If you have provided a routing ID, our team will be notified and we will handle the upload to the portal. If we need additional information, we will contact you after booking.
Just send us an email. If you prefer a more personal contact, Britta is also happy to receive a call from you!