buefyvue-formulate

How do you Integrate Buefy into Vue Formulate controls?

I am trying to get vue formulate controls to be syled using Buefy. What is the best way to go about this?

I imagine it's probably with using vue-formulate class keys.

But I am not sure what corresponding Buefy classes to match them to. (Or perhaps there is a different way to go about it?)

Solution

  • Buefy is styled with Bulma — so you have 4 options:

    1. Use class keys to add Bulma styles to your <FormulateInput>s.

    2. Use custom inputs to wrap Buefy components. This will take some work since they don't share common markup. For example, Buefy doesn't really have "error messages", it has "messages" which can be marked with the Bulma class "is-danger".

    3. Ditch Buefy

    4. Ditch Vue Formulate

    (Opinion) – If you like Bulma's styles, then I would go with option #1. You can always use Buefy for your site but not for your forms and instead just configure Vue Formulate's class keys with Bulma's classes (Bulma classes are included automatically if youre using Buefy)

    Full disclosure: I'm the creator of Vue Formulate.