Vue Storefront Tutorial - Implement a simple feature and learn concepts| Step by step for beginners

Показать описание

Hands-on tutorial to get start Vue Storefront development. Quickly learn the basics to do your integration for any E-Commerce platform like Shopify, Magento, PrestaShop or your custom API.

Why Headless Commerce?

New presentation: Why Headless?

Vue Storefront Tutorial full Article:

Changes:
- 12/13/2021: rename command changed
grep -rl '__replace_me__' ./ | xargs sed -i '' 's/__replace_me__/{YOUR INTEGRATION NAME}/g'

Chapters:
0:00 What we want to do?
1:30 Vue Storefront doc and Existing Integrations
3:30 Run Vue Storefront Boilerplate
5:20 Three main components (api-client, composables, theme)
5:25 Api-client package
6:04 Composables package
7:05 Cloning Magento and Shopify integrations
8:50 Theme package
9:17 Vue Storefront general picture
10:54 How the home page is being rendered?
14:45 The API that we get data from it
16:20 Change api-client package settings

18:20 Adding featuredProducts API
21:12 Implementing the useProduct composable
25:10 How the getFiltered method transforms our data
28:19 Data mapping and defining product type
31:20 The MAGIC! How we access our product properties
33:10 Implement product getter methods
36:43 Our Feature is ready :)