Setup
Add @vue-formily/formily dependency to your project:
# vue 3.x
yarn add @vue-formily/formily@next
# vue 2.x
yarn add @vue-formily/formily
# vue 3.x
npm install @vue-formily/formily@next
# vue 2.x
npm install @vue-formily/formily
Or with a script tag and a CDN, import the library like this:
<!-- vue 3.x -->
<script src="https://unpkg.com/@vue-formily/formily@next"></script>
<!-- vue 2.x -->
<script src="https://unpkg.com/@vue-formily/formily@latest"></script>
This will inject a Formily global object, which you will use to access the various components, funtions exposed by vue-formily.
If you are using native ES Modules, there is also an ES Modules compatible build:
<script type="module">
// vue 3.x
import Vue from 'https://unpkg.com/@vue-formily/formily@next/dist/formily.esm.js'
// vue 2.x
import Vue from 'https://unpkg.com/@vue-formily/formily@latest/dist/formily.esm.js'
</script>
Then integrate it with Vue
Vue 3.x
import { createApp } from 'vue'
import { createFormily } from '@vue-formily/formily';
const formily = createFormily();
const app = createApp(App)
app.use(formily, {} as VueFormilyOptions);
Vue 2.x
import Vue from 'vue';
import { createFormily } from '@vue-formily/formily';
const formily = createFormily();
Vue.use(formily, {} as VueFormilyOptions);
Options
Options configured here will apply globally to all form elements
interface VueFormilyOptions {
// By default, vue-formily will execute the
// validation silently when changing element's value.
// To disable it, just set the `silent` to `false`.
// When disabled, the element has to be validated manually
// by calling the `element.validate()` method.
silent?: boolean;
// The default rules want to apply to the form.
// With rules that have the `cascade = true`,
// then thay can apply to all the child elements.
rules?: ValidationRuleSchema[];
// The alias of the object contain all the references to the created forms.
// Default is `forms`
alias?: string;
}