@vue-use-form/v-form
v0.0.1
Published
unplugin plugin use for vue-use-form
Downloads
4
Readme
@vue-use-form/v-form
Directive for vue-use-form
Install
npm i @vue-use-form/v-form -D
// vite.config.ts
import VForm from '@vue-use-form/v-form'
export default defineConfig({
plugins: [
VForm({ /* options */ }),
],
})
// rollup.config.js
import VForm from '@vue-use-form/v-form'
export default {
plugins: [
VForm({}),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('@vue-use-form/v-form/webpack')({ /* options */ })
]
}
// nuxt.config.js
export default {
buildModules: [
['@vue-use-form/v-form/nuxt', { /* options */ }],
],
}
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('@vue-use-form/v-form/webpack')({ /* options */ }),
],
},
}
Usage
<script setup lang="ts">
import {useForm} from 'vue-use-form'
const {
register,
formState: {errors},
} = useForm<{
email: string
age: number
}>({
mode: 'onChange',
})
</script>
<template>
<input v-form="register('email', {
required: true
})">
<input v-form="register('age', {
required: true,
})">
</template>
Will compiled to
<script setup lang="ts">
import {useForm} from 'vue-use-form'
const {
register,
formState: {errors},
} = useForm<{
email: string
age: number
}>({
mode: 'onChange',
})
const [emailField, emailRef] = register('email', {
required: true
})
const [ageField, ageRef] = register('age', {
required: true,
})
</script>
<template>
<input v-model="emailField" ref="emailRef">
<input v-model="ageField" ref="ageRef">
</template>
⚠️ please make sure use
v-form
in static, it can't do dynamic analysis.
<template v-for="field in ['age', 'email']">
<input v-form="register(field)" /> <!--⚠️⚠️⚠️ can't be analysed-->
</template>
<input v-form="register('email')" />
<input v-form="register('age')" /> <!--can be analysed-->