<template>
  <div>
    <div :key="p" v-for="p in activePlugins">
      <component :is="camelCase(p)" v-if="p && $options.components[camelCase(p)]" />
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import WeatherSwitch from './WeatherSwitch.vue'
import MiniMap from './MiniMap.vue'

const components = {
  WeatherSwitch,
  MiniMap
}

export default {
  components,
  props: {
    activePlugins: {
      type: Array,
      default: [],
    },
  },
  methods: {
    camelCase(str) {
      return _.upperFirst(_.camelCase(str))
    },
  },
}
</script>
