sdras/sample-vue-shop

See readme for newer repo details! A sample shop that shows how to manage payments with Vue, Stripe, and Serverless Functions

Vue

1,198

65 commits

updated Dec 7, 2022

See the code

README

Note: This repo is no longer being maintained in favor of a newer, improved version: https://github.com/sdras/ecommerce-netlify

Vue Sample Shop

This small demo shows how to accept payments with stripe with Vue.js using a serverless function. It's actually not that bad to set up! The shop also shows how a number of concepts work in Vue. Server side rendering and routing is done with Nuxt.js. Centralized state management with Vuex for product details. Of note, using computed properties, .sync, CSS Grid, and transition-group.

Live demo at https://shoppity.azurewebsites.net/

Articles explaining the demo will be available soon at https://css-tricks.com/

The serverless function is open source as well, available at this repo https://github.com/sdras/sample-stripe-handler

Vue stripe sample shop

Build Setup

# install dependencies
$ npm install # Or yarn

# serve with hot reload at localhost:3000
$ npm run dev

# generate static project, get ready for launch on app services
$ npm run generate
nuxt
stripe
stripe-checkout
stripe-elements
stripe-payments
vue
vuejs
vue-stripe
vue-stripe-payments

sdras/sample-vue-shop

See readme for newer repo details! A sample shop that shows how to manage payments with Vue, Stripe, and Serverless Functions

Vue

1,198

65 commits

updated Dec 7, 2022

See the code

README

Note: This repo is no longer being maintained in favor of a newer, improved version: https://github.com/sdras/ecommerce-netlify

Vue Sample Shop

This small demo shows how to accept payments with stripe with Vue.js using a serverless function. It's actually not that bad to set up! The shop also shows how a number of concepts work in Vue. Server side rendering and routing is done with Nuxt.js. Centralized state management with Vuex for product details. Of note, using computed properties, .sync, CSS Grid, and transition-group.

Live demo at https://shoppity.azurewebsites.net/

Articles explaining the demo will be available soon at https://css-tricks.com/

The serverless function is open source as well, available at this repo https://github.com/sdras/sample-stripe-handler

Vue stripe sample shop

Build Setup

# install dependencies
$ npm install # Or yarn

# serve with hot reload at localhost:3000
$ npm run dev

# generate static project, get ready for launch on app services
$ npm run generate
nuxt
stripe
stripe-checkout
stripe-elements
stripe-payments
vue
vuejs
vue-stripe
vue-stripe-payments

Significant stargazers

Luke Edwards

5,089 followers · starred Dec 2017

Phan An

2,444 followers · starred Dec 2017

Adrià Fontcuberta

649 followers · starred Dec 2017

Edwin Cheng

76 followers · starred Dec 2017