Presentation on modern-day practices for Vue Storefront 1

1. Modernizing Vue Storefront 1
Yireo - Modernizing Vue Storefront 1 1 of 14

2. Jisse Reitsma
Yireo - Modernizing Vue Storefront 1 2 of 14

3. Jisse Reitsma
Owner of Yireo
Yireo - Modernizing Vue Storefront 1 2 of 14

4. Jisse Reitsma
Owner of Yireo
Extension developer
Yireo - Modernizing Vue Storefront 1 2 of 14

5. Jisse Reitsma
Owner of Yireo
Extension developer
Trainer of developers
Yireo - Modernizing Vue Storefront 1 2 of 14

6. Jisse Reitsma
Owner of Yireo
Extension developer
Trainer of developers
3x Magento Master
Yireo - Modernizing Vue Storefront 1 2 of 14

7. Jisse Reitsma
Owner of Yireo
Extension developer
Trainer of developers
3x Magento Master
Organizer of Reacticon and MageTestFest
3 times Reacticon
2 times MageTestFest
Yireo - Modernizing Vue Storefront 1 2 of 14

8. Reacticon 4
Frontend developer conference
Magento Hyva Themes, PWA Studio, Vue Storefront 1
Shopware PWA and other headless alternatives
Discussions, talks, hangouts, fun
June 14th-18th 2021
Free attendance
Slack space
YouTube livestream
See reacticon.org 
Yireo - Modernizing Vue Storefront 1 3 of 14

9. Vue Storefront 1 On-Demand training
9.5 hours of videos
300+ pages of text
More coming up
Additional topics on VSF1
Also new courses on Magento PWA Studio, VSF Next and more
See yireo.com/vue 
Yireo - Modernizing Vue Storefront 1 4 of 14

10. What about Vue Storefront Next?
Yireo - Modernizing Vue Storefront 1 5 of 14

11. What about Vue Storefront Next?
Nuxt.js based
Yireo - Modernizing Vue Storefront 1 5 of 14

12. What about Vue Storefront Next?
Nuxt.js based
Supported platforms
CommerceTools
Shopify (thanks to Aureate)
Shopware (as Shopware PWA)
...
Yireo - Modernizing Vue Storefront 1 5 of 14

13. What about Vue Storefront Next?
Nuxt.js based
Supported platforms
CommerceTools
Shopify (thanks to Aureate)
Shopware (as Shopware PWA)
...
No Magento support
Yireo - Modernizing Vue Storefront 1 5 of 14

14. What about Vue Storefront Next?
Nuxt.js based
Supported platforms
CommerceTools
Shopify (thanks to Aureate)
Shopware (as Shopware PWA)
...
No Magento support
But Vue Storefront 1 is not dead yet
Thanks to Filip Jedrasik
Yireo - Modernizing Vue Storefront 1 5 of 14

15. Capybara
Yireo - Modernizing Vue Storefront 1 6 of 14

16. Capybara
Do not use Default Theme
Use Capybara
Yireo - Modernizing Vue Storefront 1 6 of 14

17. Capybara
Do not use Default Theme
Use Capybara
Do not copy an entire theme
Use parent/child theming
Yireo - Modernizing Vue Storefront 1 6 of 14

18. Capybara
Do not use Default Theme
Use Capybara
Do not copy an entire theme
Use parent/child theming
Add Storefront UI elements where you want
VSF Next is based on Storefront UI too
Presentational components will keep on working (mostly)
Yireo - Modernizing Vue Storefront 1 6 of 14

19. Parent & Child theming
Yireo - Modernizing Vue Storefront 1 7 of 14

20. Parent & Child theming
Do not copy les
Yireo - Modernizing Vue Storefront 1 7 of 14

21. Parent & Child theming
Do not copy les
Use Webpack!
Yireo - Modernizing Vue Storefront 1 7 of 14

22. Parent & Child theming
Do not copy les
Use Webpack!
Example: yireo-training/vsf-yireo-theme
Yireo - Modernizing Vue Storefront 1 7 of 14

23. Parent & Child theming
Do not copy les
Use Webpack!
Example: yireo-training/vsf-yireo-theme
Based on yireo/vsf1-webpack-inheritance-plugin
Yireo - Modernizing Vue Storefront 1 7 of 14

24. Slow compilation?
Yireo - Modernizing Vue Storefront 1 8 of 14

25. Slow compilation?
Skip SSR compilation
Yireo - Modernizing Vue Storefront 1 8 of 14

26. Slow compilation?
Skip SSR compilation
Use Webpack!
Yireo - Modernizing Vue Storefront 1 8 of 14

27. Slow compilation?
Skip SSR compilation
Use Webpack!
Example: yireo-training/vsf1-local-webpack
Yireo - Modernizing Vue Storefront 1 8 of 14

28. Override speci c les
Do not hack the core
Use Webpack!
File src/themes/capybara/webpack.config.js
...
const mergedConfig = merge(
{
resolve: {
alias: { 'src/modules/client': `${themeRoot}/config/modules` }
}
},
config,
clientConfig
);
...
Yireo - Modernizing Vue Storefront 1 9 of 14

29. Stay up to date
VSF1 is still optimized with small releases
Keep an eye on Github repos
Small xes matter
Copy changes manually, cherrypick commits
Do not just patiently wait for a new o cial release
Yireo - Modernizing Vue Storefront 1 10 of 14

30. Use Storybook
Yireo - Modernizing Vue Storefront 1 11 of 14

31. Use Storybook
Draft a simple style tile (or mood board or whatever)
Plain Vue app without dynamic behaviour
Add Storefront UI as a Node dependency
Add all HTML / CSS output and make sure it looks good
Yireo - Modernizing Vue Storefront 1 11 of 14

32. Use Storybook
Draft a simple style tile (or mood board or whatever)
Plain Vue app without dynamic behaviour
Add Storefront UI as a Node dependency
Add all HTML / CSS output and make sure it looks good
Move Vue components into Storybook
Maintain your own UIComponents along-side your VSF project
Yireo - Modernizing Vue Storefront 1 11 of 14

33. Composition API
Install the Composition API plugin for Vue 2
Add your own composables for logic
Local state
Vuex bindings
GraphQL calls
Yireo - Modernizing Vue Storefront 1 12 of 14

34. Other considerations
Yireo - Modernizing Vue Storefront 1 13 of 14

35. Other considerations
A theme is just some HTML and CSS
Use Tailwind, Material, whatever
Yireo - Modernizing Vue Storefront 1 13 of 14

36. Other considerations
A theme is just some HTML and CSS
Use Tailwind, Material, whatever
Separate logic from output
Presentational vs stateful components
Yireo - Modernizing Vue Storefront 1 13 of 14

37. Other considerations
A theme is just some HTML and CSS
Use Tailwind, Material, whatever
Separate logic from output
Presentational vs stateful components
Tryout the GraphQL binding
Switch from ElasticSearch to GraphQL (SF Query Builder)
But beware of the performance!
Yireo - Modernizing Vue Storefront 1 13 of 14

38. Other considerations
A theme is just some HTML and CSS
Use Tailwind, Material, whatever
Separate logic from output
Presentational vs stateful components
Tryout the GraphQL binding
Switch from ElasticSearch to GraphQL (SF Query Builder)
But beware of the performance!
Use the new Storefront API instead of VSF1 API
Some integration of Apollo Server (with GraphQL caching support)
Yireo - Modernizing Vue Storefront 1 13 of 14

39. Thanks
@jissereitsma
Yireo - Modernizing Vue Storefront 1 14 of 14