Support for Vuetify
NatalieTanML opened this issue · comments
Hello, I was wondering if there would be a Vuetify template support in the near future. Thank you
@NatalieTanML it already work with Vuetify already, all you need is to add the necessary files to render the formio forms in your vue app
@nyirongojr But how would I get it to use the Vuetify components, such as v-input? I mostly want to implement formio's form builder with Vuetify components. Currently there is only support for bootstrap, unless there is a way to easily modify all the inputs?
@NatalieTanML, as you may be aware that vue uses components as the building structure so basically what you would do is to just embed the formio component inside your exist vuetify components. The embedded component will not affect your vuetify code. Just make sure that you add the necessary bootstrap files that will enable your formio components to display.
I will try to write something up and push on my repo, i hope it should be able to explain better
It sounds like what you are looking to do is similar to what we did with Angular Material @ https://github.com/formio/angular-material-formio.
Here we are still using the "core" renderer but using it as a controller for the output components provided by the framework. As an example, here is what the TextField looks like.
Here we used the frameworks implementations of those components. It may be possible to fork this repo and create the Vuetify renderer using the similar pattern as seen in this library.
@NatalieTanML, checkout from here how to use Vuetify and vue-formio https://github.com/nyirongojr/vuetify-formio
@nyirongojr Thank you for the sample repo, I was just wondering if vue-formio works without Typescript and also with bootstrap 4. I can run the project you have provided but when I try to add it to my existing repository bootstrap seems to break
@NatalieTanML, i have not had any luck to get vue-formio without typescript. I struggled at first and finally i just decided to convert my project to the typescript standard and then it worked without problems. Maybe the formio team will in future provide us with the ability to make it work without typescript.
Bootstrap 4 is the standard stylesheet for current formio. Typescript is just Javascript in the end. Formio + Vue + Javascript will work just fine (that's what I'm currently using).
We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!