A lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals
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.
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.
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.
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.