Third party UI libraries

This library is mainly intended for managing state of the form. Despite the fact that this library provides a small set input fields, this may not be enough for large projects. This is why compatibility with other UIs is very important to us. libraries. Since the form-field mechanism is transparent, connect third-party components are a no-brainer.

There is no example of your library

If you are using a popular UI library that is not listed - write to me on GitHub and I will I'll try to add it to this page.

You also need to remember that there is currently no library for Vue 2 can be used. To add your own fields yourself you need to read this article.

Vuetify 3

The mastodon among libraries is vuetify. Library with a huge number component, including for working with forms. This library uses the v-model mechanism to interact with values. Because of this we don't need to use a wrapper, just add them to config:

import {VColorPicker} from 'vuetify/components'
import {config} from "jenesius-vue-form"

config({
     inputTypes: {
         'color-picker': VColorPicker,
     }
})

import {VColorPicker} from 'vuetify/components'
import {config} from "jenesius-vue-form"

config({
     inputTypes: {
         'color-picker': VColorPicker,
     }
})

Ready! Now we connect <form-field/> with the required type and name:

vue

<!--some-component.vue-->
<template>
     <div>
         <form-field type = "color-picker" name = "testColor" />
     </div>
</template>

<script setup>
import {FormField, Form} from "jenesius-vue-form";
</script>

<!--some-component.vue-->
<template>
     <div>
         <form-field type = "color-picker" name = "testColor" />
     </div>
</template>

<script setup>
import {FormField, Form} from "jenesius-vue-form";
</script>

Quasar

To connect quasar you need to declare the component and add handler in .use:

import {config} from "jenesius-vue-form";

import { Quasar, QRange } from "quasar";
import "quasar/dist/quasar.css";

const app = createApp(App)

config({
     inputTypes: {
         range: QRange
     }
})
app.use(Quasar, { config: {} }) // Don't forgot
app.mount("#app");

import {config} from "jenesius-vue-form";

import { Quasar, QRange } from "quasar";
import "quasar/dist/quasar.css";

const app = createApp(App)

config({
     inputTypes: {
         range: QRange
     }
})
app.use(Quasar, { config: {} }) // Don't forgot
app.mount("#app");

Vant 4

An excellent library with excellent support from the developers. There are no differences from previous libraries. Provides a set of fields that can be easily connected:

import { Switch } from 'vant';
import {config} from "jenesius-vue-form";
import 'vant/lib/index.css'; // Don't forget about CSS

const app = createApp(App)

config({
     inputTypes: {
         'switch': Switch
     }
})

app.mount("#app");

import { Switch } from 'vant';
import {config} from "jenesius-vue-form";
import 'vant/lib/index.css'; // Don't forget about CSS

const app = createApp(App)

config({
     inputTypes: {
         'switch': Switch
     }
})

app.mount("#app");

Element Plus

The Element+ connection looks like this: Here we will override field numeric:

import {config} from "jenesius-vue-form";
import { ElInputNumber } from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

config({
     inputTypes: {
         'numeric': ElInputNumber
     }
})

app.mount("#app");

import {config} from "jenesius-vue-form";
import { ElInputNumber } from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

config({
     inputTypes: {
         'numeric': ElInputNumber
     }
})

app.mount("#app");

Ant Deign

Similarly with vant we connect css and declare the necessary components:

import {config} from "jenesius-vue-form";
import { Radio } from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App)

config({
     inputTypes: {
         'radio': Radio
     }
})

app.mount("#app");

import {config} from "jenesius-vue-form";
import { Radio } from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App)

config({
     inputTypes: {
         'radio': Radio
     }
})

app.mount("#app");

PrimeVue

Another component library that delivers a cool set input fields. They are also easy to connect since there are no pitfalls that would need to be taken into account. We follow the instructions:

Connect the plugin itself:

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue);

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue);

import dropdown from 'primevue/dropdown';
config({
     inputTypes: {
         dropdown
     }
})

import dropdown from 'primevue/dropdown';
config({
     inputTypes: {
         dropdown
     }
})

We use it via form-field:

vue

<template>
     <form-field
         type="dropdown"
         name = "location"
         :options="cities"
     />
</template>
<script setup>
const cities = ref([
     { name: 'New York', code: 'NY' },
     { name: 'Rome', code: 'RM' },
]);
</script>

<template>
     <form-field
         type="dropdown"
         name = "location"
         :options="cities"
     />
</template>
<script setup>
const cities = ref([
     { name: 'New York', code: 'NY' },
     { name: 'Rome', code: 'RM' },
]);
</script>

Vuestic

It also does not cause any problems during installation. Install to your application. Installation information can be found in their documentation. In our example it looks like this:

import {config} from "jenesius-vue-form";
import { VaColorInput } from "vuestic-ui";

config({
    inputTypes: {
        'color': VaColorInput
    }
})

createApp(App).mount('#app')

import {config} from "jenesius-vue-form";
import { VaColorInput } from "vuestic-ui";

config({
    inputTypes: {
        'color': VaColorInput
    }
})

createApp(App).mount('#app')

As you can see, no more transformations are needed. You are importing the component and add it to jenesius-vue-form.

Third party UI libraries ​

Vuetify 3​

Quasar​

Vant 4​

Element Plus​

Ant Deign​

PrimeVue​

Vuestic​