Vue.js plugin that covers the Buefy form fields for Formly.

Last update: Nov 16, 2020

vue-formly-buefy

⚠️ The plugin is no longer being developed! Unfortunately I enforced to announce that the new Buefy features will not be added to this plugin because of its design constraints and code redundancy. Please consider to use VeeValidate instead (it's clear and easy solution for the problem). Thanks for everyone who was involved to the project especially our contributors!

Vue.js plugin that covers the Buefy form fields for Formly. It lets you to validate input data in your forms. The plugin combine simplicity of the Formly form builder, lightness of the Buefy form fields and impeccability of the Bulma design.

Brief description of the most meaningful features:

  • Completely covered. All Buefy form fields are covered (Autocomplete, Checkbox, Datepicker, Input, Radio, Select, Switch, Taginput, Timepicker and Upload).
  • Extensible. Wrap the vast majority of form elements to increase its functionality (data validation, field controls, grouping and many more are available).
  • Straightforward. Simple and standardized API.

Requirements

The plugin was developed and tested for the following packages:

Installation

First of all install necessary dependencies (see above) and vue-formly-buefy itself:

$ npm i vue-formly-buefy

After, integrate the plugin with your project:

import Buefy from 'buefy'
import Vue from 'vue'
import VueFormly from 'vue-formly'
import VueFormlyBuefy from 'vue-formly-buefy'

Vue.use(Buefy)
Vue.use(VueFormly)
Vue.use(VueFormlyBuefy) // Plug in directly after Vue Formly

new Vue({
  el: '#app'
})

That's all :D

Getting started

Look at the following example of the wrapped input with a span control:

">
<template>
  <formly-form :form="form" :model="model" :fields="fields">formly-form>
template>

<script>
  // Import the span control from the library
  import { Span } from 'vue-formly-buefy/dist/controls'

  export default {
    data () {
      return {
        form: {},
        model: {
          email: ''
        },
        fields: [
          {
            key: 'email',
            type: 'input-with-field',  // Use a wrapper to extend functionality
            templateOptions: {
              properties: {            // Keep configuration of the element              
                'placeholder': 'Your email'
              },
              wrapper: {               // Keep configuration of the wrapper
                controls: [
                  {
                    type: Span,        // Use the Span component as a control
                    position: 'after',
                    options: {         // Keep configuration of the control
                      label: '@gmail.com',
                      properties: {
                        'class': 'button is-static'
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
script>

The code above will generate the following Buefy markup (then Vue.js will have compiled this markup to HTML as expected):

@gmail.com
">
<b-field>
    <b-input placeholder="Your email">b-input>
    <div class="control">
        <span class="button is-static">@gmail.comspan>
    div>
b-field>

Search for more examples here.

Documentation

Check wiki section of this repo for detailed API explanation.

Copyright and License

Copyright (c) 2017-2019 Yurii Rabeshko. Code released under the MIT license.

GitHub

https://github.com/yarbshk/vue-formly-buefy
Comments
  • 1. Add initialMessage to wrapper properties

    @yarbshk thank you for creating vue-formly-buefy.

    This PR adds initialMessage to the wrapper properties. I need this to be able to set a message (with some helper text) before the form is touched. If initialMessage is undefined, the behaviour is the same as before.

    Reviewed by paw-leitwert at 2019-05-20 14:53
  • 2. Bug when using select field with number values

    Hi,

    there is a bug when using following config:

    {
      "model": {
        "name": null
      },
      "tabs": [
        {
          "fields": [
            {
              "type": "selection",
              "key": "name",
              "templateOptions": {
                "options": [
                  {
                    "value": 0,
                    "text": "Jesse"
                  },
                  {
                    "value": 3,
                    "text": "John"
                  },
                  {
                    "value": 23,
                    "text": "Test"
                  }
                ]
              }
            }
          ]
        }
      ]
    }
    

    The issue is when you try to select the first option ("Jesse"). Instead of changing the value of name to 0 it changes to null. After that it is possible to select "Jesse" again and the value changes correctly to 0.

    I know that you have written in the docs that the type of "value" should be a String, but Buefy can handle numbers as well, so there seems to be a bug here. From a quick look at the source I'm not sure where this is coming from. Do you have any idea?

    Best, Severin

    Reviewed by severila at 2019-01-22 17:10
  • 3. Last field margin, label border and validator

    Hi! I created a toy form based on input example ( https://yarbshk.github.io/vue-formly-buefy-examples/#input ). Code is below. And I have unexpected behavior :

    • email field has margin-bottom, while test field don't have margin-bottom. That's why registration bottom don't have any margin. In the example all the fields have margin-bottom.
    • fieldset has a border, but in the example there's no border
    • email validator don't work as in example

    Can you please help with it

    Thanks in advance

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    </head>
    <body>
        <div id="myVue">
            <h1>my sign in form</h1>
            <sign-in-form></sign-in-form>
        </div>
    
        <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="https://unpkg.com/buefy"></script>
        <script src="vue-formly.min.js"></script>
        <script src="vue-formly-buefy.min.js"></script>
        <script src="vue-formly-buefy-controls.min.js"></script>
    
        <script>
            Vue.use(Buefy.default, {defaultIconPack: 'fas'});
            Vue.use(VueFormly);
            Vue.use(VueFormlyBuefy);
    
    
        Vue.component('sign-in-form', {
            data: function () {
                return {
                    action: '/sign/in',
                    method: 'post',
                    form: {},
                    model: {
                        email: '',
                        test: ''
                    },
                    fields: [
                        {
                            "key": "email",
                            "type": "input-with-field",
                            "required": true,
                            "templateOptions": {
                                "properties": {
                                    "type": "email",
                                    "required": true,
                                    "placeholder": '[email protected]',
                                    "icon": "envelope",
                                },
                            },
                            "validators": {
                                "format": {
                                    "message": "The email address doesn't match the pattern"
                                }
                            }
                        },
                        {
                            "key": "test",
                            "type": "input-with-field",
                            "required": true,
                            "templateOptions": {
                                "properties": {
                                    "type": "email",
                                    "required": true,
                                    "placeholder": '[email protected]',
                                    "icon": "envelope",
                                },
                            },
                            "validators": {
                                "format": {
                                    "message": "The email address doesn't match the pattern"
                                }
                            }
                        },
                    ]
                }
            },
            template: `
                <form @submit.prevent="handleSubmission" >
                    <formly-form :form="form" :model="model" :fields="fields"></formly-form>
                    <b-field>
                        <p class="control">
                            <button class="button is-link">Register</button>
                        </p>
                    </b-field>
                </form>
            `,
            methods: {
                handleSubmission: function () {
                    alert("test")
                }
            },
    
        })
    
    
        new Vue({
            el: '#myVue',
        });
    
        </script>
    </body>
    </html>
    
    Reviewed by evyasonov at 2018-08-07 08:27
  • 4. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    Hi

    I'm trying to run example code and I've got an error: [Vue warn]: Unknown custom element: <formly_input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    Can you please help

    I use 1.0.2 version of vue-formly-buefy and I run all the code in index.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    
        <link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.min.css">
        <script src="https://unpkg.com/buefy"></script>
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
    
        <script src="vue-formly.min.js"></script>
        <script src="vue-formly-buefy.min.js"></script>
        <script src="vue-formly-buefy-controls.js"></script> <!-- I renamed controls.js from vue-formly-buefy -->
    </head>
    <body>
    
    <div id="myVue">
        <template>
            <formly-form :form="form" :model="model" :fields="fields"></formly-form>
        </template>
    </div>
    
    <script>
        Vue.use(Buefy.default);
        Vue.use(VueFormly);
        Vue.use(VueFormlyBuefy);
    
        new Vue({
            el: '#myVue',
            data: {
                form: {},
                model: {
                    email: ''
                },
                fields: [
                    {
                        key: 'email',
                        type: 'input',  // Use a wrapper to extend functionality
                        templateOptions: {
                            properties: {            // Keep configuration of the element
                                'placeholder': 'Your email'
                            },
                            wrapper: {               // Keep configuration of the wrapper
                                controls: [
                                    {
                                        type: '',        // Use the Span component as a control
                                        position: 'after',
                                        options: {         // Keep configuration of the control
                                            label: '@gmail.com',
                                            properties: {
                                                'class': 'button is-static'
                                            }
                                        }
                                    }
                                ]
                            }
                        }
                    }
                ]
            }
        });
    </script>
    
    
    </body>
    </html>
    
    

    Thanks in advance

    Reviewed by evyasonov at 2018-08-06 10:05
  • 5. Title (label) on radios/checkboxes

    Have a title on radios and checkboxes What are you answering Nop/Yep or Default to?

    By adding <label class="label">Choose one</label> before the div.field elements then it looks like this

    Screenshot from 2019-07-25 14-30-47

    Is it just a missing documentation feature (by using wrappers etc.) or is it not possible?

    Reviewed by lsv at 2019-07-25 12:34
Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator ✅ Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Jun 5, 2021
Simple Vuex module to handle form fields and validations
Simple Vuex module to handle form fields and validations

vuex-module-validatable-state Simple Vuex module to handle form fields and validations. You can build a view model for your form, which runs valdation

Mar 31, 2022
Quickly manage lists with multiple fields in Kirby 3
Quickly manage lists with multiple fields in Kirby 3

Kirby Multilist This plugin helps dealing with long lists with multiple fields. Overview This plugin is completely free and published under the MIT li

May 17, 2022
Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

May 7, 2019
RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Feb 3, 2022
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

May 29, 2021
✅ Form Validation for Vue.js
✅  Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Jul 4, 2022
Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jul 30, 2020
Form validation for Vue.js 2.2+

vue-form Form validation for Vue.js 2.2+ Install Available through npm as vue-form. import VueForm from 'vue-form'; // or var VueForm = require('vue-f

Apr 18, 2022
Vue form components with server-side validation in mind
Vue form components with server-side validation in mind

Vue form components with server side validation in mind About FormVuelar is a set of predefined vue form components which are designed to automaticall

Jun 12, 2022
Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. ?? Written in TypeScript ?? Dynamic Form support ?? Light wei

May 11, 2022
Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Jan 14, 2022
A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Apr 13, 2022
Simple Vue.js form validation library

Simple Vue.js form validation library

Mar 1, 2020
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

Jun 25, 2022
Vue Composition API for validating form.

Vue Composition API for validating form.

Jun 27, 2022
Flexible Vue.js form validation directive

Vue form validator A Vue.js directive for form validation Installation npm instal vue-smart-validator --save Getting Started In your scirpt entry poi

Nov 20, 2018
Form input errors and descriptions for Vue 2.

Form input errors and descriptions for Vue 2.

Feb 15, 2017
Simple and easy Vue directive for form validation.
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Feb 15, 2021