style(prettier): run tool

src/App.vue

@@ -1,70 +1,70 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import LucideIcon from "./components/LucideIcon.vue";
-import CustomButton from "./components/CustomButton.vue"
+import CustomButton from "./components/CustomButton.vue";
 
 const visible = ref<boolean>(false);
 
 onMounted(() => {
-  setTimeout(() => {
-    visible.value = true;
-  });
+    setTimeout(() => {
+        visible.value = true;
+    });
 });
 </script>
 
 <template>
-  <main :style="{ display: visible ? 'inherit' : 'none' }">
-    <!-- TODO: 1. rename app -->
-    <h1>
-      <LucideIcon name="package" />
-      Vue-Boilerplate
-    </h1>
-    <br />
-    <p>
-      Fill this page with <i>whatever</i> you're going to develop.
-      <br>
-      <b>Then enjoy!</b>
-    </p>
-    <CustomButton>
-      <LucideIcon name="square-arrow-right"/> This is a sample button yay
-    </CustomButton>
-    <br />
-    <hr />
-    <small class="footer">
-      <LucideIcon name="at-sign" />
-      &nbsp;
-      <a href="https://github.com/klemek" target="_blank">klemek</a>
-      -
-      <!-- TODO: 1. rename app -->
-      <LucideIcon name="github" />
-      &nbsp;
-      <a href="https://github.com/klemek/vue-boilerplate" target="_blank">
-        Repository
-      </a>
-      - 2025
-    </small>
-  </main>
+    <main :style="{ display: visible ? 'inherit' : 'none' }">
+        <!-- TODO: 1. rename app -->
+        <h1>
+            <LucideIcon name="package" />
+            Vue-Boilerplate
+        </h1>
+        <br />
+        <p>
+            Fill this page with <i>whatever</i> you're going to develop.
+            <br />
+            <b>Then enjoy!</b>
+        </p>
+        <CustomButton>
+            <LucideIcon name="square-arrow-right" /> This is a sample button yay
+        </CustomButton>
+        <br />
+        <hr />
+        <small class="footer">
+            <LucideIcon name="at-sign" />
+            &nbsp;
+            <a href="https://github.com/klemek" target="_blank">klemek</a>
+            -
+            <!-- TODO: 1. rename app -->
+            <LucideIcon name="github" />
+            &nbsp;
+            <a href="https://github.com/klemek/vue-boilerplate" target="_blank">
+                Repository
+            </a>
+            - 2025
+        </small>
+    </main>
 </template>
 
 <style scoped>
 .button {
-  display: block;
-  width: 100%;
-  text-decoration: none;
-  padding: 1em;
-  margin-bottom: 0.75em;
-  border: 1px solid var(--color-primary);
-  border-radius: 0.5em;
-  background-color: var(--background);
-  cursor: pointer;
-  font-size: 1.333em;
+    display: block;
+    width: 100%;
+    text-decoration: none;
+    padding: 1em;
+    margin-bottom: 0.75em;
+    border: 1px solid var(--color-primary);
+    border-radius: 0.5em;
+    background-color: var(--background);
+    cursor: pointer;
+    font-size: 1.333em;
 }
 
 .button:hover {
-  background-color: var(--background-secondary);
+    background-color: var(--background-secondary);
 }
 
 .footer {
-  opacity: 50%;
+    opacity: 50%;
 }
 </style>

src/components/CustomButton.vue

@@ -1,36 +1,36 @@
 <script setup lang="ts">
 interface Props {
-  href?: string;
-  color?: string;
+    href?: string;
+    color?: string;
 }
 
 defineProps<Props>();
 </script>
 
 <template>
-  <component
-    :is="href ? 'a' : 'div'"
-    :class="`button ${color ? 'b-' + color + ' ' + color : ''}`"
-  >
-    <slot></slot>
-  </component>
+    <component
+        :is="href ? 'a' : 'div'"
+        :class="`button ${color ? 'b-' + color + ' ' + color : ''}`"
+    >
+        <slot></slot>
+    </component>
 </template>
 
 <style scoped>
 .button {
-  display: block;
-  width: 100%;
-  text-decoration: none;
-  padding: 1em;
-  margin-bottom: 0.75em;
-  border: 1px solid var(--color-primary);
-  border-radius: 0.5em;
-  background-color: var(--background);
-  cursor: pointer;
-  font-size: 1.333em;
+    display: block;
+    width: 100%;
+    text-decoration: none;
+    padding: 1em;
+    margin-bottom: 0.75em;
+    border: 1px solid var(--color-primary);
+    border-radius: 0.5em;
+    background-color: var(--background);
+    cursor: pointer;
+    font-size: 1.333em;
 }
 
 .button:hover {
-  background-color: var(--background-secondary);
+    background-color: var(--background-secondary);
 }
 </style>

src/components/LucideIcon.vue

@@ -3,27 +3,30 @@ import { computed, onMounted } from "vue";
 import * as icons from "lucide-vue-next";
 
 interface Props {
-  name: string;
-  color?: string;
-  strokeWidth?: string;
-  defaultClass?: string;
+    name: string;
+    color?: string;
+    strokeWidth?: string;
+    defaultClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: "currentColor",
-  strokeWidth: "2",
-  defaultClass: "lucide",
+    color: "currentColor",
+    strokeWidth: "2",
+    defaultClass: "lucide",
 });
 
 function kebab2camel(kebab: string): string {
-  return kebab
-    .split("-")
-    .map((item) => item.charAt(0).toUpperCase() + item.slice(1).toLowerCase())
-    .join("");
+    return kebab
+        .split("-")
+        .map(
+            (item) =>
+                item.charAt(0).toUpperCase() + item.slice(1).toLowerCase(),
+        )
+        .join("");
 }
 
 onMounted(() => {
-  console.log(kebab2camel(props.name));
+    console.log(kebab2camel(props.name));
 });
 
 // @ts-expect-error: cannot infer type of all exported data
@@ -31,10 +34,10 @@ const icon = computed(() => icons[kebab2camel(props.name)]);
 </script>
 
 <template>
-  <component
-    :is="icon"
-    :color="color"
-    :stroke-width="strokeWidth"
-    :default-class="defaultClass"
-  />
+    <component
+        :is="icon"
+        :color="color"
+        :stroke-width="strokeWidth"
+        :default-class="defaultClass"
+    />
 </template>