Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @netsells/vue-form-data with all npm packages installed. Try it out:

var vueFormData = require("@netsells/vue-form-data")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@netsells/vue-form-data v0.2.0

Mixins to handle form data in a form and input components for you

npm version Build Status codecov Mutation testing badge

Vue Form Data

Mixins to handle form data in a form and input components for you. This package makes it much easier to treat a form as a single object, and allows custom input components access to other form fields.


yarn add @netsells/vue-form-data


This package exposes 2 mixins: withFormData and withFormInput. Both are functions which return a mixin object, and can be passed options.


This is a basic mixin which creates a formData state.

import { withFormData } from '@netsells/vue-form-data';

    mixins: [

    mounted() {
        console.log('Form data:', this.formData); // {}

Options you can pass are:

  • formData - change the formData name
  • defaults - change the default formData
import { withFormData } from '@netsells/vue-form-data';

    mixins: [
            formData: 'data',
            defaults: { foo: 'bar' },

    mounted() {
        console.log('Form data:',; // { foo: 'bar' }


This mixin adds the required props value and id. value must be set to the formData from the form using v-model. id is the name of the field in the formData, and optionally can be used for the id attribute on the input element.

It also adds a model and formData computed property. These handle the emit events for you. Changing model will update the value of the matching key in formData. Changing formData will change the entire object, and is useful for child inputs.

      {{ label }}

      <input :id="id" v-model="model" />
import { withFormInput } from '@netsells/vue-form-data';

export default {
    mixins: [

    props: ['label'],

withFormInput can also take options to change the names of props and computed properties.

  • id - set the name of the prop used to key the field in formData
  • value - set the name of the prop used for the formData
    • If not set to value, you will need to use the sync modifier instead of v-model: :myprop.sync="formData"
  • formData - set the name of the formData computed property
  • model - set the name of the model computed property
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free