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, September 14–28
09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)

According to the State of Javascript 2020 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.

$350.00 $450.00 Register for this workshop → Five 2.5h live sessions + Q&A. .
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with Smashing Membership.

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.

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:45, we start at 9 AM PDT. Please mark your calendars:

  • Tue, Sep 14, 09:00 – 11:30 AM PDT
  • Wed, Sep 15, 09:00 – 11:30 AM PDT
  • Tue, Sep 21, 09:00 – 11:30 AM PDT
  • Wed, Sep 22, 09:00 – 11:30 AM PDT
  • Tue, Sep 28, 09:00 – 11:30 AM PDT

$350.00 $450.00 Register for this workshop → Five 2.5h live sessions + Q&A. .
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with Smashing Membership.


Day 1: Essentials

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:

  • Starting a new app from scratch with Vue — what to use

    • Vue CLI as a common Webpack-based SPA solution
    • SSR
    • Vite
  • Migrating to Vue

    • Replacing legacy JS/JQuery logic
    • Migrating from another framework
  • Single file components blocks

    • Script
      • Options API or Composition API?
      • TypeScript - worth it or not?
    • CSS
      • Preprocessors
      • Global styles, scoped styles, CSS modules

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

Day 2: Application architecture and logic composition

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.

  • Grouping components — flat structure vs nested structure
  • Base/vendor/shared components
    • Naming convention
    • Transparent components
  • Abstracting and reusing logic
    • Slots and scoped slots
    • Renderless components
    • Composition API

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

Day 3: Routing

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.

  • Separating views from components
  • Lazy-loaded routes
  • Route guards
    • Route-level guards
    • In-component guards
  • Dealing with 404

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

Day 4: State management

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

9:00 AM – 11:00 AM
We will be looking at Vue state management options, alternatives, tips and tricks.

  • Vuex 4 and Vuex 5: what to use and what’s the difference between the two?
  • Vuex tricks
    • Organising modules
    • Grouping exports
    • Naming convention for actions/mutations
  • Vuex alternatives
    • Basic state management with Composition API
    • Apollo Client

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

Day 5: Unit testing in Vue application

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

9:00 AM – 11:00 AM
The last day is dedicated to all things testing.

  • What to test? Writing tests from ‘user perspective’
  • Vue Test Utils
    • localVue and how not to overuse it
    • shallowMount vs mount
    • Asynchronous operations
    • Testing Vuex store

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

Register for this workshop →