Installation

For proper working you need a Vue.js Project with Vuetify 2.0 installed. After successful installation of a Vue 2.6 Project you have to install Vuetify 2.0, 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 with a .vue extension and you can use it like any other Vue-Component.

npm install vuetify-form-base --save

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

The Vue-Loader can not autoload dynamic components with Treeshaking and therefore Vuetify-Components must be manually imported. Find more Information about dynamic Components in the official Vue documentation.

How to manually import components and directives

Steps to import

Go to the file src/plugins/vuetify.js
Import all the necessary components and directives used by vuetify-form-base:
- Components
  - VRow
  - VCol
  - VTooltip
  - VTextField
  - VSelect
  - VSlider
- Directives
  - Ripple
  - Intersect
  - Touch
  - Resize
After this, the library will be successfully imported to your Vue file, and no errors on the console should appear.
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

// 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.

PreviousStart with NextIntro

Last updated 4 years ago

Was this helpful?

// 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' } });