Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals

Get started quickly with Vue Storefront 1

Get started quickly with Vue Storefront 1

Vue Storefront has taken the Magento ecosystem by surprise: Its usage of Vue makes it easy to start with, while its flexible architecture offers much more for the experienced Vue developer. This training will guide you in the process of building VSF shops, complete with extensions for the VSF API and shareable building blocks.

Jisse Reitsma

Your teacher: Jisse Reitsma

This training will be held with Jisse Reitsma as your guide. Jisse is the founder of Yireo, three times Magento Master, partner of ExtDN, trainer and author. He has worked with Vue Storefront 1 since 2018, helped out the Vue Storefront community with various useful open source project, is active with Vue Storefront Next and Shopware PWA as well. Either way, he is your man when it comes to a professional Vue training.

Pick the learning method that fits you best

Because everyone has different needs


On Demand

  • Full access to this course with 67 lessons with 9+ hours of video
  • Student notes (423+ pages)
  • Learn at your own pace
for 1 year
per individual


  • On-Demand package of this course
  • Teacher support via email & slack
  • Prioritized requests for new lessons
  • Get the personalized help that you need
for 1 year
per individual


  • On-Demand package of this course
  • Economical for groups of 5 and more
  • Freely debate company-specific topics
  • Online or on-site at your company

Custom price

per training day
per agency

There are no scheduled live trainings available

At this moment, there are no trainings scheduled in our agenda. However, we are always busy with planning more, so make sure to check out our online agenda. Alternatively, checkout our on-demand content or feel free to contact us for a custom in-company training.

Current video lessons in one single view

We are constantly updating our courseware, but the following is a real-life snapshot

Introducing Vue Storefront 1free17m 39s
Organizing the stack in developmentfree12m 49s
Preparing for the PWAfree08m 03s
A mental checklist for the stack   04m 14s
Installing the Vue Storefront 1 PWA   11m 00s
Starting with the Vue Storefront 1 PWAfree11m 49s
Installing the Vue Storefront 1 API   09m 04s
Setting up Redis   09m 29s
Quick introduction to ElasticSearch   15m 42s
Setting up ElasticSearch   06m 19s
Using ElasticSearch 7   05m 16s
Setting up Kibana   10m 05s
Configuring ElasticSearch in PWA & APIfree10m 00s
Setting up Magento 1   04m 11s
Setting up the Magento 1 indexer   08m 44s
Setting up VSBridge for Magento 1   06m 20s
Configuring Magento 1 in the API   06m 14s
Setting up Magento 2   09m 13s
Setting up the Magento 2 indexer   09m 50s
Setting up a data push with Mage2Vuestorefront   10m 56s
Configuring Magento 2 in the API   05m 33s
Switching between themes   03m 47s
Adding the Capybara theme   08m 23s
Creating a new theme   14m 35s
Working with Storefront UI   07m 44s
Working with Lerna   04m 40s
Modifying routes   11m 26s
Using CMS Blocks   02m 57s
Using CMS Pages   02m 27s
Layouts and templates   11m 58s
Adding Vue plugins   17m 03s
Adding new product attributes   12m 32s
Exploring Capybara's code   10m 02s
Exploring Capybara's homepage Vuex store   17m 10s
Handling multiple languages   10m 02s
Vue essentialsfree03m 49s
Dealing with Vue mixinsfree06m 04s
Dealing with Vue slots   13m 12s
Dealing with Vue events   13m 38s
Dealing with Vuex state management   17m 09s
Understanding the PWA configuration   06m 29s
Faster local compilation   07m 56s
Working with GraphQL   11m 48s
SSR   11m 56s
Vocabulary   06m 06s
Finding extensions   08m 33s
Overview of PWA modulesfree07m 42s
Creating a PWA module   06m 47s
What is a PWA module able to do?   08m 03s
Extending routing using a PWA module   04m 35s
Creating a custom Vuex storefree05m 57s
Extending an existing Vuex store   05m 28s
Dealers example   17m 38s
Using PWA module hooks   n/a
Introduction to ExpressJS   n/a
ExpressJS middleware   07m 48s
Extending the API   09m 17s
Order2Magento   04m 32s
Using API hooks   n/a
Magento 2 REST calls   06m 43s
Running the stack in production   10m 41s
Using PM2free16m 42s
Performance   16m 38s
nginx   n/a
Tips & tricks   n/a
Troubleshooting   n/a
wrap   n/a

These videos are available as an On-Demand video training (with notes). See the pricing for details.

These are the options we give you:

At your place or ours?

Everyone learns at her/his own pace. We provide both in-house training and public training throughout Europe - whatever suits your team best. When 3 or more developers are attending, a custom training is often more economical. Contact us for more details.

You'll get courseware

Every workshop is accompanied with official Yireo coursematerial. Attendees are sent a digital version of this material after the training. It contains slides, comments and references. Additionally, our GitHub repos contain numerous more code samples.

Online classrooms

Online trainings are also our training: Via Zoom or Google Hangout sessions, our teacher is able to connect with your team. The benefit here is that the team is able to connect from various places itself as well, timeframes are more flexible. Afterwards, a video recording will be shared with all attendees for reference.

On-demand self-paced training

This training is also available as an On-Demand training: Via numerous video lessons, including accompanying student notes (equalling a book on their own), you'll learn about the topics in your own pace. And when you bump into questions, you can fall back to the teachers guidance.

Preview some of our training videos

Get a taste of what you'll sign up for

We are working on making every training available as a self-paced online video course in 2021. So stay tuned!

