Formique is a powerful and flexible form-building library that simplifies the process of creating well styled (themed) dynamic and interactive forms in web applications. With Formique, you can easily define form schemas, handle form validation, and manage form submissions without having to fiddle with html and css. In this guide, we'll walk you through the steps to integrate Formique into a Vue.js project.
What is Formique?
Formique is a lightweight, framework-agnostic library designed to streamline the creation of forms in web applications. It provides a declarative way to define form structures, supports dynamic form fields, and includes built-in validation and theming capabilities. Whether you're building simple contact forms or complex multi-step forms, Formique makes the process intuitive and efficient.
Key Formique Features
- Declarative Syntax: Define forms using a simple and intuitive schema.
- Wide Range of Inputs: Supports text, email, number, password, date, time, file uploads, and more.
- Dynamic Form Generation: Generate forms dynamically based on your schema.
- Accessibility Compliance: Ensures all form elements meet WCAG and WAI-ARIA standards.
- Mobile Responsiveness: Forms are mobile-friendly out of the box.
- JavaScript-Driven Themes: Apply themes dynamically for a customizable UI.
- Nested Conditional Logic: Show or hide fields based on user input.
- Dynamic Dropdowns: Create dropdowns with options that change dynamically.
- Framework Agnostic: Works with Svelte, React, Vue, Angular, and Vanilla JS.
Step 1: Install a Vue.js Project
To get started, create a new Vue.js project using the Vue CLI. If you don't have the Vue CLI installed, you can install it globally by running:
npm install -g @vue/cli
Then, create a new Vue project:
npm create vue@latest myapp
Follow the prompts to set up your project. Once the project is created, navigate to the project directory:
cd myapp
Note: For the latest instructions, refer to the official Vue.js installation guide.
Step 2: Include Formique CSS
To ensure that your Formique forms are styled correctly, include the Formique CSS file in your project. Add the following CDN link inside the <head> tag of your index.html file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.6/formique.min.css" formique-style>
This will apply Formique's default styles to your forms.
Step 3: Install Formique
Next, install Formique in your Vue project using npm:
npm install formique
This will add Formique to your project's dependencies.
Step 4: Create a Form Component
Now, let's create a Vue component for your form. Inside the src/components directory, create a new file called RegForm.vue. This component will define the form schema, parameters, and settings.
Template Section
In the <template> section, define the structure of your form:
<template>
<div>
<h1>Registration Form</h1>
<div id="formique"></div>
</div>
</template>
The div with the ID formique is where Formique will render the form. You can customize this ID if needed.
Script Section
In the <script> section, import Formique and define the form schema, parameters, and settings:
<script>
import { ref, onMounted } from 'vue';
import Formique from 'formique';
export default {
setup() {
// Define the form schema
const formSchema = ref([
['text', 'name', 'Name', { required: true }, {}],
['text', 'surname', 'Surname', { required: true }],
['email', 'email', 'Email', { required: true }, {}],
['singleSelect', 'title', 'Title', { required: true }, { dependents: ['status'] }, [
{ value: 'mr', label: 'Mr' },
{ value: 'ms', label: 'Ms' },
{ value: 'mrs', label: 'Mrs' },
{ value: 'dr', label: 'Dr' },
{ value: 'prof', label: 'Prof' }
]],
['singleSelect', 'status', 'Status', { required: true }, { dependsOn: 'title', condition: (value) => value === 'prof' }, [
{ value: 'full professor', label: 'Full Professor' },
{ value: 'associate professor', label: 'Associate Professor' }
]],
['submit', 'submit', 'Submit', {}, { style: 'width: 100%;' }]
]);
// Define form parameters
const formParams = ref({
method: 'post',
id: 'myForm',
class: 'form',
style: 'width: 100%; font-size: 14px;'
});
// Define form settings
const formSettings = ref({
requiredFieldIndicator: true,
framework: 'vue',
placeholders: true,
theme: 'dark-blue',
submitOnPage: true
});
// Initialize Formique when the component is mounted
onMounted(() => {
new Formique(formSchema.value, formParams.value, formSettings.value);
});
return {};
}
};
</script>
Explanation:
-
Form Schema: The
formSchemaarray defines the fields in your form. Each field is represented as an array with properties like type, name, label, validation rules, and options. -
Form Parameters: The
formParamsobject defines attributes for the form element, such asmethod,id, andclass. -
Form Settings: The
formSettingsobject configures Formique's behavior, such as enabling placeholders, setting the theme, and specifying the framework.
Step 5: Import and Use Your Component
To display the form in your application, import and use the RegForm component in your App.vue file:
<template>
<div id="app">
<RegForm />
</div>
</template>
<script>
import RegForm from './components/RegForm.vue';
export default {
components: { RegForm }
};
</script>
Step 6: Run and View Your Form
Finally, start the development server to view your form in the browser:
npm run serve
Open your browser and navigate to http://localhost:8080. You should see your Formique form rendered and ready to use.
Additional Resources
For more advanced features and customization options, refer to the official Formique GitHub repository.
Contributing
Formique is an open-source project, and contributions are welcome! If you'd like to contribute, fork the repository and submit a pull request.
License
Formique is licensed under the MIT License.
By following this guide, you've successfully integrated Formique into your Vue.js project. Formique's simplicity and flexibility make it an excellent choice for building forms in modern web applications. Happy coding! 🚀
For more options, configurations, and details on how Formique works, please visit the following resources:
Top comments (0)