Altra conversione in Typescript , partendo da un progetto di esempio funzionante...

src/layouts/drawer/drawer.vue

@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <div id="profile" v-if="getUsername">
+            <img :src="photo" style='height: 80px' class="inline-block">
+            <img src="../img/avatar-1.svg" id="avatar" class="inline-block">
+            <div id="user-name">
+                <span class="text-white"> {{ getUsername }} </span>
+                <hr>
+                <span class="text-white" v-if="getVerificato"> {{$t('reg.verificato')}} </span>
+                <span class="text-white" v-else> {{$t('reg.non_verificato')}} </span>
+                <span class="text-white"> {{ getEmail }} </span>
+            </div>
+            <div id="user-actions">
+                <q-btn round color="primary" icon="person"></q-btn>
+                <q-btn round color="warning" icon="lock"></q-btn>
+                <q-btn round color="secondary" icon="exit_to_app" @click='logoutHandler'></q-btn>
+            </div>
+        </div>
+
+        <menu-one v-if="getMenuCollapse" :links="links"></menu-one>
+        <menu-two v-else :links="links"></menu-two>
+
+        <div class="fixed-bottom text-center light text-italic">
+            Powered by Perseo
+        </div>
+
+    </div>
+</template>
+<script type="text/javascript">
+  import menuOne from './menuOne.vue'
+  import menuTwo from './menuTwo.vue'
+
+  import * as types from '../../store/mutation-types'
+
+  import {mapGetters, mapActions} from 'vuex'
+
+  export default {
+    data() {
+      return {
+        photo: '',
+        user: null,
+        links: {
+          Dashboard: {
+            routes: [
+              {route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One'},
+              {route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'SignUp'},
+              {route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'Login'},
+            ],
+            show: true
+          },
+          Forms: {
+            routes: [
+              {route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Prec'},
+              {route: '/simpleform', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Simpleform'},
+              { route: '/embeeded', faIcon: 'fa fa-check', materialIcon: 'check', name: 'Embeeded validations' },
+              //{ route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
+            ],
+            show: false
+          },
+          Pages: {
+            routes: [
+              {route: '/login', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login'},
+              //{ route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
+              //{ route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
+              //{ route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
+            ],
+            show: false
+          }
+        }
+      }
+    },
+    created() {
+      var vm = this
+      /*firebase.auth().onAuthStateChanged(function (user) {
+        if (user) {
+          vm.user = user
+          vm.name = vm.user.displayName
+          vm.email = vm.user.email
+          vm.photo = vm.user.photoURL
+          vm.userId = vm.user.uid
+        }
+      })*/
+    },
+    methods:{
+      ...mapActions("user", ["logout"]),
+      logoutHandler() {
+        this.logout({router: this.$router});
+        this.$q.notify(this.$t('logout.uscito'));
+      }
+    },
+    computed: {
+      ...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse']),
+      ...mapGetters("user", ['getUsername', 'getVerificato', 'getEmail']),
+    },
+    components: {
+      menuOne,
+      menuTwo
+    }
+  }
+</script>
+<style scoped>
+    .fixed-bottom {
+        margin-bottom: 1%;
+    }
+
+    .fixed-bottom a img {
+        width: 25px;
+        height: 25px;
+    }
+
+    #avatar {
+        padding: 20px;
+    }
+
+    #profile {
+        height: 130px;
+        background-color: #009688;
+    }
+
+    #user-name {
+        left: 90px;
+        bottom: 77px;
+        position: relative;
+        width: 159px;
+    }
+
+    #user-actions {
+        left: 90px;
+        bottom: 71px;
+        position: relative;
+        width: 171px;
+    }
+
+    #menu-collapse {
+        margin-top: 5%;
+    }
+</style>

src/layouts/drawer/menuOne.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="list no-border platform-delimiter light-paragraph">
+        <q-icon name="action"/>
+        <template v-for="(parent, index) in links">
+            <q-list>
+                <div class="list-label cursor-pointer" @click="parent.show = !parent.show">
+                    {{replaceUnderlineToSpace(index)}}
+                </div>
+                <template v-for="child in parent.routes">
+                    <transition name="menu">
+                        <div v-show="parent.show">
+                                <q-item link :to="child.route" exact class="item item-link drawer-closer cursor-pointer">
+                                    <i :class="child.faIcon" class="item-primary"></i>
+                                    <div class="item-content">{{child.name}}</div>
+                                </q-item>
+                        </div>
+                    </transition>
+                </template>
+            </q-list>
+            <hr>
+        </template>
+    </div>
+</template>
+
+<script>
+  export default {
+    props: ['links'],
+    watch: {
+      '$route.path'() {
+        Object.keys(this.links).forEach(parentName => {
+          this.setParentVisibilityBasedOnRoute(this.links[parentName])
+        })
+      }
+    },
+    computed: {
+      currentRoutePath() {
+        return this.$route.path
+      }
+    },
+    methods: {
+      created() {
+        console.log("MENUONE CREATED!");
+      },
+      setParentVisibilityBasedOnRoute(parent) {
+        parent.routes.forEach(item => {
+          if (this.$route.path === item.route) {
+            parent.show = true
+            return
+          }
+        })
+      },
+      replaceUnderlineToSpace(text) {
+        while (text.indexOf('_') !== -1) {
+          text = text.replace('_', ' ')
+        }
+        return text
+      }
+    }
+  }
+</script>
+<style scoped>
+
+    .router-link-active {
+        color: #027be3;
+        background-color: #dadada !important;
+        border-right: 2px solid #027be3;
+    }
+
+    .list-label:first-child {
+        line-height: 20px;
+        padding:5px;
+        margin:1px;
+    }
+
+    .menu-enter-active, .scale-enter {
+        -webkit-animation: moveFromLeftFade .2s ease both;
+        animation: moveFromLeftFade .2s ease both;
+    }
+
+    .menu-leave-to, .scale-leave-active {
+        -webkit-animation: moveToLeft .2s ease both;
+        animation: moveToLeft .2s ease both;
+    }
+
+    .router-link-active {
+        color: #027be3;
+        background-color: #dadada !important;
+        border-right: 2px solid #027be3;
+    }
+
+    .router-link-active .item-primary {
+        color: #027be3;
+    }
+</style>

src/layouts/drawer/menuTwo.vue

@@ -0,0 +1,7 @@
+<template>
+</template>
+
+<script>
+</script>
+<style scoped>
+</style>