# Installation

### Installation

For proper working you need a Vue.js Project with Vuetify 2.0 installed. After successful installation of a [Vue 2.6 Project](https://vuejs.org/v2/guide/installation.html) you have to install [Vuetify 2.0](https://vuetifyjs.com/en/getting-started/quick-start/), the world’s most popular Vue.js framework for building feature rich, blazing fast applications.

**vuetify-form-base** is a [Vue.js single-file component](https://vuejs.org/v2/guide/single-file-components.html) with a .vue extension and you can use it like any other Vue-Component.

`npm install vuetify-form-base --save`

{% hint style="info" %}
**INFORMATION:** The vuetify-loader will also make code-splitting more effective, as webpack will only load the components required for that chunk to be displayed. But there is a limitation because **Vuetify-Form-Base** works with dynamic bind components
{% endhint %}

The Vue-Loader **can not** autoload dynamic components with [Treeshaking](https://vuetifyjs.com/en/features/treeshaking/#dynamic-components) and therefore Vuetify-Components must be [manually imported](https://vuetifyjs.com/en/customization/a-la-carte/). Find more Information about dynamic Components in the official [Vue documentation](https://vuejs.org/v2/guide/components.html#Dynamic-Components).

### How to manually import components and directives

**Steps to import**

1. Go to the file src/plugins/vuetify.js
2. Import all the necessary components and directives used by vuetify-form-base:
   * Components
     * VRow
     * VCol
     * VTooltip
     * VTextField
     * VSelect
     * VSlider
   * Directives
     * Ripple
     * Intersect
     * Touch
     * Resize
3. After this, the library will be successfully imported to your Vue file, and no errors on the console should appear.
4. If a new error appears on the console, it means component you are using is not imported. See the name of the component on the console and add to the plugin file.

**Example file from src/plugins/vuetify.js**

```javascript
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify, {
    VRow,
    VCol,
    VTextField,
    VTooltip,
    VCheckbox,
    VSelect,
} from 'vuetify/lib';
import { Ripple, Intersect, Touch, Resize } from 'vuetify/lib/directives';

Vue.use(Vuetify, {
    components: { VRow, VTooltip, VCol, VTextField, VCheckbox, VSelect },
    directives: { Ripple, Intersect, Touch, Resize },
});

export default new Vuetify({
    icons: {
        iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
    }
});
```

This example shows how to import the needed components and directives to use the vuetify-form-base and some basic components like VTextField, VCheckbox, VSelect.