Default formatter

.vscode/settings.json

@@ -14,5 +14,8 @@
     ],
     "[javascript]": {
         "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }

src/pages/Customer/CustomerList.vue

@@ -71,9 +71,14 @@ function navigate(id) {
                         <q-btn flat round color="accent" icon="preview" />
                         <q-btn flat round color="accent" icon="vn:ticket" />
                         <q-card-actions>
-                            <q-btn color="grey" round flat dense
+                            <q-btn
+                                color="grey"
+                                round
+                                flat
+                                dense
                                 :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-                                @click="customer.expanded.value = !customer.expanded.value" />
+                                @click="customer.expanded.value = !customer.expanded.value"
+                            />
                         </q-card-actions>
                     </q-card-actions>
                 </q-item>

src/pages/Customer/CustomerMain.vue

@@ -4,12 +4,19 @@ import LeftMenu from 'src/components/LeftMenu.vue';
 
 const drawer = ref(false);
 const miniState = ref(true);
-
 </script>
 
 <template>
-    <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
+    <q-drawer
-        @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+        v-model="drawer"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>

src/pages/Dashboard/Dashboard.vue

@@ -6,12 +6,19 @@ const slide = ref('style');
 const slideText = 'Description text';
 const drawer = ref(false);
 const miniState = ref(true);
-
 </script>
 
 <template>
-    <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
+    <q-drawer
-        @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+        v-model="drawer"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
@@ -28,9 +35,19 @@ const miniState = ref(true);
             <div class="row items-start wrap q-col-gutter-md q-mb-lg">
                 <div class="col-12 col-md">
                     <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                    <q-carousel v-model="slide" transition-prev="scale" transition-next="scale" swipeable animated
+                    <q-carousel
-                        control-color="white" navigation padding arrows height="300px"
+                        v-model="slide"
-                        class="bg-orange-3 text-white shadow-1 rounded-borders">
+                        transition-prev="scale"
+                        transition-next="scale"
+                        swipeable
+                        animated
+                        control-color="white"
+                        navigation
+                        padding
+                        arrows
+                        height="300px"
+                        class="bg-orange-3 text-white shadow-1 rounded-borders"
+                    >
                         <q-carousel-slide name="style" class="column no-wrap flex-center">
                             <q-icon name="style" size="56px" />
                             <div class="q-mt-md text-center">{{ slideText }}</div>
@@ -79,5 +96,4 @@ const miniState = ref(true);
     </q-page-container>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-</style>

src/pages/Ticket/TicketList.vue

@@ -71,9 +71,14 @@ function navigate(id) {
                         <q-btn flat round color="accent" icon="preview" />
                         <q-btn flat round color="accent" icon="vn:ticket" />
                         <q-card-actions>
-                            <q-btn color="grey" round flat dense
+                            <q-btn
+                                color="grey"
+                                round
+                                flat
+                                dense
                                 :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-                                @click="customer.expanded.value = !customer.expanded.value" />
+                                @click="customer.expanded.value = !customer.expanded.value"
+                            />
                         </q-card-actions>
                     </q-card-actions>
                 </q-item>

src/pages/Ticket/TicketMain.vue

@@ -7,8 +7,16 @@ const miniState = ref(true);
 </script>
 
 <template>
-    <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
+    <q-drawer
-        @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+        v-model="drawer"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>