@cknow/vfg-theme-bootstrap

Vue Form Generator theme Bootstrap

Usage no npm install needed!

<script type="module">
  import cknowVfgThemeBootstrap from 'https://cdn.skypack.dev/@cknow/vfg-theme-bootstrap';
</script>

README

Vue Form Generator theme Bootstrap

NPM Version Downloads MIT License

Build Status Build status Coverage Status

Code Climate Test Coverage Issue Count

Dependencies Status devDependencies Status peerDependencies Status

Semantic Release Average time to resolve an issue Percentage of issues still open Gitter

Install

npm install --save-dev @cknow/vfg-theme-bootstrap

Usage

Note: Do not forget to add the style sheets of theme to the header of the page.

import Vfg from '@cknow/vfg';
import VfgThemeBootstrap from '@cknow/vfg-theme-bootstrap';

Vue.use(Vfg, {
    theme: 'boostrap'
});
Vue.use(VfgThemeBootstrap);

Component:

<template>
    <vfg :model="model" :schema="schema"></vfg>
</template>

<script>
    export default {
        data() {
            return {
                model: {
                    name: 'Foo Bar',
                    email: 'foo@bar.com',
                },

                schema: [
                    {
                        // input text is default
                        label: 'Name',
                        model: 'name'
                    },
                    {
                        inputType: 'email',
                        label: 'E-mail',
                        model: 'email'
                    }
                ]
            }
        }
    }
</script>

Result:

<div>
    <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" type="text" id="name" value="Foo Bar">
    </div>
    <div class="form-group">
        <label for="email">E-mail:</label>
        <input class="form-control" type="email" id="email" value="foo@bar.com">
    </div>
</div>