Learn how to build an e-commerce website using Nuxt, Vue's Storefront UI API, and BigCommerce. We'll walk through a demo of building an e-commerce storefront using Nuxt & Vue, which includes core commerce functionality such as cart and checkout. We'll also cover how to extend the ecommerce functionality via APIs.

1. Building Ecommerce
Storefronts with
BigCommerce & Vue
Using Nuxt & Storefront UI Library
Presenter Date
Ashley McKemie BigCommerce March 2020
Company

2. Intros.

4. Intros
San Francisco
Austin
Kyiv
Sydney

6. CONFIDENTIALINFORMATION
The BigCommerce Platform
BigCommerce Storefront
Stencil CLI
Checkout: Stencil, SDK, Embed
Theme Marketplace
Headless CMS or DXP
WordPress Plugin
Bloomreach
Drupal
Sitecore
PWA Storefronts
Vue Storefront
Gatsby
JMango
DIETY Falcon
And more!
iOS mobile apps
Android mobile apps
IoT (internet of things)
Use our conversion optimized storefront engine
or decouple and build your own
Intros
Storefront API powered by GraphQL
Cornerstone

7. Product Manager
⥋
3rd Party Storefronts, Channels &
Webhooks
Who Am I?
Intros
Ashley McKemie

8. Power a Headless
Storefront
with Nuxt, Storefront UI, and BigCommerce

9. Getting Started.
With the BigCommerce + Nuxt starter app*
◿ Dependencies
● Create BigCommerce store with API User Account to get API Keys (Instructions: http://bit.ly/bc-api-creds)
● npm run install
◿ What’s being used?
● Storefront rendering - Vue.js based Storefront UI Design System: https://www.storefrontui.io/
● Ecommerce functionality - BigCommerce platform via APIs: https://developer.bigcommerce.com/vue
◿ Out of the box functionality:
● Core site pages: Home, About, Products, Product Detail Pages (PDP), Blog, Contact Form, Cart
● Data syncing (catalog, categories, etc) between Nuxt storefront and BigCommerce store
● Cart & Checkout
○ Redirected checkout to hosted BigCommerce checkout
Powering a Headless Storefront * WIP

10. Creating the Storefront.
Product List, Product Detail Pages, and Redirected Checkout
◿ Creating dynamic product routing
◿ Using BigCommerce’s Storefront graphQL API
to get the data: bit.ly/bc-graphql
◿ Using Storefront UI Components, including:
● SfProductOption
● SfProductCard
● SfGallery
◿ Using BigCommerce’s Cart & Checkout
● PCI compliant
Powering a Headless Storefront
Product detail page creation with dynamic routing

11. Beyond the Starter
Extension via APIs to support additional use
cases

12. Unlocking
Value
◿ Multi-site: B2C & B2B,
multi-brand
◿ Multi-region &
international
◿ Differentiated shopper
experiences, driven by
content and data,
powered by
BigCommerce, PWAs,
CMS, DXPs, and more!
◿ Optimized conversion
with best of breed SEO
Use Cases

13. Extending the Storefront.
With an extensive set of APIs, you can quickly and easily start adding more robust e-
commerce functionality to the Nuxt + BigCommerce starter.
◿ International capabilities
● Channels & Listings APIs
● Multi-currency
● Tax & Shipping APIs
◿ Customers
● Customer account and login management
● Wish lists
Beyond the Starter
◿ Marketing
● Coupons
● Gift certificates
◿ Orders & Payments Management
◿ And more!
Checkout all the BigCommerce APIs: https://developer.bigcommerce.com/api-docs

14. Thank You
Sign up for a Developer sandbox store on BigCommerce to start coding!
https://developer.bigcommerce.com/vue
Check out the Nuxt Starter
https://github.com/bigcommerce/bc-nuxt-vue-starter
Learn more about our headless integrations at BigCommerce:
https://developer.bigcommerce.com/api-docs/developers-guide-headless
Follow us on Twitter:
@BigCommerceDevs
Follow up questions or thoughts?
ashley.mckemie@bigcommerce.com