- fix: to export a Component in typescript, you need to create index.ts in each subfolder of the components folder !

src/components/categories/SingleCat/SingleCat.scss

@@ -0,0 +1,3 @@
+.mycard {
+  visibility: hidden;
+}

src/components/categories/SingleCat/SingleCat.ts

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+
+require('./SingleCat.scss')
+
+import { ICategory } from '../../../model/index'
+
+@Component({
+
+})
+export default class SingleCat extends Vue {
+  @Prop({required: true}) itemcat: ICategory
+
+  created() {
+
+  }
+
+}

src/components/categories/SingleCat/SingleCat.vue

@@ -0,0 +1,8 @@
+<template>
+    <div id="appsinglecat">
+        Descr: {{ itemcat.descr_it }}
+    </div>
+</template>
+
+<script lang="ts" src="./SingleCat.ts">
+</script>

src/components/categories/SingleCat/index.ts

@@ -0,0 +1 @@
+export {default as SingleCat} from './SingleCat.vue'

src/components/categories/category/category.ts

@@ -1,10 +1,15 @@
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 
+import { SingleCat } from '@components'
+import { ICategory } from '@src/model'
+
 require('./category.scss')
 
 
-@Component({})
+@Component({
+  components: { SingleCat }
+})
 export default class Category extends Vue {
   filter: boolean = false
   category: string = ''
@@ -20,21 +25,37 @@ export default class Category extends Vue {
     this.updatetable()
   }
 
+  initcat() {
+
+    const objcat: ICategory = {
+      id: 0,
+      descr_it: '',
+      descr_en: '',
+      descr_es: ''
+    }
+    return objcat
+
+  }
+
   async insertCategory() {
 
+    const objcat = this.initcat()
+
     let myid = 0
-    const mycat = this.category
+    objcat.descr_it = this.category
+
     // Add to Indexdb
-    await this.$db.categories.add(
-      { descr_it: mycat }
+    await this.$db.categories.add(objcat
     ).then(ris => {
       myid = ris
     })
 
     // created_at: new Date(),
 
+    objcat.id = myid
+
     // Add into the memory
-    this.categories_arr.push({ descr_it: mycat, id: myid })
+    this.categories_arr.push(objcat)
 
     this.updatetable()
   }

src/components/categories/category/category.vue

@@ -1,7 +1,7 @@
 <template>
     <q-page>
         <div class="panel">
-            <p class="caption">Category:</p>
+            <p class="caption">Singlecat:</p>
 
             <q-input v-model="category" inverted float-label="Inserisci la Categoria"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
@@ -9,7 +9,8 @@
 
             <ul>
                 Lista:
-                <li v-for="item in categories_arr" :key="item.id"> {{ item.descr_it }} </li>
+
+                <SingleCat :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/>
             </ul>
         </div>
     </q-page>

src/components/categories/category/index.ts

@@ -0,0 +1 @@
+export {default as Category} from './category.vue'

src/components/categories/index.ts

@@ -0,0 +1,2 @@
+export * from './SingleCat'
+export * from './category'

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './categories'
+