Why Yireo?

  • Professional trainings at affordable prices
  • Highly involved in the Vue Storefront community
  • Passionate, enthousiastic, knowledgable

We have trained 160+ Vue Storefront developers since 2019

Training topics

  • Introducing Vue Storefront 1
  • Organizing the stack in development
  • Preparing for the PWA
  • A mental checklist for the stack
  • Installing the Vue Storefront 1 PWA
  • Starting with the Vue Storefront 1 PWA
  • Installing the Vue Storefront 1 API
  • Setting up Redis
  • Quick introduction to ElasticSearch
  • Setting up ElasticSearch
  • Using ElasticSearch 7
  • Setting up Kibana
  • Configuring ElasticSearch in PWA & API
  • Setting up Magento 1
  • Setting up the Magento 1 indexer
  • Setting up VSBridge for Magento 1
  • Configuring Magento 1 in the API
  • Setting up Magento 2
  • Setting up the Magento 2 indexer
  • Setting up a data push with Mage2Vuestorefront
  • Configuring Magento 2 in the API
  • Switching between themes
  • Adding the Capybara theme
  • Creating a new theme
  • Working with Storefront UI
  • Working with Lerna
  • Modifying routes
  • Using CMS Blocks
  • Using CMS Pages
  • Layouts and templates
  • Adding Vue plugins
  • Adding new product attributes
  • Exploring Capybara's code
  • Exploring Capybara's homepage Vuex store
  • Handling multiple languages
  • Vue essentials
  • Dealing with Vue mixins
  • Dealing with Vue slots
  • Dealing with Vue events
  • Dealing with Vuex state management
  • Understanding the PWA configuration
  • Faster local compilation
  • Working with GraphQL
  • SSR
  • Vocabulary
  • Finding extensions
  • Overview of PWA modules
  • Creating a PWA module
  • What is a PWA module able to do?
  • Extending routing using a PWA module
  • Creating a custom Vuex store
  • Extending an existing Vuex store
  • Dealers example
  • Using PWA module hooks
  • Introduction to ExpressJS
  • ExpressJS middleware
  • Extending the API
  • Order2Magento
  • Using API hooks
  • Magento 2 REST calls
  • Running the stack in production
  • Using PM2
  • Performance
  • nginx
  • Tips & tricks
  • Troubleshooting
  • wrap


Vue frontend developers
Magento frontend developers


Skilled in Vue (routing, slots, events, Vuex)
Ability to run Docker images via docker-compose

Frequently Asked Questions

There is a minimum number of attendees listed. What does this mean?

The training is only held when there is a number of attendees. This number is usually 4 but sometimes we bring this down to 2 or 3. This minimum number simply means that if a class is not "full", either you get a refund or your ticket is transferred to another date.

What about Vue Storefront Next aka Vue Storefront 2?

The training that Yireo currently provides is based on Vue Storefront 1, the version that was initially developed for Magento 1 and Magento 2. While the VSF team is currently working hard on Vue Storefront Next, which is going to offer support for other e-commerce products like Shopware, Sylius and BigCommerce, our prime focus is still Magento and therefore, these course are focused on Vue Storefront 1. The Vue Storefront 1 suite is still actively developed and supported by the Vue Storefront team.

Does this training prepare for certification?

As of yet, Vue Storefront does not offer any kind of certification. However, they are working hard on making certification possible. And once that certification is there, our training will definitely be adopted to become a path towards certification.

Does this training also include Vue 3?

The Vue Storefront 1 training does not include Vue 3, because Vue 3 is not supported by VSF1. Training on Vue Storefront Next (or Shopware PWA) does include Vue 3.

Jisse Reitsma

The teacher: Jisse Reitsma

Thus it came to be

When Jisse started with Magento, he already had years of experience programming in Joomla (back in the days when Joomla was actually the #1 CMS - believe it or not). Back then, open source cart solutions were lacking and Magento 1.0 brought a lot of hope.

Quickly Jisse dived into the new architecture: In 2009, he built his first extensions, among which the fundaments of a bridge between Joomla and Magento (MageBridge) and various project-specific extensions (among which payment providers and custom MVC/EAV modules).

A relieve

Over the years, he experienced what most Magento developers experienced with M1: A lot of power, but also frustration. After a couple of years, it no longer was cutting-edge and it barely adopted new developer standards. When the new Magento 2.0 alpha 1 came out, Jisse started playing with it. And he was relieved to see modern tools in its architecture: Composer, PHP namespacing, testability, CLI-driven management, proper design patterns.

Again, after building some modules and dummy projects, the first Magento 2 developer training was given in January 2017 (two months after the official release) and numerous M2 trainings have followed for both backend developers, frontend developers and devops.

Frontend sagas

Currently, with Magento 2 being several years old now, the fuzz is no longer about its backend architecture: It is the frontend that matters. Jisse has given numerous frontend development trainings, where people complain about LESS (and not SASS) being used, loading times to be slow (while in fact M2 allows for enough tuning to make it bloody fast), an archaic combo of Knockout/RequireJS (while they both serve their purpose in regards to backwards compatibility).

PWA is the new keyword. Jisse has dived into React, Redux & service workers in combination with GraphQL and NodeJS tools. He is currently working in various initiatives to help developers embrace the new frontend stack (ExtDN, Vue Storefront, DEITY). Also, he has added Docker and Kubernetes to his vocabulary.

As of yet, it is fair to say that Magento holds little surprises for Jisse. He is your guy to train you or your developers properly in both backend and frontend technology.