diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index a30836f82f..312d13942e 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -140,6 +140,7 @@ product:
 suffix:
   percent: "%"
   milliCpus: mili CPUs
+  cores: Cores
   cpus: CPUs
   ib: iB
   mib: MiB
@@ -1020,6 +1021,83 @@ cluster:
           =1 {# vCPU}
           other {# vCPUs}
         }, {disk} GB Disk ({value})
+    vsphere:
+      hostOptions:
+        any: Any
+      vAppOptions:
+        label: vApp Options
+        description: Choose OVF environment properties
+        disable: Do not use vApp
+        auto: Use vApp to configure networks with network protocol profiles
+        manual: Provide a custom vApp config
+        restoreType: Restore Type
+        transport: 
+          label: OVF environment transport
+          tooltip: com.vmware.guestInfo or iso
+          placeholder: e.g. com.vmware.guestInfo
+        protocol:
+          label: vApp IP protocol
+          tooltip: IPv4 or IPv6
+          placeholder: e.g. IPv4
+        allocation:
+          label: vApp IP allocation policy
+          tooltip: dhcp, fixed, transient or fixedAllocated
+          placeholder: e.g. fixedAllocated
+        properties:
+          label: vApp properties
+          add: Add Property
+          keyPlaceholder: e.g. guestinfo.interface.0.ip.0.address
+          valuePlaceholder: e.g. ip:VM Network, expression or string
+      networks:
+        label: Networks
+        add: Add Network
+      guestinfo:
+        label: Configuration Parameters used for guestinfo
+        add: Add Parameter
+        keyPlaceholder: e.g. guestinfo.hostname
+        valuePlaceholder: e.g. myrancherhost
+      creationMethods:
+        template: 'Deploy from template: Data Center'
+        library: 'Deploy from template: Content Library'
+        vm: 'Clone an existing virtual machine'
+        legacy: 'Install from boot2docker ISO (Legacy)'
+      scheduling:
+        label: Scheduling
+        description: Choose what hypervisor the virtual machine will be scheduled to
+        dataCenter: Data Center
+        resourcePool: Resource Pool
+        dataStore: Data Store
+        folder: Folder
+        host: 
+          label: Host
+          note: Specific host to create VM on (leave blank for standalone ESXi or for cluster with DRS)
+      instanceOptions:
+        label: Instance Options
+        description: Choose the size and OS of the virtual machine
+        cpus: CPUs
+        memory: Memory
+        disk: Disk
+        creationMethod: Creation method
+        template: Template
+        contentLibrary: Content library
+        libraryTemplate: Library template
+        virtualMachine: Virtual machine
+        osIsoUrl: 
+          label: OS ISO URL
+          placeholder: 'Default: Latest rancheros-vmware image'
+        cloudInit:
+          label: Cloud Init
+          placeholder: e.g. http://my_host/cloud-config.yml
+          note: Cloud-init file or url to set in the guestinfo
+        cloudConfigYaml: Cloud Config YAML
+      tags:
+        label: Tags
+        description: Tags allow you to attach metadata to objects in the vSphere inventory to make it easier to sort and search for these objects.
+        addTag: Add Tag
+      customAttributes:
+        label: Custom attributes (legacy)
+        description: Custom attributes allow you to attach metadata to objects in the vSphere inventory to make it easier to sort and search for these objects.
+        add: Add custom attribute
 
   machinePool:
     name:
diff --git a/cloud-credential/vmwarevsphere.vue b/cloud-credential/vmwarevsphere.vue
index 4bf8eec85f..e953e74e74 100644
--- a/cloud-credential/vmwarevsphere.vue
+++ b/cloud-credential/vmwarevsphere.vue
@@ -6,6 +6,15 @@ export default {
   components: { LabeledInput },
   mixins:     [CreateEditView],
 
+  watch: {
+    value: {
+      deep: true,
+      handler(neu) {
+        this.$emit('validationChanged', !!neu);
+      }
+    }
+  },
+
   methods: {
     test() {
       // Vsphere doesn't have a test function. The credential has to be created before we can make calls.
diff --git a/components/form/ArrayList.vue b/components/form/ArrayList.vue
index 6a36dde5db..473a796ca0 100644
--- a/components/form/ArrayList.vue
+++ b/components/form/ArrayList.vue
@@ -76,6 +76,11 @@ export default {
       type:    [String, Number, Object, Array],
       default: ''
     },
+
+    loading: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -280,8 +285,8 @@ export default {
     </div>
     <div v-if="showAdd && !isView" class="footer">
       <slot v-if="showAdd" name="add">
-        <button type="button" class="btn role-tertiary add" @click="add()">
-          {{ addLabel }}
+        <button type="button" class="btn role-tertiary add" :disabled="loading" @click="add()">
+          <i v-if="loading" class="mr-5 icon icon-spinner icon-spin icon-lg" />  {{ addLabel }}
         </button>
       </slot>
     </div>
diff --git a/components/form/ArrayListSelect.vue b/components/form/ArrayListSelect.vue
new file mode 100644
index 0000000000..4c1e695c11
--- /dev/null
+++ b/components/form/ArrayListSelect.vue
@@ -0,0 +1,77 @@
+<script>
+import ArrayList from '@/components/form/ArrayList';
+import Select from '@/components/form/Select';
+
+export default {
+  components: { ArrayList, Select },
+  props:      {
+    value: {
+      type:     Array,
+      required: true
+    },
+    options: {
+      default:   null,
+      type:      Array
+    },
+    selectProps: {
+      type:    Object,
+      default: null,
+    },
+    arrayListProps: {
+      type:    Object,
+      default: null
+    },
+    loading: {
+      type:    Boolean,
+      default: false
+    }
+  },
+  computed:   {
+    filteredOptions() {
+      return this.options
+        .filter(option => !this.value.includes(option.value));
+    },
+
+    addAllowed() {
+      return this.filteredOptions.length > 0;
+    }
+  },
+
+  methods: {
+    updateRow(index, value) {
+      this.value.splice(index, 1, value);
+      this.$emit(value);
+    },
+    calculateOptions(value) {
+      const valueOption = this.options.find(o => o.value === value);
+
+      if (valueOption) {
+        return [valueOption, ...this.filteredOptions];
+      }
+
+      return this.filteredOptions;
+    }
+  }
+};
+</script>
+
+<template>
+  <ArrayList
+    v-bind="arrayListProps"
+    :value="value"
+    class="array-list-select"
+    :add-allowed="addAllowed || loading"
+    :loading="loading"
+    @input="$emit('input', $event)"
+  >
+    <template v-slot:columns="scope">
+      <Select :value="scope.row.value" v-bind="selectProps" :options="calculateOptions(scope.row.value)" @input="updateRow(scope.i, $event)" />
+    </template>
+  </ArrayList>
+</template>
+
+<style lang="scss" scoped>
+::v-deep .unlabeled-select {
+    height: 61px;
+}
+</style>
diff --git a/components/form/KeyValue.vue b/components/form/KeyValue.vue
index edef29dd71..90a22d1217 100644
--- a/components/form/KeyValue.vue
+++ b/components/form/KeyValue.vue
@@ -73,6 +73,11 @@ export default {
       default: true,
     },
 
+    keyOptionUnique: {
+      type:    Boolean,
+      default: false,
+    },
+
     keyPlaceholder: {
       type: String,
       default() {
@@ -211,6 +216,10 @@ export default {
       type:    Array,
       default: () => [': ', '='],
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -279,6 +288,19 @@ export default {
     containerStyle() {
       return `grid-template-columns: repeat(${ 2 + this.extraColumns.length }, 1fr)${ this.removeAllowed ? ' 50px' : '' };`;
     },
+
+    usedKeyOptions() {
+      return this.rows.map(row => row[this.keyName]);
+    },
+
+    filteredKeyOptions() {
+      if (this.keyOptionUnique) {
+        return this.keyOptions
+          .filter(option => !this.usedKeyOptions.includes(option.value));
+      }
+
+      return this.keyOptions;
+    }
   },
 
   created() {
@@ -418,6 +440,16 @@ export default {
       this.queueUpdate();
     },
 
+    calculateOptions(value) {
+      const valueOption = this.keyOptions.find(o => o.value === value);
+
+      if (valueOption) {
+        return [valueOption, ...this.filteredKeyOptions];
+      }
+
+      return this.filteredKeyOptions;
+    },
+
     get,
 
   }
@@ -476,7 +508,8 @@ export default {
               :searchable="true"
               :clearable="false"
               :taggable="keyTaggable"
-              :options="keyOptions"
+              :options="calculateOptions(row[keyName])"
+              @input="queueUpdate"
             />
             <input
               v-else
@@ -545,8 +578,8 @@ export default {
 
     <div v-if="(addAllowed || readAllowed) && !isView" class="footer">
       <slot name="add" :add="add">
-        <button v-if="addAllowed" type="button" class="btn role-tertiary add" @click="add()">
-          {{ addLabel }}
+        <button v-if="addAllowed" type="button" class="btn role-tertiary add" :disabled="loading || (keyOptions && filteredKeyOptions.length === 0)" @click="add()">
+          <i v-if="loading" class="mr-5 icon icon-spinner icon-spin icon-lg" /> {{ addLabel }}
         </button>
         <FileSelector
           v-if="readAllowed"
diff --git a/components/form/LabeledSelect.vue b/components/form/LabeledSelect.vue
index 4f9d7bff74..103941d8ca 100644
--- a/components/form/LabeledSelect.vue
+++ b/components/form/LabeledSelect.vue
@@ -25,6 +25,10 @@ export default {
       default: true,
       type:    Boolean
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
     localizedLabel: {
       default: false,
       type:    Boolean
@@ -62,7 +66,7 @@ export default {
     selectable: {
       default: (opt) => {
         if ( opt ) {
-          if ( opt.disabled || opt.kind === 'group' || opt.kind === 'divider' ) {
+          if ( opt.disabled || opt.kind === 'group' || opt.kind === 'divider' || opt.loading ) {
             return false;
           }
         }
@@ -240,7 +244,7 @@ export default {
       :append-to-body="appendToBody"
       :calculate-position="withPopper"
       :class="{ 'no-label': !(label || '').length }"
-      :disabled="isView || disabled"
+      :disabled="isView || disabled || loading"
       :get-option-key="
         (opt) => (optionKey ? get(opt, optionKey) : getOptionLabel(opt))
       "
@@ -252,7 +256,7 @@ export default {
       :reduce="(x) => reduce(x)"
       :searchable="isSearchable"
       :selectable="selectable"
-      :value="value != null ? value : ''"
+      :value="value != null && !loading ? value : ''"
       v-on="$listeners"
       @search:blur="onBlur"
       @search:focus="onFocus"
@@ -274,6 +278,7 @@ export default {
         <slot :name="slot" v-bind="scope" />
       </template>
     </v-select>
+    <i v-if="loading" class="icon icon-spinner icon-spin icon-lg" />
     <LabeledTooltip
       v-if="tooltip && !focused"
       :hover="hoverTooltip"
@@ -285,6 +290,14 @@ export default {
 
 <style lang='scss' scoped>
 .labeled-select {
+  position: relative;
+
+  .icon-spinner {
+    position: absolute;
+    left: calc(50% - .5em);
+    top: calc(50% - .5em);
+  }
+
   .labeled-container {
     padding: $input-padding-sm 0 1px $input-padding-sm;
 
diff --git a/machine-config/vmwarevsphere.vue b/machine-config/vmwarevsphere.vue
new file mode 100644
index 0000000000..0b90fe421e
--- /dev/null
+++ b/machine-config/vmwarevsphere.vue
@@ -0,0 +1,928 @@
+<script>
+import Loading from '@/components/Loading';
+import CreateEditView from '@/mixins/create-edit-view';
+import LabeledSelect from '@/components/form/LabeledSelect';
+// import Checkbox from '@/components/form/Checkbox';
+import { SECRET } from '@/config/types';
+import { stringify } from '@/utils/error';
+import Banner from '@/components/Banner';
+import UnitInput from '@/components/form/UnitInput';
+import Card from '@/components/Card';
+import RadioGroup from '@/components/form/RadioGroup';
+import KeyValue from '@/components/form/KeyValue';
+import LabeledInput from '@/components/form/LabeledInput';
+import ArrayListSelect from '@/components/form/ArrayListSelect';
+import YamlEditor from '@/components/YamlEditor';
+import { get, set } from '@/utils/object';
+import { integerString, keyValueStrings } from '@/utils/computed';
+import { _CREATE } from '@/config/query-params';
+
+const SENTINEL = '__SENTINEL__';
+const VAPP_MODE = {
+  DISABLED: 'disabled',
+  AUTO:     'auto',
+  MANUAL:   'manual'
+};
+const CREATION_METHOD = {
+  TEMPLATE: 'template',
+  LIBRARY:  'library',
+  VM:       'vm',
+  LEGACY:   'legacy'
+};
+const BOOT_2_DOCKER_URL = 'https://releases.rancher.com/os/latest/rancheros-vmware.iso';
+const INITIAL_VAPP_OPTIONS = {
+  vappIpprotocol:         '',
+  vappIpallocationpolicy: '',
+  vappTransport:          '',
+  vappProperty:           []
+};
+const DEFAULT_CFGPARAM = ['disk.enableUUID=TRUE'];
+
+const getDefaultVappOptions = (networks) => {
+  return {
+    vappIpprotocol:         'IPv4',
+    vappIpallocationpolicy: 'fixedAllocated',
+    vappTransport:          'com.vmware.guestInfo',
+    vappProperty:           networksToVappProperties(networks)
+  };
+};
+
+const stringsToParams = (params, str) => {
+  const index = str.indexOf('=');
+
+  if ( index > -1 ) {
+    params.push({
+      key:   str.slice(0, index),
+      value: str.slice(index + 1),
+    });
+  }
+
+  return params;
+};
+
+const networksToVappProperties = (networks) => {
+  if (networks.length === 0) {
+    return [];
+  }
+
+  return networks.reduce(networkToVappProperties, [
+    `guestinfo.dns.servers=\${dns:${ networks[0] }}`,
+    `guestinfo.dns.domains=\${searchPath:${ networks[0] }}`
+  ]);
+};
+
+const networkToVappProperties = (props, network, i) => {
+  const n = i.toString();
+
+  props.push(
+    `guestinfo.interface.${ n }.ip.0.address=ip:${ network }`,
+    `guestinfo.interface.${ n }.ip.0.netmask=\${netmask:${ network }}`,
+    `guestinfo.interface.${ n }.route.0.gateway=\${gateway:${ network }}`
+  );
+
+  return props;
+};
+
+const getInitialVappMode = (c) => {
+  const vappProperty = c.vappProperty || [];
+
+  if (
+    !c.vappIpprotocol &&
+    !c.vappIpallocationpolicy &&
+    !c.vappTransport &&
+    vappProperty.length === 0
+  ) {
+    return VAPP_MODE.DISABLED;
+  }
+
+  const d = getDefaultVappOptions(c.network);
+
+  if (
+    c.vappIpprotocol === d.vappIpprotocol &&
+    c.vappIpallocationpolicy === d.vappIpallocationpolicy &&
+    c.vappTransport === d.vappTransport &&
+    vappProperty.length === d.vappProperty.length &&
+    vappProperty.join() === d.vappProperty.join()
+  ) {
+    return VAPP_MODE.AUTO;
+  }
+
+  return VAPP_MODE.MANUAL;
+};
+
+/**
+ * passing 'datacenter' yields
+ *
+ * {
+ *    datacenter() {
+ *       return this.datacenterResults || [];
+ *    },
+ *    datacenterLoading() {
+ *       return this.datacenterLoading === null;
+ *    }
+ * }
+ */
+function createOptionHelpers(name) {
+  return {
+    [name]() {
+      return this[`${ name }Results`] || [];
+    },
+    [`${ name }Loading`]() {
+      return this[`${ name }Results`] === null;
+    }
+  };
+}
+
+export default {
+  components: {
+    ArrayListSelect, Card, KeyValue, Loading, LabeledInput, LabeledSelect, Banner, UnitInput, RadioGroup, YamlEditor
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    credentialId: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    this.errors = [];
+
+    this.credential = await this.$store.dispatch('management/find', { type: SECRET, id: this.cloudCredentialId });
+  },
+
+  data() {
+    const vAppOptions = [
+      {
+        label: this.t('cluster.machineConfig.vsphere.vAppOptions.disable'),
+        value: VAPP_MODE.DISABLED
+      },
+      {
+        label: this.t('cluster.machineConfig.vsphere.vAppOptions.auto'),
+        value: VAPP_MODE.AUTO
+      },
+      {
+        label: this.t('cluster.machineConfig.vsphere.vAppOptions.manual'),
+        value: VAPP_MODE.MANUAL
+      },
+    ];
+
+    const creationMethods = [
+      {
+        label: this.t('cluster.machineConfig.vsphere.creationMethods.template'),
+        value: CREATION_METHOD.TEMPLATE
+      },
+      // This is currently broken in the backend. Once fixed we can add this back
+      // {
+      //   label: this.t('cluster.machineConfig.vsphere.creationMethods.library'),
+      //   value: CREATION_METHOD.LIBRARY
+      // },
+      {
+        label: this.t('cluster.machineConfig.vsphere.creationMethods.vm'),
+        value: CREATION_METHOD.VM
+      },
+      {
+        label: this.t('cluster.machineConfig.vsphere.creationMethods.legacy'),
+        value: CREATION_METHOD.LEGACY
+      },
+    ];
+
+    if (this.mode === _CREATE) {
+      this.$set(this.value, 'creationType', creationMethods[0].value);
+      this.$set(this.value, 'cpuCount', '2');
+      this.$set(this.value, 'diskSize', '20000');
+      this.$set(this.value, 'memorySize', '2048');
+      this.$set(this.value, 'hostsystem', '');
+      this.$set(this.value, 'cloudConfig', '#cloud-config\n\n');
+      this.$set(this.value, 'cfgparam', DEFAULT_CFGPARAM);
+      this.$set(this.value, 'vappProperty', this.value.vappProperty);
+      Object.entries(INITIAL_VAPP_OPTIONS).forEach(([key, value]) => {
+        this.$set(this.value, key, value);
+      });
+    }
+
+    return {
+      credential:               null,
+      creationMethods,
+      dataCentersResults:       null,
+      resourcePoolsResults:     null,
+      dataStoresResults:        null,
+      dataStoreClustersResults: null,
+      foldersResults:           null,
+      hostsResults:             null,
+      templatesResults:         null,
+      contentLibrariesResults:  null,
+      libraryTemplatesResults:  null,
+      virtualMachinesResults:   null,
+      showTemplatesResults:     null,
+      tagsResults:              null,
+      attributeKeysResults:     null,
+      networksResults:           null,
+      vAppOptions,
+      vappMode:                 getInitialVappMode(this.value)
+    };
+  },
+
+  computed: {
+    ...createOptionHelpers('dataCenters'),
+    ...createOptionHelpers('resourcePools'),
+    ...createOptionHelpers('dataStores'),
+    ...createOptionHelpers('dataStoreClusters'),
+    ...createOptionHelpers('folders'),
+    ...createOptionHelpers('hosts'),
+    ...createOptionHelpers('templates'),
+    ...createOptionHelpers('contentLibraries'),
+    ...createOptionHelpers('libraryTemplates'),
+    ...createOptionHelpers('virtualMachines'),
+    ...createOptionHelpers('showTemplates'),
+    ...createOptionHelpers('tags'),
+    ...createOptionHelpers('attributeKeys'),
+    ...createOptionHelpers('networks'),
+
+    showTemplate() {
+      return this.value.creationType === 'template';
+    },
+
+    showContentLibrary() {
+      return this.value.creationType === 'library';
+    },
+
+    showVirtualMachines() {
+      return this.value.creationType === 'vm';
+    },
+
+    showIso() {
+      return this.value.creationType === 'legacy';
+    },
+
+    showManual() {
+      return this.vappMode === 'manual';
+    },
+
+    cloudCredentialId() {
+      return this.credentialId.split('/')[1];
+    },
+
+    host: {
+      get() {
+        return this.value.hostsystem === '' ? SENTINEL : this.value.hostsystem;
+      },
+      set(value) {
+        const newValue = value === SENTINEL ? '' : value;
+
+        this.$set(this.value, 'hostsystem', newValue);
+      }
+    },
+
+    customAttribute: keyValueStrings('value.customAttribute'),
+    vappProperty:    keyValueStrings('value.vappProperty'),
+    cfgparam:        keyValueStrings('value.cfgparam'),
+
+    cpuCount:   integerString('value.cpuCount'),
+    memorySize: integerString('value.memorySize'),
+    diskSize:   integerString('value.diskSize'),
+
+    showCloudConfigYaml() {
+      return this.value.creationType !== 'legacy';
+    },
+  },
+
+  watch: {
+    cloudCredentialId() {
+      this.$fetch();
+    },
+
+    credential() {
+      this.loadDataCenters();
+    },
+
+    dataCentersResults() {
+      this.loadResourcePools();
+      this.loadDataStores();
+      this.loadFolders();
+      this.loadHosts();
+      this.loadTemplates();
+      this.loadTags();
+      this.loadCustomAttributes();
+      // This is currently broken in the backend. Once fixed we can add this back
+      // this.loadContentLibraries();
+      this.loadLibraryTemplates();
+      this.loadVirtualMachines();
+      this.loadNetworks();
+    },
+
+    'value.contentLibrary'() {
+      this.loadLibraryTemplates();
+    },
+    'value.creationType'(value) {
+      this.$set(this.value, 'cloneFrom', '');
+      const boot2dockerUrl = value === CREATION_METHOD.LEGACY ? BOOT_2_DOCKER_URL : '';
+
+      this.$set(this.value, 'boot2dockerUrl', boot2dockerUrl);
+    },
+    vappMode(value) {
+      if (value === VAPP_MODE.AUTO) {
+        const defaultVappOptions = getDefaultVappOptions(this.value.network);
+
+        return this.updateVappOptions(defaultVappOptions);
+      }
+
+      this.updateVappOptions(INITIAL_VAPP_OPTIONS);
+    }
+  },
+
+  methods: {
+    stringify,
+    async requestOptions(resource, secretId, dataCenter, library) {
+      const datacenterLessResources = ['tag-categories', 'tags', 'data-centers', 'custom-attributes'];
+
+      if (!secretId || (!datacenterLessResources.includes(resource) && !dataCenter)) {
+        return [];
+      }
+
+      const queryParams = Object.entries({
+        secretId,
+        dataCenter,
+        library
+      })
+        .filter(entry => entry[1])
+        .map(entry => `${ entry[0] }=${ entry[1] }`)
+        .join('&');
+
+      const url = `/meta/vsphere/${ resource }?${ queryParams }`;
+
+      const result = await this.$store.dispatch('management/request', {
+        url,
+        redirectUnauthorized: false,
+      }, { root: true });
+
+      return result.data;
+    },
+
+    async loadDataCenters() {
+      const options = await this.requestOptions('data-centers', this.cloudCredentialId);
+      const content = this.mapPathOptionsToContent(options);
+      const valueInContent = content.find(c => c.value === this.value.datacenter );
+
+      if (!valueInContent) {
+        this.$set(this.value, 'datacenter', options[0]);
+        this.$set(this.value, 'cloneFrom', undefined);
+        this.$set(this.value, 'useDataStoreCluster', false);
+      }
+
+      this.$set(this, 'dataCentersResults', content);
+    },
+
+    async loadTags() {
+      const categoriesPromise = this.requestOptions('tag-categories', this.cloudCredentialId);
+      const optionsPromise = this.requestOptions('tags', this.cloudCredentialId);
+      const [categories, options] = await Promise.all([categoriesPromise, optionsPromise]);
+      const content = this.mapTagsToContent(options).map(option => ({
+        ...option,
+        category: categories.find(c => c.name === option.category)
+      }));
+
+      this.resetValueIfNecessary('tag', content, options, true);
+
+      this.$set(this, 'tagsResults', content);
+    },
+
+    async loadCustomAttributes() {
+      const options = await this.requestOptions('custom-attributes', this.cloudCredentialId);
+
+      this.$set(this, 'attributeKeysResults', this.mapCustomAttributesToContent(options));
+    },
+
+    async loadHosts() {
+      const options = await this.requestOptions(
+        'hosts',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+      const content = this.mapHostOptionsToContent(options);
+
+      this.resetValueIfNecessary('hostsystem', content, options);
+
+      this.$set(this, 'hostsResults', content);
+    },
+
+    async loadResourcePools() {
+      const options = await this.requestOptions(
+        'resource-pools',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+
+      const content = this.mapPoolOptionsToContent(options);
+
+      this.resetValueIfNecessary('pool', content, options);
+
+      this.$set(this, 'resourcePoolsResults', content);
+    },
+
+    async loadDataStores() {
+      const options = await this.requestOptions(
+        'data-stores',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+      const content = this.mapPathOptionsToContent(options);
+
+      this.resetValueIfNecessary('datastore', content, options);
+
+      this.$set(this, 'dataStoresResults', content);
+    },
+
+    async loadDataStoreClusters() {
+      const options = await this.requestOptions(
+        'data-store-clusters',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+      const content = this.mapPathOptionsToContent(options);
+
+      this.resetValueIfNecessary('datastoreCluster', content, options);
+
+      this.$set(this, 'dataStoreClustersResults', content);
+    },
+
+    async loadFolders() {
+      const options = await this.requestOptions(
+        'folders',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+      const content = this.mapFolderOptionsToContent(options);
+
+      this.resetValueIfNecessary('folder', content, options);
+
+      this.$set(this, 'foldersResults', content);
+    },
+
+    async loadNetworks() {
+      const options = await this.requestOptions(
+        'networks',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+      const content = this.mapPathOptionsToContent(options);
+
+      this.resetValueIfNecessary('network', content, options, true);
+
+      this.$set(this, 'networksResults', content);
+    },
+
+    async loadContentLibraries() {
+      const options = await this.requestOptions(
+        'content-libraries',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+      const content = this.mapPathOptionsToContent(options);
+
+      this.resetValueIfNecessary('contentLibrary', content, options);
+
+      this.$set(this, 'contentLibrariesResults', content);
+    },
+
+    async loadLibraryTemplates() {
+      const contentLibrary = this.value.contentLibrary;
+
+      if (!contentLibrary) {
+        return [];
+      }
+
+      const options = await this.requestOptions(
+        'library-templates',
+        this.cloudCredentialId,
+        undefined,
+        contentLibrary
+      );
+
+      const content = this.mapPathOptionsToContent(options);
+
+      this.resetValueIfNecessary('cloneFrom', content, options);
+
+      this.$set(this, 'libraryTemplatesResults', content);
+    },
+
+    async loadVirtualMachines() {
+      const options = await this.requestOptions(
+        'virtual-machines',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+
+      const content = this.mapPathOptionsToContent(options);
+
+      this.resetValueIfNecessary('cloneFrom', content, options);
+
+      this.$set(this, 'virtualMachinesResults', content);
+    },
+
+    async loadTemplates() {
+      const options = await this.requestOptions(
+        'templates',
+        this.cloudCredentialId,
+        this.value.datacenter
+      );
+
+      const content = this.mapPathOptionsToContent(options);
+
+      this.resetValueIfNecessary('cloneFrom', content, options);
+
+      this.$set(this, 'templatesResults', content);
+    },
+
+    resetValueIfNecessary(key, content, options, isArray = false) {
+      const isValueInContent = () => {
+        if (isArray) {
+          return this.value[key].every(value => content.find(c => c.value === value));
+        }
+
+        return content.find(c => c.value === this.value[key] );
+      };
+
+      if (!isValueInContent()) {
+        const value = isArray ? [] : content[0]?.value;
+
+        this.$set(this.value, key, value);
+      }
+    },
+
+    mapPathOptionsToContent(pathOptions) {
+      return pathOptions.map((pathOption) => {
+        const split = pathOption.split('/');
+
+        return {
+          label: split[split.length - 1],
+          value: pathOption
+        };
+      });
+    },
+
+    mapHostOptionsToContent(hostOptions) {
+      return this.mapPathOptionsToContent(hostOptions)
+        .map(c => c.value === '' ? {
+          label: this.t('cluster.machineConfig.vsphere.hostOptions.any'),
+          value: SENTINEL
+        } : c);
+    },
+
+    mapFolderOptionsToContent(folderOptions) {
+      return folderOptions.map(option => ({
+        label: option || '\u00A0',
+        value: option || ''
+      }));
+    },
+
+    mapPoolOptionsToContent(pathOptions) {
+      return pathOptions.map((pathOption) => {
+        const splitOptions = pathOption.split('/');
+        const label = splitOptions.slice(2).join('/');
+
+        return {
+          label,
+          value: pathOption
+        };
+      });
+    },
+
+    mapCustomAttributesToContent(customAttributes) {
+      return customAttributes.map(customAttribute => ({
+        label: customAttribute.name,
+        value: customAttribute.key.toString()
+      }));
+    },
+
+    mapTagsToContent(tags) {
+      return tags.map(tag => ({
+        ...tag,
+        label: `${ tag.category } / ${ tag.name }`,
+        value: tag.id
+      }));
+    },
+
+    initKeyValueParams(pairsKey, paramsKey) {
+      set(this, paramsKey, (get(this, pairsKey) || []).reduce(stringsToParams, []));
+    },
+
+    updateVappOptions(opts) {
+      this.$set(this.value, 'vappIpprotocol', opts.vappIpprotocol);
+      this.$set(this.value, 'vappIpallocationpolicy', opts.vappIpallocationpolicy);
+      this.$set(this.value, 'vappTransport', opts.vappTransport);
+      this.$set(this.value, 'vappProperty', opts.vappProperty);
+      this.initKeyValueParams('value.vappProperty', 'initVappArray');
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" :delayed="true" />
+  <div v-else-if="errors.length">
+    <div
+      v-for="(err, idx) in errors"
+      :key="idx"
+    >
+      <Banner
+        color="error"
+        :label="stringify(err)"
+      />
+    </div>
+  </div>
+  <div v-else>
+    <Card class="m-0 mt-20" :show-highlight-border="false" :show-actions="false">
+      <h4 slot="title" class="text-default-text mb-5">
+        {{ t('cluster.machineConfig.vsphere.scheduling.label') }}
+        <p class="text-muted text-small">
+          {{ t('cluster.machineConfig.vsphere.scheduling.description') }}
+        </p>
+      </h4>
+      <div slot="body">
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="value.datacenter"
+              :loading="dataCentersLoading"
+              :mode="mode"
+              :options="dataCenters"
+              :label="t('cluster.machineConfig.vsphere.scheduling.dataCenter')"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="value.pool"
+              :loading="resourcePoolsLoading"
+              :mode="mode"
+              :options="resourcePools"
+              :label="t('cluster.machineConfig.vsphere.scheduling.resourcePool')"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="value.datastore"
+              :loading="dataStoresLoading"
+              :mode="mode"
+              :options="dataStores"
+              :label="t('cluster.machineConfig.vsphere.scheduling.dataStore')"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="value.folder"
+              :loading="foldersLoading"
+              :mode="mode"
+              :options="folders"
+              :label="t('cluster.machineConfig.vsphere.scheduling.folder')"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-12">
+            <LabeledSelect
+              v-model="host"
+              :loading="hostsLoading"
+              :mode="mode"
+              :options="hosts"
+              :label="t('cluster.machineConfig.vsphere.scheduling.host.label')"
+            />
+            <p class="text-muted mt-5">
+              {{ t('cluster.machineConfig.vsphere.scheduling.host.note') }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Card>
+    <Card class="m-0 mt-20" :show-highlight-border="false" :show-actions="false">
+      <h4 slot="title" class="text-default-text mb-5">
+        {{ t('cluster.machineConfig.vsphere.instanceOptions.label') }}
+        <p class="text-muted text-small">
+          {{ t('cluster.machineConfig.vsphere.instanceOptions.description') }}
+        </p>
+      </h4>
+      <div slot="body">
+        <div class="row mt-10">
+          <div class="col span-6">
+            <UnitInput
+              v-model="cpuCount"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.cpus')"
+              :suffix="t('suffix.cores')"
+            />
+          </div>
+          <div class="col span-6">
+            <UnitInput
+              v-model="memorySize"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.memory')"
+              :suffix="t('suffix.mib')"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <UnitInput
+              v-model="diskSize"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.disk')"
+              :suffix="t('suffix.mib')"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col" :class="showContentLibrary ? 'span-4' : 'span-6'">
+            <LabeledSelect
+              v-model="value.creationType"
+              :mode="mode"
+              :options="creationMethods"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.creationMethod')"
+            />
+          </div>
+          <div v-if="showTemplate" class="col span-6">
+            <LabeledSelect
+              v-model="value.cloneFrom"
+              :loading="templatesLoading"
+              :mode="mode"
+              :options="templates"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.template')"
+            />
+          </div>
+          <div v-if="showContentLibrary" class="col span-4">
+            <LabeledSelect
+              v-model="value.contentLibrary"
+              :loading="contentLibrariesLoading"
+              :mode="mode"
+              :options="contentLibraries"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.contentLibrary')"
+            />
+          </div>
+          <div v-if="showContentLibrary" class="col span-4">
+            <LabeledSelect
+              v-model="value.cloneFrom"
+              :loading="libraryTemplatesLoading"
+              :mode="mode"
+              :options="libraryTemplates"
+              :searchable="true"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.libraryTemplate')"
+            />
+          </div>
+          <div v-if="showVirtualMachines" class="col span-6">
+            <LabeledSelect
+              v-model="value.cloneFrom"
+              :loading="virtualMachinesLoading"
+              :mode="mode"
+              :options="virtualMachines"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.virtualMachine')"
+            />
+          </div>
+          <div v-if="showIso" class="col span-6">
+            <LabeledInput
+              v-model="value.boot2dockerUrl"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.osIsoUrl.label')"
+              :placeholder="t('cluster.machineConfig.vsphere.instanceOptions.osIsoUrl.placeholder')"
+            />
+          </div>
+        </div>
+        <div v-if="showIso" class="row mt-10">
+          <div class="col span-12">
+            <LabeledInput
+              v-model="value.cloudinit"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.instanceOptions.cloudInit.label')"
+              :placeholder="t('cluster.machineConfig.vsphere.instanceOptions.cloudInit.placeholder')"
+            />
+            <p class="text-muted mt-5">
+              {{ t('cluster.machineConfig.vsphere.instanceOptions.cloudInit.note') }}
+            </p>
+          </div>
+        </div>
+        <div v-if="showCloudConfigYaml" class="row mt-10">
+          <div class="col span-12">
+            <label class="text-label mt-0">{{ t('cluster.machineConfig.vsphere.instanceOptions.cloudConfigYaml') }}</label>
+            <YamlEditor
+              ref="yaml-additional"
+              v-model="value.cloudConfig"
+              :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+              initial-yaml-values="# Additional Manifest YAML"
+              class="yaml-editor"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-12">
+            <label class="text-label mt-0">
+              {{ t('cluster.machineConfig.vsphere.networks.label') }}
+            </label>
+            <ArrayListSelect v-model="value.network" :options="networks" :array-list-props="{ addLabel: t('cluster.machineConfig.vsphere.networks.add') }" :loading="networksLoading" />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-12">
+            <label class="text-label mt-0">
+              {{ t('cluster.machineConfig.vsphere.guestinfo.label') }}
+            </label>
+            <KeyValue v-model="cfgparam" :add-label="t('cluster.machineConfig.vsphere.guestinfo.add')" :key-placeholder="t('cluster.machineConfig.vsphere.guestinfo.keyPlaceholder')" :value-placeholder="t('cluster.machineConfig.vsphere.guestinfo.valuePlaceholder')" :read-allowed="false" />
+          </div>
+        </div>
+      </div>
+    </Card>
+    <Card class="m-0 mt-20" :show-highlight-border="false" :show-actions="false">
+      <h4 slot="title" class="text-default-text mb-5">
+        {{ t('cluster.machineConfig.vsphere.tags.label') }}
+        <p class="text-muted text-small">
+          {{ t('cluster.machineConfig.vsphere.tags.description') }}
+        </p>
+      </h4>
+      <div slot="body">
+        <ArrayListSelect v-model="value.tag" :options="tags" :array-list-props="{ addLabel: t('cluster.machineConfig.vsphere.tags.addTag') }" :loading="tagsLoading" />
+      </div>
+    </Card>
+    <Card class="m-0 mt-20" :show-highlight-border="false" :show-actions="false">
+      <h4 slot="title" class="text-default-text mb-5">
+        {{ t('cluster.machineConfig.vsphere.customAttributes.label') }}
+        <p class="text-muted text-small">
+          {{ t('cluster.machineConfig.vsphere.customAttributes.description') }}
+        </p>
+      </h4>
+      <div slot="body">
+        <KeyValue
+          v-model="customAttribute"
+          :key-options="attributeKeys"
+          :options="tags"
+          :add-label="t('cluster.machineConfig.vsphere.customAttributes.add')"
+          :read-allowed="false"
+          :loading="attributeKeysLoading"
+          :key-taggable="false"
+          :key-option-unique="true"
+        />
+      </div>
+    </Card>
+    <Card class="m-0 mt-20" :show-highlight-border="false" :show-actions="false">
+      <h4 slot="title" class="text-default-text mb-5">
+        {{ t('cluster.machineConfig.vsphere.vAppOptions.label') }}
+        <p class="text-muted text-small">
+          {{ t('cluster.machineConfig.vsphere.vAppOptions.description') }}
+        </p>
+      </h4>
+      <div slot="body">
+        <div class="row mb-10">
+          <div class="col span-6">
+            <RadioGroup
+              v-model="vappMode"
+              name="restoreMode"
+              :label="t('cluster.machineConfig.vsphere.vAppOptions.restoreType')"
+              :options="vAppOptions"
+            />
+          </div>
+        </div>
+        <div v-if="showManual" class="row mb-10">
+          <div class="col span-4">
+            <LabeledInput
+              v-model="value.vappTransport"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.vAppOptions.transport.label')"
+              :tooltip="t('cluster.machineConfig.vsphere.vAppOptions.transport.tooltip')"
+              :placeholder="t('cluster.machineConfig.vsphere.vAppOptions.transport.placeholder')"
+            />
+          </div>
+          <div class="col span-4">
+            <LabeledInput
+              v-model="value.vappIpprotocol"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.vAppOptions.protocol.label')"
+              :tooltip="t('cluster.machineConfig.vsphere.vAppOptions.protocol.tooltip')"
+              :placeholder="t('cluster.machineConfig.vsphere.vAppOptions.protocol.placeholder')"
+            />
+          </div>
+          <div class="col span-4">
+            <LabeledInput
+              v-model="value.vappIpallocationpolicy"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.vAppOptions.allocation.label')"
+              :tooltip="t('cluster.machineConfig.vsphere.vAppOptions.allocation.tooltip')"
+              :placeholder="t('cluster.machineConfig.vsphere.vAppOptions.allocation.placeholder')"
+            />
+          </div>
+        </div>
+        <div v-if="showManual" class="row">
+          <div class="col span-12">
+            <KeyValue
+              v-model="vappProperty"
+              :title="t('cluster.machineConfig.vsphere.vAppOptions.properties.label')"
+              :key-placeholder="t('cluster.machineConfig.vsphere.vAppOptions.properties.keyPlaceholder')"
+              :value-placeholder="t('cluster.machineConfig.vsphere.vAppOptions.properties.valuePlaceholder')"
+              :add-label="t('cluster.machineConfig.vsphere.vAppOptions.properties.add')"
+              :read-allowed="false"
+            />
+          </div>
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
diff --git a/utils/computed.js b/utils/computed.js
new file mode 100644
index 0000000000..9daa17a7c2
--- /dev/null
+++ b/utils/computed.js
@@ -0,0 +1,45 @@
+const { set, get } = require('@/utils/object');
+
+/**
+ * Creates a computed property that handles converting strings to numbers and numbers to strings. Particularly when dealing with UnitInput.
+ * @param {*} path The path of the real value
+ * @returns the computed property
+ */
+export function integerString(path) {
+  return {
+    get() {
+      return Number.parseFloat(get(this, path));
+    },
+
+    set(value) {
+      set(this, path, value.toString(10));
+    }
+  };
+}
+
+/**
+ * Creates a computed property that handles converting strings a list of strings that look like ['key=value'] into { key: value } and back
+ * @param {*} path The path of the real value
+ * @param {*} delimeter the character/s used between the key/value. Default value '='.
+ * @returns the computed property
+ */
+export function keyValueStrings(path, delimeter = '=') {
+  return {
+    get() {
+      const result = {};
+
+      get(this, path).forEach((entry) => {
+        const [key, value] = entry.split(delimeter);
+
+        result[key] = value;
+      });
+
+      return result;
+    },
+    set(value) {
+      const newValue = Object.entries(value).map(([key, value]) => `${ key }${ delimeter }${ value }`);
+
+      set(this, path, newValue);
+    }
+  };
+}