Change Content of Rad SideDrawer (was 'Second (third,...) Side Drawer'

Question

Should be quite simple, but if I ask it here, perhaps others can use.

How to add a second side drawer?

I've copied DrawerContent.vue to DrawerContentL2.vue, and modified the contents.

And added

import DrawerContentL2 from "./components/DrawerContentL2";

to my app.js

And the original app.js looks like

new Vue({
     render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            h(Twisty, { slot: 'mainContent' })   
    ]
        )
  }
  }).$start();

Now what?

Answer 1

OK, got it. Rather than trying to change the content of slot: 'drawerContent' from DrawerContent.vue to DrawerContentL2.vue, I just put them in two different files, and used the main DrawerContent.vue to choose which one.

Thanks to Alligator.io for the tips on how. Swappable Dynamic Components in Vue.js

The new DrawerContent.vue looks like:

<template>
    <component :is="dynamicComponent"></component>
</template>

<script>

import DrawerContentL1 from "./DrawerContentL1";
import DrawerContentL2 from "./DrawerContentL2";

export default {
  components: {
    DrawerContentL1,
    DrawerContentL2
  },
  computed: {
    dynamicComponent() {
      if(this.$store.state.currentLevel=="L1") {
        return 'DrawerContentL1';
      } else {
        return 'DrawerContentL2';
      }
    }
  }
}
</script>

And, of course, each component file must declare it's name:

export default {
        name: "DrawerContentL1",
        mounted() {
        ...