1 files changed, 16 insertions, 12 deletions
diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue
index 8e3ecb6..e4ac609 100644
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@@ -1,25 +1,29 @@
+<script setup lang="ts">
+import { generatePort } from './random-port-generator.model';
+import { computedRefreshable } from '@/composable/computedRefreshable';
+import { useCopy } from '@/composable/copy';
+
+const [port, refreshPort] = computedRefreshable(() => String(generatePort()));
+
+const { copy } = useCopy({ source: port, text: 'Port copied to the clipboard' });
+</script>
+
 <template>
   <c-card>
     <div class="port">
       {{ port }}
     </div>
     <div flex justify-center gap-3>
-      <c-button @click="copy"> Copy </c-button>
-      <c-button @click="refreshPort"> Refresh </c-button>
+      <c-button @click="copy">
+        Copy
+      </c-button>
+      <c-button @click="refreshPort">
+        Refresh
+      </c-button>
     </div>
   </c-card>
 </template>
 
-<script setup lang="ts">
-import { computedRefreshable } from '@/composable/computedRefreshable';
-import { useCopy } from '@/composable/copy';
-import { generatePort } from './random-port-generator.model';
-
-const [port, refreshPort] = computedRefreshable(() => String(generatePort()));
-
-const { copy } = useCopy({ source: port, text: 'Port copied to the clipboard' });
-</script>
-
 <style lang="less" scoped>
 .port {
   text-align: center;