Dynamic Components

form.vue

<template>
  <form>
    <Component v-for="({ type }, index) in schema" :key="index" :is="'v' + type" />
  </form>
</template>

<script>
export default {
  components: {
    vInput: () => import('@/components/form/Input' /* webpackChunkName: "components/form/Input" */),
    vTextArea: () => import('@/components/form/TextArea' /* webpackChunkName: "components/form/TextArea" */),
    // Not used, not loooooaded
    vCheckBox: () => import('@/components/form/TextArea' /* webpackChunkName: "components/form/CheckBox" */)
    // etc
  },

  data: () => ({
    // Predefined or created/edited in CMS for example
    schema: [
      {
        type: 'Input',
        label: 'First name'
      },
      {
        type: 'TextArea',
        label: 'Message'
      }
    ]
  })
}
</script>