Vue Formulate is a powerful form builder for Vue.js applications. It simplifies the process of creating forms by providing a set of intuitive and flexible components. In this tutorial, you’ll learn how to set up and use Vue Formulate in your Vue.js projects.

Step 1: Install Vue Formulate

You can install Vue Formulate via npm or yarn:

npm install @braid/vue-formulate
# or
yarn add @braid/vue-formulate

Step 2: Import and Register Vue Formulate

You need to import and register Vue Formulate as a global component in your Vue.js application.

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

Vue.use(VueFormulate)

Step 3: Basic Usage

Vue Formulate provides a set of components that correspond to HTML form elements, such as text inputs, checkboxes, radios, and more. You can use these components in your Vue components to build forms easily.

<template>
  <FormulateInput
    type="text"
    name="username"
    label="Username"
    v-model="formData.username"
    validation="required"
  />
  <FormulateInput
    type="password"
    name="password"
    label="Password"
    v-model="formData.password"
    validation="required"
  />
  <button @click="submitForm">Submit</button>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm() {
      // handle form submission
      console.log('Form data:', this.formData);
    }
  }
}
</script>

Step 4: Validation

Vue Formulate supports built-in and custom validation rules. You can specify validation rules directly in the component’s validation prop.

<FormulateInput
  type="email"
  name="email"
  label="Email"
  v-model="formData.email"
  validation="required|email"
/>

Step 5: Custom Components

You can create custom input components to extend Vue Formulate’s functionality.

import { FormulateInput } from '@braid/vue-formulate'

export default {
  extends: FormulateInput,
  props: {
    // Add your custom props here
  },
  // Add your custom methods and logic here
}

Step 6: Localization

Vue Formulate supports localization out of the box. You can set the locale globally or per instance.

Vue.use(VueFormulate, {
  locale: 'fr'
})

Step 7: Styling

Vue Formulate allows you to customize the appearance of form elements using CSS. You can style the components directly or use CSS classes.

.vue-formulate-input {
  border: 1px solid #ccc;
  padding: 8px;
}

Conclusion

Vue Formulate simplifies form building in Vue.js applications by providing a set of intuitive and customizable components. This tutorial covered the basic setup and usage of Vue Formulate, including creating forms, adding validation, and customizing components. For more advanced usage and detailed documentation, refer to the official Vue Formulate documentation.