Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals On-Demand course

Vue essentials

Duration: 03:49 | Last Modified 31 July 2021

This is a lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals

This is a preview lesson only

Note that this is a preview lesson. When accessing this lesson as part of the full training, there are a couple of benefits: The materials are available via the Yireo Courseware portal and can be presented as a slideshow, progress can be monitored, additional resources will be available. And obviously, all lessons - instead of just the preview lessons - will be available to you.

Get full access to the Vue Storefront 1 Fundamentals training

Student notes

Vue essentials

As soon as you want to customize things in the VSF1 PWA, it is a must to know a bit more about Vue itself. This lesson sums up a couple of the essential parts of Vue that you need to know about.

Vue essentials

  • VSF1 PWA is based on Vue 2
  • Make sure to become confident in Vue first

Tip: Use the Vue 2 Composition API plugin to add the Vue 3 Composition API to VSF1

First of all, it is important to note that Vue Storefront 1 is based on Vue 2, not Vue 3. This means that you can use some of the features of Vue 2 that are actually outdated in Vue 3: Filters, directives, mixins. You can even use the Composition API plugin for Vue 2, to use composition in Vue Storefront 1, just like you would with Vue 3. Vue Storefront Next is going to be based on Vue 3, so that you will use the Composition API more and more. Perhaps, therefore, it is a good practice to already create composable functions in VSF1, to allow for an easier migration to VSF Next in the future.

Vue concepts in VSF1

  • Routing
  • Mixins
  • Slots
  • Directives
  • Events
  • Vuex

There are a bunch of Vue 2 features, that you will need to know about when diving into VSF1. A couple of these topics are discussed in separate lessons - like slots, events, mixins and Vuex. Some topics, like the basic syntax, dealing with components, reactivity and properties are a baseline - you will simply need to know about Vue, before modifying the Vue code in VSF1. Some other topics like routing and directives are nice to know about, but as soon as you go through the lessons of this course, you will know about them anyway: The Vue Router is used in VSF1, but when dealing with modules and themes in VSF1, there is a specific way of dealing with them - this is discussed in another lesson.

Directives are being phased out. The only directive that is still present in the code at the time of writing is the focusClean directive, defined in src/themes/default/components/theme/directives/focusClean.js, but used nowhere in the current core.


GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo