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

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

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

sample-vue-shop's Issues

demo site is 404

maybe need to rehost it? thanks

Improve filterProducts function by using ES6 filter

Hi Sarah,

thanks for this repo, it's a great example and I think It'll come in handy soon enough for me :)

I noticed a couple of lines where you could improve the readability of your code by using ES6 functions such as filter, map and reduce.

For example, you could replace the whole filterProducts with a one-liner:

sample-vue-shop/store/index.js

Line 148 in 61bc699

const filterProducts = (state, filterBy) => {

const filterByCategory = (arr, title) => arr.filter(item => item.category === title)

// and then, in your getters:
women: state => filterByCategory(state.products, 'women'),

I'd be happy to submit a PR if you think it's worth it.

Again, thanks for your work! 💪

Redirect from /women to /dist/women

How to create filter for 10,000 items ?

How to deal with filter widget with items more than 10,000 ? Wouldn't it create memory leakages on my client side ?
Any idea for a situation where you can call API every time a query parameter is added to the url ?
TY for this great repo

Is this all served from one HTTP GET Function?

Hello @sdras !

Just watched your talk today. I've been wanting to learn to use Vue and have been doing some Functions and Logic Apps work so this was right up my alley but by the end of the video I was left asking myself, "When does she start actually using Functions?"

I know you talked about Functions in the beginning, with regards to Stripe, but is that the only place Functions is used? This repo doesn't appear to be ready to be dropped in as a Function app so does that mean it is hosted on a traditional web host?

Thank you!

shop cart error

first of all nice work.
after successful payment cart is cleared up but if you add new item than last bought item is in cart as well, every time you add new item in cart all last bought items stay there

Api should be returned Promises instead call callback

I think it will be clearer if methods in Api return Promise instead invoke a callback. How about you ?

Move method pay() in AppCheckout into Api

I think this method should be in Api.
If success it will return Promise.resolve, otherwise return Promise.reject