# Addons

## Vue Addons

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

![](https://img-blog.csdnimg.cn/20210126204643538.png)

## SVG addon

SVG addon is based on the [svg-sprite-loader](https://github.com/JetBrains/svg-sprite-loader#readme). 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:

```javascript
.          
└── 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.

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

### Usage

Use of this component is simple.

```markup
<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](https://github.com/axios/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.

```javascript
.          
└── src         
    └── api
```

### Usage

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

```javascript
// 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