How to Build a Single-page Application for E-commerce Using Vue?

What is a SPA? Many of you reading this post would not have any idea about it. So, we will begin explaining the same. SPA, also known as a single-page application, is a website or web application. It works by loading a single web document and updating its content via JavaScript APIs. 

Did you get it? If not, we are here to make you understand in the best possible way. 

You might be using or at least visited web applications such as Netflix, Google, Twitter, and Google Maps. All of them have one thing in common. Any guesses? Yes, they are single-page applications! 

When it comes to SPAs, they are high-performing, mobile-friendly, easy to deploy, and faster to respond. But the question is how to build a powerful SPA for e-commerce. Below, we will explain a guide using VueJs and a headless CMS-Graph CMS. To ensure success, hire professionals with hands-on experience in VueJs in Indonesia.

Before we get into the development process of a VueJs SPA for e-commerce, you need to set up a headless CMS. 

• Setting up a headless CMS

Firstly, you require a headless CMS to store your web app data. In this tutorial, we will use Graph SMS. It uses GraphQL as a query language. Here is how to set up your Graph SMS. The process is easy to follow. 

• • Go to the Graph CMS website and choose a From Scratch option to create your project. 
  • In the app dashboard, click on the Set Up Your Schema link. After this, press the + Create Model option. Do not forget to fill up the fields in the schema. 
  • Once you have a product schema, it is time to create concrete products. For this, go to the left side of the panel and click the content button. Now, choose + Create Item option in the right corner from the top. When you enter all the necessary information about your product, click the save and publish button. 
  • Go ahead and expose your products. To do so, choose the Setting panel on the dashboard. Now, update the configuration in the API access section. 
  • Also, create queries for your app to save time. You require two queries: one to fetch products for the home page. The other helps you gather a product for a particular page. 

• A guide to building a SPA for e-commerce with VueJs 

• • Initialization – Since we are using VueJs for a single-page application, Vue CLI is essential. It is a plugin for SPAs that makes your app stay up-to-date. Also, it uses common configurations to set up your project with dependencies. You can install CLI using the following command: 

npm install -g @vue/cli

# OR

yarn global add @vue/cli

Use vue create snipcart-vue-spa for creating your project. It is advisable to add more dependencies before booting the project. It will support your GraphQL queries. For this, you can use yarn add vue-apollo graphql apollo-client.

In addition to this, you need a router to ensure dynamical rendering in a SPA. However, you should use requests only for data and not views. If you want to install the latest version of the Vue router, run yarn add vue-router@4. 

• • Scaffold a project – The next step is building a scaffolding. For this, go to the main.js file. We will use GraphQL client, router, and Vue to configure the services. Now, make changes as follows:

// ‘.src/main.js’

import { createApp } from ‘vue’

import App from ‘./App.vue’

import { ApolloClient, createHttpLink, InMemoryCache } from ‘@apollo/client/core’

import VueApollo from ‘@vue/apollo-option’

import ProductComponent from ‘./components/Product’

import ProductsComponent from ‘./components/Products’

import { createRouter, createWebHashHistory } from ‘vue-router’

const httpLink = createHttpLink({

    uri: ‘//api-ca-central-1.graphcms.com/v2/ckpn42kbid0wf01xsfl4ehoq0/master’,

})

// Cache implementation

const cache = new InMemoryCache()

// Create the apollo client

const apolloClient = new ApolloClient({

    link: httpLink,

    cache,

})

const apolloProvider = new VueApollo({

    defaultClient: apolloClient,

})

const routes = [

    { path: ‘/’, component: ProductsComponent },

    { path: ‘/product/:id’, component: ProductComponent },

]

const router = createRouter({

    history: createWebHashHistory(),

    routes: routes

})

createApp(App)

    .use(router)

    .provide(‘apollo’, apolloProvider)

    .mount(‘#app’)

Note:* We used the uri field for the createHttpLink method. It is nothing but a GraphCMS route that helps in the GraphQL queries execution. Also, make changes to the default App component. It means replacing the provided HelloWorld component with the app one. 

• • Building components – Now is the time to define your components. But before this, it is essential to create GraphQL queries, as they help fetch their data. 

Once you have queries ready, you can start building components. For example, to create a ProductsComponent file in the components folder, avoid using a style tag. After all, it will cause cluttering. Use this program to define your component:

// ‘./src/components/ProductsComponent.vue’

<template>

  <div class=”products”>

      <div class=”product”

      @click=”() => productClicked(product.id)”

      :style=”{backgroundColor: product.color}” 

      :key=”product.id” v-for=”product in products”>

        <span class=”title”>{{product.title}}</span>

      </div>

  </div>

</template>

<script>

import { productsQuery } from ‘../graphql/products’

export default {

  name: ‘App’,

  inject: [‘apollo’],

  data(){

    return {

      products: []

    }

  },

  methods: {

    productClicked(id){

      this.$router.push(`/product/${id}`)

    }

  },

  mounted(){    

    this.apollo.defaultClient.query(productsQuery)

      .then(({data}) => {

        this.products = data.products

      })

  }

}

</script>

• Deployment – After defining your components, you can publish your SPA publicly. However, it is best to test your application with Netlify before doing so. Make sure you also have a GitHub account. But you need to get two things done, such as:

1. Set up environment variables
2. Make arrangements for Snipcart’s crawler for products validation.

In closing 

Congratulations on learning how to build a VueJs SPA for e-commerce! Let us know whether you find this tutorial useful or not. Remember, it is not easy to create a robust SPA with VueJs. The process is tricky. Therefore, hire an experienced and skilled VueJs developer for your project.

If you are looking for a reliable company with proficiency in VueJs in Indonesia, get in touch DigiDuck. We have years of experience delivering top-notch VueJs development services.