Hiweb theme is just a pure VueJS project, totally separated from backend. We'll send AJAX request to consume Hiweb API from client-side.

Step 1: Create new Vue project

Firstly, let's create a new vue project using Vue-CLI.

vue create my-theme

It'll ask you to set some options for your new project. Remember to choose vue-router and vuex, those packages are required.

Step 2: Install hiweb-theme-sdk

Next, you'll need to install hiweb-theme-sdk by running this command:

npm i hiweb-theme-sdk

Once the installation completed, open your /src/main.js file to register the sdk and define a default website id that we're working on (for development environment only - it'll be overrided by the sdk in production)

// Location: /src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// Register theme sdk
import hiwebTheme from 'hiweb-theme-sdk'
Vue.use(hiwebTheme)

// Define website id (for development)
if (process.env.NODE_ENV !== 'production') {
  Vue.prototype.$http.setHeaders({
  	'Hiweb-Website-Id': '...your website id...'
  });
}

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Step 3: Create pages

Every pages in a website is a Vue component, like Home page, product page... The pages you are about to create are depended on what type of theme you are making (ecommerce, checkout or blog). Below is a table of all possible pages by default:

Page	Theme type	Recommended location
Home page	any	/src/views/Home.vue
Post detail	ecommerce, blog	/src/views/Post.vue
List posts	ecommerce, blog	/src/views/Posts.vue
Page detail	ecommerce, blog	/src/views/Page.vue
List pages	ecommerce, blog	/src/views/Pages.vue
Product detail	ecommerce	/src/views/Product.vue
All products	ecommerce	/src/views/Products.vue
Product collection	ecommerce	/src/views/Collection.vue
List product collections	ecommerce	/src/views/Collections.vue
Checkout init	checkout	/src/views/Checkout.vue
Checkout invoice	checkout	/src/views/Invoice.vue
Checkout success	checkout	/src/views/Thankyou.vue
Checkout failure	checkout	/src/views/Failure.vue

For now, don't worry about those files yet, just create them as blank files, we'll learn how to use hiweb-theme-sdk on them later.

Step 4: Routing

Once you've created all necessary components from the previous step. Now we need to map them to hiweb theme router like below:

// Location: /src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

import hiwebRouter from 'hiweb-theme-sdk/router';

// Views
import cart from '@/views/Cart';
import collection from '@/views/Collection';
import collections from '@/views/Collections';
import home from '@/views/Home';
import page from '@/views/Page';
import pages from '@/views/Pages';
import post from '@/views/Post';
import posts from '@/views/Posts';
import product from '@/views/Product';
import products from '@/views/Products';

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: '/'
})

// Register routes through hiweb router
hiwebRouter(router).register({
  cart,
  collection,
  collections,
  home,
  page,
  pages,
  post,
  posts,
  product,
  products
});

export default router