vue-formulate | ⚡️ The easiest way to build forms with Vue | Form library

This example shows a very small form made with vue-formulate:

https://codesandbox.io/s/vue-formulate-reseting-form-does-not-initiate-validation-message-again-yxruq

The input field takes a string of at least 4 of characters. Upon hitting submit, the form is reset via

In VueFormulate "hasvalue" is added to an input element as soon soon as a radio or checkbox is clicked, if I am not mistaken.

I would like to know now to remove it again "manually".

In this form: https://codesandbox.io/s/vue-formulate-reproduction-template-forked-swy2f?file=/src/components/Reproduction.vue

I have to input elements: the first one consists of 3 radio buttons, the second of 2 checkboxes. When clicking on the 3rd radio button the second form with the checkboxes becomes visible (in this case: the opacity – initially set to 0.35 – returns to 1).

As soon as the second form becomes visible, the "required" attribute changes, which makes the "require" validation message appear. It is removed again, when either another radio box is clicked or a checkbox is activated.

So far so good.

The problem appears, when following these steps:

1. Click the 3rd radio button
2. Chick a checkbox
3. Click another radio button (either "one" or "two")

The checkbox becomes invisible again, but also the checkboxes are unchecked again – this is the important part.

1. Click the 3rd radio button again

Now the checkboxes become visible again, but the required message is not shown.

This is due to the fact that the input element still has a "hasvalue" attribute living on it, which I do not know how to remove in step 3.

Currently I have this function to unset the checkboxes:

I cannot find an answer to this question anywhere.

I went through the official Nuxt documentation and through the existing Stack Overflow and Github issue discussions.

Implementation of the AuthModule:

I've set the mode to static and ran npm run generate. The site is being served from the /dist/ directory, but where is the markup when I view the source? view-source:https://eosnomad.com/

I don't think I'm getting the SEO benefits here since Google doesn't see HTML. I only see the source code when looking in dev tools. Am I doing this wrong?

Here is my nuxt configuration:

I am getting started with unit testing components in Vue using Jest and Vue-Test-Utils. I am using Vue Formulate to manage form fields, which works as expected in the browser. I am importing the plugin in a 'local Vue' testing instance as per the documentation.

However, the following assertion fails as text not found in testing, whilst it works in the browser. What am I doing wrong? I have tried a variety of selectors including wrapper.text() without success

Component:

I am trying to set an input value in vue-formulate which is a computed value. The value gets computed (check console) but it is not set as input value.

Reproduction code - https://codesandbox.io/s/vue-formulate-reproduction-template-forked-j9jtc?file=/src/App.vue

I've been using the Vue Formulate library (which is awesome).

I need the user to only be able to pick a date from today (included) onwards.

I am using the "after" default for validation, but today (the current date) is not valid. In other words the validation kicks in when choosing todays date, and the form cannot be submitted.

What is the best way to get around this?

https://codesandbox.io/s/vue-formulate-reproduction-template-forked-kmpgq?fontsize=14&hidenavigation=1&theme=dark

I am a bit new to Vue and it keeps getting harder for me to crack. I'm using Vue 3 I want to use Vue-Formulate to create a registration form on my vue app. Here's how far I've come following Vue-Formulate official documentation:

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?)