13Jul24 run prettier and add prettier ignore

Author: vchan14

.prettierignore

@@ -0,0 +1 @@
+src/views/introduction/DynamicAttributes.vue

src/App.vue

@@ -41,9 +41,11 @@ watch(
           :name="example.name"
         />
       </div>
-<!--      <RouterButton to-path="/test" name="test me" />-->
+      <!--      <RouterButton to-path="/test" name="test me" />-->
 
-      <p class="text-gray-800 font-bold text-center dark:text-neutral-400 text-sm">
+      <p
+        class="text-center text-sm font-bold text-gray-800 dark:text-neutral-400"
+      >
         <a href="https://github.com/vchan14/MyVueExamples" target="_blank">
           <img class="inline w-4" :src="githubIcon" alt="github icon" />
         </a>

src/exampleButtons.js

@@ -4,7 +4,7 @@ import { StyleButtonExamples } from "@/factory/StylesFactory.js";
 import { RenderingButtonExamples } from "@/factory/RenderingFactory.js";
 // import { OthersButtonExamples } from "@/factory/OthersFactory.js";
 import { PropsButtonExamples } from "@/factory/PropsFactory.js";
-import {EventHandlingExamples} from "@/factory/EventHandlingFactory.js";
+import { EventHandlingExamples } from "@/factory/EventHandlingFactory.js";
 
 export const ALL_EXAMPLES = [
   IntroductionButtonExamples,

src/factory/EventHandlingFactory.js

@@ -4,12 +4,14 @@ const path = "/src/views/eventhandling/";
 const sectionName = "Event Handling";
 const link = "https://vuejs.org/guide/essentials/event-handling.html";
 
-const singleFileComponents = import.meta.glob("/src/views/eventhandling/*.vue", {
-  eager: true,
-  query: "?raw",
-  import: "default",
-});
-
+const singleFileComponents = import.meta.glob(
+  "/src/views/eventhandling/*.vue",
+  {
+    eager: true,
+    query: "?raw",
+    import: "default",
+  },
+);
 
 // Import components from folders
 const folderComponents = import.meta.glob("/src/views/eventhandling/*/*.vue", {
@@ -18,14 +20,15 @@ const folderComponents = import.meta.glob("/src/views/eventhandling/*/*.vue", {
   import: "default",
 });
 
-const { ButtonExamples: EventHandlingExamples, RouterList: EventHandlingRouterList } =
-  generateButtonExamplesAndRouterList(
-    path,
-    singleFileComponents,
-    folderComponents,
-    sectionName,
-    link,
-  );
+const {
+  ButtonExamples: EventHandlingExamples,
+  RouterList: EventHandlingRouterList,
+} = generateButtonExamplesAndRouterList(
+  path,
+  singleFileComponents,
+  folderComponents,
+  sectionName,
+  link,
+);
 
 export { EventHandlingExamples, EventHandlingRouterList };
-

src/factory/IntroductionFactory.js

@@ -1,6 +1,5 @@
 import { generateButtonExamplesAndRouterList } from "@/factoryUtil.js";
 
-
 const orderedList = [
   "Hello World",
   "Raw Html",
@@ -26,17 +25,17 @@ const folderComponents = import.meta.glob("/src/views/introduction/*/*.vue", {
   import: "default",
 });
 
-const { ButtonExamples: IntroductionButtonExamples, RouterList: IntroductionRouterList } =
-  generateButtonExamplesAndRouterList(
-    path,
-    singleFileComponents,
-    folderComponents,
-    sectionName,
-    link,
-    orderedList,
-  );
-
+const {
+  ButtonExamples: IntroductionButtonExamples,
+  RouterList: IntroductionRouterList,
+} = generateButtonExamplesAndRouterList(
+  path,
+  singleFileComponents,
+  folderComponents,
+  sectionName,
+  link,
+  orderedList,
+);
 
 console.log(IntroductionButtonExamples, IntroductionRouterList);
 export { IntroductionButtonExamples, IntroductionRouterList };
-

src/factory/OthersFactory.js

@@ -1,10 +1,7 @@
-const orderedList = [
-];
-
+const orderedList = [];
 
 import { generateButtonExamplesAndRouterList } from "@/factoryUtil.js";
 
-
 const path = "/src/views/styles/";
 const sectionName = "Others";
 const link = "https://vuejs.org/guide/essentials/class-and-style.html";
@@ -31,8 +28,4 @@ const { ButtonExamples: OthersButtonExamples, RouterList: othersRouterList } =
     orderedList,
   );
 
-
 export { OthersButtonExamples, othersRouterList };
-
-
-

src/factory/ReativityFactory.js

@@ -2,7 +2,6 @@ const orderedList = ["Reactive Primitives", "Reactive Objects", "Computed Ref"];
 
 import { generateButtonExamplesAndRouterList } from "@/factoryUtil.js";
 
-
 const path = "/src/views/reactivity/";
 const sectionName = "Reactivity";
 const link = "https://vuejs.org/guide/essentials/reactivity-fundamentals.html";
@@ -19,16 +18,16 @@ const folderComponents = import.meta.glob("/src/views/reactivity/*/*.vue", {
   import: "default",
 });
 
-const { ButtonExamples: ReactivityButtonExamples, RouterList: ReactivityRouterList } =
-  generateButtonExamplesAndRouterList(
-    path,
-    singleFileComponents,
-    folderComponents,
-    sectionName,
-    link,
-    orderedList,
-  );
-
+const {
+  ButtonExamples: ReactivityButtonExamples,
+  RouterList: ReactivityRouterList,
+} = generateButtonExamplesAndRouterList(
+  path,
+  singleFileComponents,
+  folderComponents,
+  sectionName,
+  link,
+  orderedList,
+);
 
 export { ReactivityButtonExamples, ReactivityRouterList };
-

src/factory/RenderingFactory.js

@@ -7,7 +7,6 @@ const orderedList = [
 
 import { generateButtonExamplesAndRouterList } from "@/factoryUtil.js";
 
-
 const path = "/src/views/rendering/";
 const sectionName = "Rendering";
 const link = "https://vuejs.org/guide/essentials/conditional.html";
@@ -24,17 +23,16 @@ const folderComponents = import.meta.glob("/src/views/rendering/*/*.vue", {
   import: "default",
 });
 
-const { ButtonExamples: RenderingButtonExamples, RouterList: RenderingRouterList } =
-  generateButtonExamplesAndRouterList(
-    path,
-    singleFileComponents,
-    folderComponents,
-    sectionName,
-    link,
-    orderedList,
-  );
-
+const {
+  ButtonExamples: RenderingButtonExamples,
+  RouterList: RenderingRouterList,
+} = generateButtonExamplesAndRouterList(
+  path,
+  singleFileComponents,
+  folderComponents,
+  sectionName,
+  link,
+  orderedList,
+);
 
 export { RenderingButtonExamples, RenderingRouterList };
-
-

src/factory/StylesFactory.js

@@ -6,10 +6,8 @@ const orderedList = [
   "Scoped Styles",
 ];
 
-
 import { generateButtonExamplesAndRouterList } from "@/factoryUtil.js";
 
-
 const path = "/src/views/styles/";
 const sectionName = "Styles";
 const link = "https://vuejs.org/guide/essentials/class-and-style.html";
@@ -36,7 +34,4 @@ const { ButtonExamples: StyleButtonExamples, RouterList: StyleRouterList } =
     orderedList,
   );
 
-
 export { StyleButtonExamples, StyleRouterList };
-
-

src/factoryUtil.js

@@ -25,12 +25,15 @@ export function generateButtonExamplesAndRouterList(
   orderedList = [],
 ) {
   // Generate examples and router objects for single file components
-  const filenames = Object.keys(singleFileComponents).map((key) => { return key.replace(basePath, "").replace(".vue", ""); });
+  const filenames = Object.keys(singleFileComponents).map((key) => {
+    return key.replace(basePath, "").replace(".vue", "");
+  });
 
   let exampleList = filenames.map((filename) => createExample(filename));
 
-
-  let routerList = filenames.map(filename => createRouterObj(filename, singleFileComponents, basePath));
+  let routerList = filenames.map((filename) =>
+    createRouterObj(filename, singleFileComponents, basePath),
+  );
 
   // Extract folder names and generate examples for them
   const folderNames = extractUniqueFolderNames(folderComponents);

src/router/index.js

@@ -6,7 +6,7 @@ import { RenderingRouterList } from "@/factory/RenderingFactory.js";
 import TestView from "@/views/TestView.vue";
 // import { othersRouterList } from "@/factory/OthersFactory.js";
 import { PropsRouterList } from "@/factory/PropsFactory.js";
-import {EventHandlingRouterList} from "@/factory/EventHandlingFactory.js";
+import { EventHandlingRouterList } from "@/factory/EventHandlingFactory.js";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

src/views/eventhandling/BasicEventHandling.vue

@@ -19,4 +19,4 @@ function incrementCount(event) {
   count.value++;
   console.log("Event:", event);
 }
-</script>
+</script>

src/views/introduction/DynamicAttributes.vue

@@ -6,12 +6,10 @@
 </template>
 
 <script setup>
-const rickGif =
-  "https://media.tenor.com/xo0jvr4bbTMAAAAi/rick-astley-rickroll.gif";
+const rickGif = "https://media.tenor.com/xo0jvr4bbTMAAAAi/rick-astley-rickroll.gif";
 const rickAlt = "Rick Astley";
 
-const catGif =
-  "https://media.glamour.com/photos/580e1dc07a52574c7ef91071/master/w_2580%2Cc_limit/giphy%2520(1).gif";
+const catGif = "https://media.glamour.com/photos/580e1dc07a52574c7ef91071/master/w_2580%2Cc_limit/giphy%2520(1).gif";
 const catAlt = "cat";
 </script>
 

src/views/rendering/IfConditional.vue

@@ -13,4 +13,4 @@ const user = ref({ loggedIn: false });
 const toggle = () => {
   user.value.loggedIn = !user.value.loggedIn;
 };
-</script>
+</script>

src/views/rendering/VShowDirective.vue

@@ -33,4 +33,4 @@ const toggleIf = ref(true);
 .container div {
   display: flex;
 }
-</style>
+</style>