Addons

Addon features for Vue projects build by Diamond.

Vue Addons

These addons are integrated into the Diamond scaffolding generator. You can choose which addons to install during the scaffolding process.

SVG addon

SVG addon is based on the svg-sprite-loader. This addon is a Webpack loader for creating SVG sprites.

Diamond generator not only added the loader, also provide a SVG component for SVG usage. By adding this addon, we can simply start using the component right away without having to write any code.

File structures

First, the generator will create a src/icons/ folder, this is specially created for storing the .svg files. The folder has the following files:

.          
└── src         
    └── icons             
       ├── svg   
       │  ├── dashboard.svg
       │  ├── example.svg
       │  └── ...
       ├── index.js   
       └── svg.yml

Second, the generator will create the SVG Compoment at src/components/SvgIcon/ folder. With the following structure.

.          
└── src         
    └── components     
       └── SvgIcon   
          └── index.vue

Usage

Use of this component is simple.

<SvgIcon name="SVG-icon-name" />

This component has being register globally. Therefor we cang put use this component anywhere in side our page.

The name attribute is the name of your SVG file that you put in src/icons/ folder.

API addon

API addon is built base on Axios, a promise based HTTP client for the browser and node.js.

This addon is pre-configured by Diamond Generator, used for requesting APIs.

Structure

First a request helper has been pre-built at src/utils/request.js. This is made speically for Vue with Axios, pre-configured out of the box.

Secondly there is a src/api/ folder, this is for store all our API files.

.          
└── src         
    └── api

Usage

Using the API addon is simple, first create a API file in src/api/ folder like this:

// src/api/Order.js
import request from '@/utils/request'

export function getOrder() {
  return request({
    url: '/path/to/api',
    method: 'get'
  })
}

Then, import API file to your vue page or component where you need to request an API.

// Example.vue
<template>
    <span>Hello World</span>
</template>

<script>
import { getOrder } from '@/src/api/Order'

  export default {
    setup(){
        function fetchOrder() {
            // Fetching order through order API
            this.getOrder().then((response) => {
                console.log(response)
            })
        }
    }
  }
</script>

Since the Axios is promise based HTTP client, therefore can use .then and .catch promise chain.

Auth addon

Working in Progress