Use slots to make the text content more dynamic

App.vue

@@ -1,13 +1,26 @@
 <template>
-  <ToolLabels />
+  <div>
+    <AssetLabel
+      v-for="asset in assets.rows.filter(t => t.name !== '')"
+      :asset="asset"
+      :key="asset.id"
+    >
+      <component :is="asset.category.name + 'LabelText'" :asset="asset" />
+    </AssetLabel>
+  </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
-import ToolLabels from './ToolLabels.vue';
 
-@Component({ components: { ToolLabels } })
+import snipeit from './snipeit';
+import AssetLabel from './AssetLabel.vue';
+import ComputersLabelText from './ComputersLabelText.vue';
+
+import assets from './computers.json';
+
+@Component({ components: { AssetLabel, ComputersLabelText } })
 export default class App extends Vue {
-  
+  assets: { rows: [snipeit.Hardware]; total: number } = assets;
 }
 </script>

AssetLabel.vue

@@ -2,12 +2,7 @@
   <article class="label">
     <div class="content">
       <img class="qrcode" :src="qrcode_dataURL" />
-      <span class="text-content">
+      <slot> </slot>
-        <div class="name">{{ name }}</div>
-        <div class="hostname">{{ asset.name }}</div>
-        <div class="mac">{{ mac }}</div>
-        <div class="mac">{{ mac2 }}</div>
-      </span>
     </div>
     <div class="bottom">
       <span class="scanme">Scan the QR code to learn more!</span>
@@ -22,7 +17,6 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import JsBarcode from 'jsbarcode';
-import { toWords as numberToWords } from 'number-to-words';
 import QRCode from 'qrcode';
 
 import snipeit from './snipeit';
@@ -48,17 +42,6 @@ export default class ComputerLabel extends Vue {
       margin: 0,
     });
   }
-
-  get name() {
-    return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
-  }
-
-  get mac() {
-    return this.asset.custom_fields['MAC Address']?.value;
-  }
-  get mac2() {
-    return this.asset.custom_fields['MAC Address 2']?.value;
-  }
 }
 </script>
 

ComputersLabelText.vue

@@ -0,0 +1,31 @@
+<template>
+  <span class="text-content">
+    <div class="name">{{ name }}</div>
+    <div class="hostname">{{ asset.name }}</div>
+    <div class="mac">{{ mac }}</div>
+    <div class="mac">{{ mac2 }}</div>
+  </span>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { toWords as numberToWords } from 'number-to-words';
+
+import snipeit from './snipeit';
+
+@Component
+export default class ComputersLabelText extends Vue {
+  @Prop(Object) readonly asset: snipeit.Hardware;
+
+  get name() {
+    return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
+  }
+
+  get mac() {
+    return this.asset.custom_fields['MAC Address']?.value;
+  }
+  get mac2() {
+    return this.asset.custom_fields['MAC Address 2']?.value;
+  }
+}
+</script>

ToolLabels.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <ComputerLabel
-      v-for="asset in assets.rows.filter(t => t.name !== '')"
-      :asset="asset"
-      :key="asset.id"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-
-import snipeit from './snipeit';
-import ComputerLabel from './ComputerLabel.vue';
-
-import assets from './computers.json';
-
-@Component({ components: { ComputerLabel } })
-export default class ToolLabels extends Vue {
-  assets: { rows: [snipeit.Hardware]; total: number } = assets;
-}
-</script>