Select Page

Category: vue

Creating Vue.js Component Instances Programmatically

This article assumes basic understanding of Vue.js framework and how to create components in it. If you are new to Vue, then this CSS-Tricks series is a good place to start. I have been on a Vue.js project that required the ability to create components programmatically. By programmatically, I mean you create and insert the components completely from JavaScript, without writing anything in the template. This article aims to illustrate how different aspects of using components in a template, such as instantiation, props passing, slots, mounting, translate to JavaScript code. Normally if you are working with the recommended Single File Component style, you would have a Button component like so: export default { name: 'Button', props: [ 'type' ], } To use it in another component, all you have to do is import the Button component and insert its tag in the template: Click me! import Button from 'Button.vue' export default { name: 'App', components: { Button } } In my case, I don’t know which component to insert in the template and also where to insert it. This information is only available at runtime. So I needed a way to dynamically create component instance for any passed component and insert it in the DOM, during runtime. Creating the Instance The very first idea I had to create a dynamic instance of a given component was to pass it...

Read More

Creating a Vue.js Serverless Checkout Form: Configure the Checkout Component

This is the fourth post in a four-part series. In Part one, we set up a serverless Stripe function on Azure. Part two covered how we hosted the function on Github. The third part covered Stripe Elements in Vue. This last post shows how to configure the checkout component and make the shopping cart fully functional. Article Series: Setup and Testing Stripe Function and Hosting Application and Checkout Component Configure the Checkout Component (This Post) As a reminder, here’s where we are in our application at this point: Configuring the Checkout Component We have to do a few things...

Read More

Creating a Vue.js Serverless Checkout Form: Application and Checkout Component

This is the third post in a four-part series. In part one, we set up a serverless Stripe function on Azure. Part two covered how we hosted the function on Github. This post will focus on wiring everything up as a Vue.js application. Article Series: Setup and Testing Stripe Function and Hosting Application and Checkout Component (This Post) Configure the Checkout Component (Coming Soon) Stripe has a number of ways to build out a checkout form, the most basic being a single button on the page that you trigger to pull up their custom modal. There’s a repo and...

Read More

Creating a Vue.js Serverless Checkout Form: Stripe Function and Hosting

We’re now in the second post of a four-part series where we’re creating a checkout form application in Vue.js that can accept payments via the Stripe API. In part one, we looked at the concept of serverless functions, set one up in Azure, and connected it to a Stripe account. In this post, we’ll focus on setting up Stripe as a serverless function and hosting it all on Github. Article Series: Setup and Testing Stripe Function and Hosting (This Post) Application and Checkout Component (Coming Soon) Configure the Checkout Component (Coming Soon) First, we’re going write our function and...

Read More

Creating a Vue.js Serverless Checkout Form: Setup and Testing

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. Article Series: Setup and Testing (This Post) Stripe Function and Hosting (Coming Soon) Application and Checkout...

Read More
  • 1
  • 2
www.000webhost.com