Merge pull request #614 from codex-team/nuxt

feat(event-overview): nuxt addons support

src/components/event/Overview.vue

@@ -26,8 +26,16 @@
         v-if="getIntegrationAddons('vue')"
         class="event-overview__section"
         :addons="getIntegrationAddons('vue')"
+        icon="vue"
         title="Vue"
       />
+      <DetailsAddons
+        v-if="getIntegrationAddons('nuxt')"
+        class="event-overview__section"
+        :addons="getIntegrationAddons('nuxt')"
+        icon="nuxt"
+        title="Nuxt"
+      />
       <DetailsAddons
         v-if="hasContext"
         class="event-overview__section"
@@ -112,7 +120,7 @@ export default Vue.extend({
         return null;
       }
 
-      const integrationToFilter = [ 'vue' ];
+      const integrationToFilter = [ 'vue', 'nuxt' ];
       const filteredAddons = {};
 
       Object.entries(this.event.payload.addons).forEach(([name, value]) => {

src/components/event/details/DetailsAddons.vue

@@ -1,10 +1,10 @@
 <template>
   <DetailsBase>
     <template #header>
-      {{ title }}
-      <template v-if="title === 'Vue' ">
-        <Icon symbol="vue" />
+      <template v-if="icon">
+        <Icon :symbol="icon" />
       </template>
+      {{ title }}
     </template>
     <template #content>
       <div
@@ -90,6 +90,14 @@ export default Vue.extend({
       type: Object as PropType<EventAddons>,
       required: true,
     },
+
+    /**
+     * Integration framework logo
+     */
+    icon: {
+      type: String,
+      default: '',
+    }
   },
   computed: {
   },
@@ -101,7 +109,7 @@ export default Vue.extend({
      * @param key - addon key
      */
     isHTML(key: string): boolean {
-      return key === 'component' && this.title === 'Vue';
+      return key.toLowerCase() === 'component' && ['Vue', 'Nuxt'].includes(this.title);
     },
   },
 });

src/components/event/details/DetailsBase.vue

@@ -49,12 +49,13 @@ export default {
       font-size: 12px;
       letter-spacing: 0.15px;
       text-transform: uppercase;
+      display: flex;
+      align-items: center;
+      gap: 4px;
 
       .icon {
-        width: 16px;
-        height: 13px;
-        margin-top: -2px;
-        margin-left: 5px;
+        width: 20px;
+        height: 20px;
         vertical-align: middle;
       }
     }