Serverless Functions and Vue.js

A presentation at Concatenate in in Lagos, Nigeria by Sarah Drasner

Serverless is the most clickbaity title for an actually interesting thing. Despite the name, Serverless does not mean you’re not using a server, rather, the promise of Serverless is to no longer have to babysit a server. Scaling is done for you, you’re billed only for what you use. In this session, we’ll cover some key use cases for these functions within a Vue.js application: we’ll accept payments with stripe, we’ll gather geolocation data from Google Maps, and more! We’ll make it all work with Vue and Nuxt seamlessly, simplifying how to leverage this paradigm to be a workhorse for your application.

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • Free Azure account

    To get started with any of the repos listed below.

  • Sample Vue 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/

  • Sample Stripe Handler

    This small demo shows how to accept payments with stripe with Vue.js using an Azure Serverless Function. It's actually not that bad to set up!

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

    https://css-tricks.com/creating-vue-js-serverless-checkout-part-one/

  • Creating a Vue.js Serverless Checkout

    Four-part series

    There comes a time in any young app’s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we’ll go over how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application. This may sound daunting, but it’s actually pretty straightforward! Let's dig in.

  • CDA Locale

    Small demo showing where and when all of the Microsoft Cloud Developer Advocates are speaking. Using Serverless functions to update geolocation info, Nuxt for server-side rendering, and Vue.js computed properties for really fast list filtering.

    Live demo at http://cda-locale.azurewebsites.net/

    Article series explaining the demo at https://css-tricks.com/exploring-data-with-serverless-and-vue-part-i (this is a two part series)

  • Geo-Lookup Function

    Attached to the CDA Locale demo, the serverless function

Buzz and feedback

Here’s what was said about this presentation on Twitter.