Skip to main content

Vue.js: The Practical Guide

Natalia Tepluhina
On the web
www.nataliatepluhina.com
On Twitter
@N_Tepluhina
Tickets
Get a ticket

Workshop includes:
  • Working examples to take away
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Workshop, 5×2.5h + Q&A • Thu & Fri, Sep 17 – Oct 2
09:00 – 11:30 AM PDT (Pacific Daylight Time)

According to the State of Javascript 2019 survey, Vue.js is one of the frameworks developers are most interested to learn. If you always wanted to get to grips with it but didn’t know where to begin, this workshop is for you.

Natalia, Vue.js core team member, will teach you how to get started with Vue.js, from setting up the infrastructure to building a full application.


Although Vue has a really nice documentation, it doesn’t cover many practical cases we meet in our everyday work. How do we migrate an application to Vue.js? What’s to keep in mind when dealing with CSS modules and preprocessors? How should we structure components and abstract logic in the Vue app? What about unit testing? And what is this new Composition API and how do we incorporate it into our components? These are some of the questions we’ll tackle in this workshop.

In this workshop, you’ll learn:

  • How to migrate your app to Vue.js or select a template if you want to build an app from scratch.
  • How to architect your application and abstract reusable parts into components or composition functions.
  • What the Composition API is and when to use it.
  • What is an optimal way to work with CSS in Vue.
  • How to use advanced routing techniques like dynamically added routes or navigation guards.
  • Tricks for Vuex state management.
  • Alternatives to Vuex if that’s not your cup of tea.
  • How to unit test your application without testing a framework itself.
  • Dos and don’ts for your Vue code.

Who is this workshop for?

If you want to start learning Vue.js or if you have already worked with Vue.js and want to get a deeper understanding of it, this workshop is for you. To follow along, you should have a fundamental understanding of HTML, CSS, and JS, as well as a basic understanding of Vue (on the level of “I read some docs and would like to give it a try”).

What hardware/software do you need?

A laptop with an up-to-date copy of Chrome and your favorite text editor.

Register for this workshop →

About Natalia Tepluhina

Natalia Tepluhina is a Vue.js core team member and a Senior Frontend Engineer at GitLab. She is a conference speaker and author of articles on different topics related to Vue.js and she loves to write docs. Natalia is also a Google Developer Expert in Web Technologies.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:30, we start at 9 AM PDT. Please mark your calendars:

  • Thu, Sep 17, 09:00 – 11:30 AM PDT
  • Fri, Sep 18, 09:00 – 11:30 AM PDT
  • Thu, Sep 24, 09:00 – 11:30 AM PDT
  • Fri, Sep 25, 09:00 – 11:30 AM PDT
  • Fri, Oct 2, 09:00 – 11:30 AM PDT

Day 1: Getting Started

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM
We’ll start our first workshop day exploring how to scaffold a new Vue app and how to migrate an existing one. You’ll also learn to analyze the structure of a single-file component: templates vs. render functions, options API or composition API, CSS scopes styles or CSS modules.

11:00 AM – 11:30 AM
Q&A with Natalia on the day’s material. Networking!

Day 2: Application Architecture

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM
Application architecture and logic composition are the focus of the day. We’ll explore how to better structure an application, what vendor components are, and how to make them transparent and reusable. We’ll also look into abstracting a logic with scoped slots or composition functions.

11:00 AM – 11:30 AM
Q&A with Natalia on the day’s material. Networking!

Day 3: Vue Router and Vue State

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM
This session is dedicated to advanced Vue Router techniques along with Vue state management options, tips, and tricks.

11:00 AM – 11:30 AM
Q&A with Natalia on the day’s material. Networking!

Day 4: How to Unit Test Your Vue Application

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM
The fourth day is dedicated to all things testing: How to unit test your Vue application? What are the preferred tools? What to assert in a test and how to test an actual application behavior rather than the framework itself? How to test a router and Vuex store? Let’s find out.

11:00 AM – 11:30 AM
Q&A with Natalia on the day’s material. Networking!

Day 5: Dos and Don’ts for Vue Applications

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM
In this final session, we will review some useful tips and techniques along with a few things people tend to do in their Vue applications but shouldn’t.

11:00 AM – 11:30 AM
Q&A with Natalia on the day’s material. Networking!

Register for this workshop →