# Installation

## NPM

You can install it via [NPM](http://npmjs.org/).

```
$ npm install --save vue-form-generator
```

## Manual

Download zip package, unpack and add the `vfg.css` and `vfg.js` file to your project from `/dist` folder.

```
https://github.com/vue-generators/vue-form-generator/releases/latest
```

## Import into Project

```javascript
<script>
    import Vue from 'vue';
    import VueFormGenerator from 'vue-form-generator'
    import 'vue-form-generator/dist/vfg.css'
    Vue.use(VueFormGenerator)
</script>
```

## Core vs Full version

VueFormGenerator can be setup using the 'core' or 'full' variations.

* Core is a minimal version with only half the fields. &#x20;
* Full is core + other fields.

If you don't know what to choose, don't worry, full is the default version. If you want the slimmed down version, here are the changes:

```javascript
// "core" only
<script>
    import Vue from 'vue'
    import VueFormGenerator from 'vue-form-generator/dist/vfg-core.js'
    import 'vue-form-generator/dist/vfg-core.css'
    Vue.use(VueFormGenerator)
</script>
```

## Dependencies

VueFormGenerator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.

While core fields don't require external dependencies, optional fields in the full package may need additional libraries.\
These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors. That way, it's your choice to depend on jQuery or not.

| Field type           | jQuery                                                                                                                          | Vanilla                                                                                                                                     |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Address autocomplete | N/A                                                                                                                             | [googleAddress](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/googleaddress.md)   |
| Color picker         | [spectrum](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/spectrum.md) | N/A                                                                                                                                         |
| Date picker          | [datetime](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/datetime.md) | [pikaday](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/pikaday.md)               |
| Masked Input         | [masked](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/masked.md)     | [cleave](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/cleave.md)                 |
| Multi Selection      | [selectEx](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/selectex.md) | [vueMultiSelect](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/vuemultiselect.md) |
| Slider               | [slider](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/slider.md)     | [noUiSlider](https://github.com/vue-generators/vue-form-generator-docs/tree/694e437ea177a15e3110c0c2fe507ace8485a23d/nouislider.md)         |

You can find details about dependencies in each field page.