Adjust formatting accordingly with Prettier config

src/App.vue

@@ -7,5 +7,5 @@
 </template>
 
 <script setup lang="ts">
-  import HelloWorld from '@/components/HelloWorld.vue'
+import HelloWorld from '@/components/HelloWorld.vue';
 </script>

src/components/HelloWorld.vue

@@ -18,11 +18,7 @@
             target="_blank"
             variant="text"
           >
-            <v-icon
+            <v-icon icon="mdi-view-dashboard" size="large" start />
-              icon="mdi-view-dashboard"
-              size="large"
-              start
-            />
 
             Components
           </v-btn>
@@ -38,11 +34,7 @@
             target="_blank"
             variant="flat"
           >
-            <v-icon
+            <v-icon icon="mdi-speedometer" size="large" start />
-              icon="mdi-speedometer"
-              size="large"
-              start
-            />
 
             Get Started
           </v-btn>
@@ -56,11 +48,7 @@
             target="_blank"
             variant="text"
           >
-            <v-icon
+            <v-icon icon="mdi-account-group" size="large" start />
-              icon="mdi-account-group"
-              size="large"
-              start
-            />
 
             Community
           </v-btn>
@@ -71,5 +59,5 @@
 </template>
 
 <script setup lang="ts">
-  //
+//
 </script>

src/layouts/default/Default.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script lang="ts" setup>
-  import DefaultView from './View.vue'
+import DefaultView from './View.vue';
 </script>

src/layouts/default/View.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script lang="ts" setup>
-  //
+//
 </script>

src/main.ts

@@ -5,16 +5,16 @@
  */
 
 // Components
-import App from './App.vue'
+import App from './App.vue';
 
 // Composables
-import { createApp } from 'vue'
+import { createApp } from 'vue';
 
 // Plugins
-import { registerPlugins } from '@/plugins'
+import { registerPlugins } from '@/plugins';
 
-const app = createApp(App)
+const app = createApp(App);
 
-registerPlugins(app)
+registerPlugins(app);
 
-app.mount('#app')
+app.mount('#app');

src/plugins/index.ts

@@ -5,16 +5,14 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
+import { loadFonts } from './webfontloader';
-import vuetify from './vuetify'
+import vuetify from './vuetify';
-import router from '../router'
+import router from '../router';
 
 // Types
-import type { App } from 'vue'
+import type { App } from 'vue';
 
-export function registerPlugins (app: App) {
+export function registerPlugins(app: App) {
-  loadFonts()
+  loadFonts();
-  app
+  app.use(vuetify).use(router);
-    .use(vuetify)
-    .use(router)
 }

src/plugins/vuetify.ts

@@ -5,11 +5,11 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css'
+import '@mdi/font/css/materialdesignicons.css';
-import 'vuetify/styles'
+import 'vuetify/styles';
 
 // Composables
-import { createVuetify } from 'vuetify'
+import { createVuetify } from 'vuetify';
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
@@ -18,9 +18,9 @@ export default createVuetify({
       light: {
         colors: {
           primary: '#1867C0',
-          secondary: '#5CBBF6',
+          secondary: '#5CBBF6'
-        },
+        }
-      },
+      }
-    },
+    }
-  },
+  }
-})
+});

src/plugins/webfontloader.ts

@@ -4,12 +4,14 @@
  * webfontloader documentation: https://github.com/typekit/webfontloader
  */
 
- export async function loadFonts () {
+export async function loadFonts() {
-  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+  const webFontLoader = await import(
+    /* webpackChunkName: "webfontloader" */ 'webfontloader'
+  );
 
   webFontLoader.load({
     google: {
-      families: ['Roboto:100,300,400,500,700,900&display=swap'],
+      families: ['Roboto:100,300,400,500,700,900&display=swap']
-    },
+    }
-  })
+  });
 }

src/router/index.ts

@@ -1,5 +1,5 @@
 // Composables
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
 
 const routes = [
   {
@@ -12,15 +12,16 @@ const routes = [
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () =>
-      },
+          import(/* webpackChunkName: "home" */ '@/views/Home.vue')
-    ],
+      }
-  },
+    ]
-]
+  }
+];
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
+  routes
-})
+});
 
-export default router
+export default router;

src/views/Home.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script lang="ts" setup>
-  import HelloWorld from '@/components/HelloWorld.vue'
+import HelloWorld from '@/components/HelloWorld.vue';
 </script>

src/vite-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<{}, {}, any>;
-  export default component
+  export default component;
 }