Move piratepx integration from router to component

web/.env.development

@@ -1,3 +1,5 @@
 NODE_ENV=development
 
 VITE_API_URL=http://localhost:8080/api
+VITE_PIRATEPX_PROJECT_ID=
+VITE_PIRATEPX_URL=

web/.env.production

@@ -1,3 +1,5 @@
 NODE_ENV=production
 
 VITE_API_URL=https://app.piratepx.com/api
+VITE_PIRATEPX_PROJECT_ID=7aeb3ca2-ca76-49ec-ad27-24f0d380a545
+VITE_PIRATEPX_URL=https://app.piratepx.com/ship

web/src/components/the/TheLayout.vue

@@ -20,5 +20,16 @@
     <main>
       <slot />
     </main>
+    <the-piratepx class="absolute right-0 bottom-0" />
   </div>
 </template>
+
+<script>
+import ThePiratepx from '/@/components/the/ThePiratepx.vue'
+
+export default {
+  components: {
+    ThePiratepx,
+  },
+}
+</script>

web/src/components/the/ThePiratepx.vue

@@ -0,0 +1,51 @@
+<template>
+  <img v-if="isEnabled" :src="src" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timestamp: Date.now(),
+    }
+  },
+  computed: {
+    isEnabled() {
+      return this.url && this.projectID
+    },
+    url() {
+      return import.meta.env.VITE_PIRATEPX_URL
+    },
+    projectID() {
+      return import.meta.env.VITE_PIRATEPX_PROJECT_ID
+    },
+    identifier() {
+      return this.$route.name
+    },
+    src() {
+      if (!this.isEnabled) {
+        return
+      }
+
+      const query = new URLSearchParams({
+        p: this.projectID,
+        i: this.identifier,
+        _: this.timestamp,
+      })
+
+      return `${this.url}?${query.toString()}`
+    },
+  },
+  watch: {
+    $route(to, from) {
+      if (!this.isEnabled) {
+        return
+      }
+
+      if (to.name !== from.name) {
+        this.timestamp = Date.now()
+      }
+    },
+  },
+}
+</script>

web/src/router/index.js

@@ -57,15 +57,4 @@ const router = createRouter({
   ],
 })
 
-if (import.meta.env.MODE === 'production') {
-  router.afterEach((to) => {
-    const query = new URLSearchParams({
-      p: '7aeb3ca2-ca76-49ec-ad27-24f0d380a545',
-      i: to.name,
-    })
-
-    fetch(`https://app.piratepx.com/ship?${query.toString()}`)
-  })
-}
-
 export default router