Example JSON schema client side resource scaffolding.

Create.vue

<template>
    <section class="resource-create">
        <h2>Create Resource</h2>

        <cobra-alerts/>

        <cobra-card title="Resource">
            <form @submit.prevent="onSubmit">
                <div class="form__groups">
                    <b-form-group>
                        <label>
                            Paper Airplane
                            <input
                                v-model="resource.paperAirplane"
                                type="text"
                                required="required"
                                class="form-control"
                            >
                        </label>
                    </b-form-group>
                    <b-form-group>
                        <label>
                            Tacos
                            <input
                                v-model="resource.tacos"
                                type="text"
                                required="required"
                                class="form-control"
                            >
                        </label>
                    </b-form-group>
                    <b-form-group>
                        <label>
                            Super Laser Blasters
                            <input
                                v-model="resource.superLaserBlasters"
                                type="text"
                                class="form-control"
                            >
                        </label>
                    </b-form-group>
                    <b-form-group>
                        <label>
                            DB Type
                            <input
                                v-model="resource.dbType"
                                type="text"
                                class="form-control"
                            >
                        </label>
                        <small class="form-text text-muted">
                            Like a database type for cereal!
                        </small>
                    </b-form-group>
                </div>

                <button
                    type="submit"
                    class="form__button form__button--primary"
                >
                    <cobra-process-indicator :busy="busy" size="1x">
                        Create
                    </cobra-process-indicator>
                </button>
            </form>
        </cobra-card>
    </section>
</template>

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({
        name: 'ResourceCreate',
        data(): Dict {
            return {
                busy: false,
                resource: {}
            };
        },
        methods: {
            async onSubmit(): Promise<any> {
                return Promise.resolve(true);
            }
        }
    });
</script>

<style lang="scss" scoped>
    @import '~bootstrap/scss/functions';
    @import '~bootstrap/scss/mixins';
    @import '~bootstrap/scss/variables';
    @import '~bootstrap/scss/utilities/spacing';

    .form__button {
        @extend .mb-3, .mt-5;
    }

    h2 {
        margin-bottom: 1.5rem;
    }
</style>

Edit.vue

<template>
    <section class="resource-edit">
        <cobra-alerts/>

        <h2>Edit Resource</h2>

        <cobra-card title="Resource">
            <form @submit.prevent="onSubmit">
                <div class="form__groups">
                    <b-form-group>
                        <label>
                            Paper Airplane
                            <input
                                v-model="resource.paperAirplane"
                                type="text"
                                required="required"
                                class="form-control"
                            >
                        </label>
                    </b-form-group>
                    <b-form-group>
                        <label>
                            Tacos
                            <input
                                v-model="resource.tacos"
                                type="text"
                                required="required"
                                class="form-control"
                            >
                        </label>
                    </b-form-group>
                    <b-form-group>
                        <label>
                            Super Laser Blasters
                            <input
                                v-model="resource.superLaserBlasters"
                                type="text"
                                class="form-control"
                            >
                        </label>
                    </b-form-group>
                    <b-form-group>
                        <label>
                            DB Type
                            <input
                                v-model="resource.dbType"
                                type="text"
                                class="form-control"
                            >
                        </label>
                        <small class="form-text text-muted">
                            Like a database type for cereal!
                        </small>
                    </b-form-group>
                </div>

                <button
                    type="submit"
                    class="form__button form__button--primary"
                >
                    <cobra-process-indicator :busy="busy" size="1x">
                        Update
                    </cobra-process-indicator>
                </button>
            </form>
        </cobra-card>
    </section>
</template>

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({
        name: 'ResourceEdit',
        data(): Dict {
            const { __id__ } = this.$route.params;

            return {
                busy: false,
                resource: { __id__ }
            };
        },
        async created(): Promise<any> {
            return Promise.resolve(true);
        },
        methods: {
            async onSubmit(): Promise<any> {
                return Promise.resolve(true);
            }
        }
    });
</script>

<style lang="scss" scoped>
    @import '~bootstrap/scss/functions';
    @import '~bootstrap/scss/mixins';
    @import '~bootstrap/scss/variables';
    @import '~bootstrap/scss/utilities/spacing';

    .form__button {
        @extend .mb-3, .mt-5;
    }

    h2 {
        margin-bottom: 1.5rem;
    }
</style>

List.vue

<template>
    <section class="resource-list">
        <cobra-alerts/>

        <h2>Resources</h2>

        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Paper Airplane</th>
                    <th scope="col">Tacos</th>
                    <th scope="col">Super Laser Blasters</th>
                    <th scope="col">DB Type</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="resource in resources" :key="resource.__id__">
                    <th scope="row" class="paper-airplane">
                        {{ resource.paperAirplane }}
                    </th>
                    <td class="tacos">{{ resource.tacos }}</td>
                    <td class="super-laser-blasters">
                        {{ resource.superLaserBlasters }}
                    </td>
                    <td class="db-type">{{ resource.dbType }}</td>
                </tr>
            </tbody>
        </table>
    </section>
</template>

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({
        name: 'ResourceList',
        data(): Dict {
            return {
                resources: []
            };
        }
    });
</script>

<style lang="scss" scoped>
    @import '~bootstrap/scss/functions';
    @import '~bootstrap/scss/mixins';
    @import '~bootstrap/scss/variables';
    @import '~bootstrap/scss/tables';
    @import '~bootstrap/scss/utilities/spacing';

    h2 {
        margin-bottom: 1.5rem;
    }
</style>

schema.json

{
    "$id": "https://raw.github.nwie.net/bennj6/resources/master/schema.json",
    "$schema": "http://json-schema.org/draft-07/schema#",
    "title": "Resource",
    "description": "A contrived resource schema.",
    "type": "object",
    "properties": {
        "paper_airplane": {
            "type": "string"
        },
        "tacos": {
            "type": "integer"
        },
        "super_laser_blasters": {
            "type": "string"
        },
        "db_type": {
            "type": "string",
            "title": "DB Type",
            "description": "Like a database type for cereal!"
        }
    },
    "required": [
        "paper_airplane",
        "tacos"
    ]
}