[Vue @Component] Switch Between Vue Components with Dynamic Components

A common scenario is to present different components based on the state of the application. Dynamic components in Vue make this simple by providing a component element that simply needs to be bound to the component that you want to render. This example shows using a select dropdown in Vue to select the component to render.

 

<template>
  <Settings>
    <Layout slot-scope="{header, footer}">
      <AwesomeHeader slot="header" :header="header"></AwesomeHeader>
      <div slot="content" class="flex-grow">
        <select v-model="selectedComp">
          <option v-for="comp in comps" :key="comp.name" :value="comp">{{comp.name}}</option>
        </select>
        <component :is="selectedComp"></component>
      </div>
      <AwesomeFooter slot="footer" :footer="footer"></AwesomeFooter>
    </Layout>
  </Settings>
</template>

<script>
import Vue from "vue"
import { Component, Prop } from "vue-property-decorator"
import Settings from "./Settings"
import Layout from "./Layout"
import { Header, Footer } from "./components"

const One = {
  functional: true,
  name: "One",
  render: h => <h1 class="bg-red">One</h1>
}

const Two = {
  functional: true,
  name: "Two",
  render: h => <h1 class="bg-green">Two</h1>
}

const Three = {
  functional: true,
  name: "Three",
  render: h => <h1 class="bg-purple">Three</h1>
}

@Component({
  components: {
    Settings,
    Layout,
    AwesomeHeader: Header,
    AwesomeFooter: Footer
  }
})
export default class App extends Vue {
  comps = [One, Two, Three]
  selectedComp = this.comps[0]
}
</script>