Change Vue 2 and Vue 3 examples to compact mode (#190)

This makes the code more comparable to Svelte, React, Alpine, etc.

content/2-templating/2-styling/vue2/CssStyle.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
-    <h1 class="title">
-      I am red
-    </h1>
-    <button style="font-size: 10rem">
-      I am a button
-    </button>
+    <h1 class="title">I am red</h1>
+    <button style="font-size: 10rem">I am a button</button>
   </div>
 </template>
 

content/2-templating/2-styling/vue3/CssStyle.vue

@@ -1,10 +1,6 @@
 <template>
-  <h1 class="title">
-    I am red
-  </h1>
-  <button style="font-size: 10rem">
-    I am a button
-  </button>
+  <h1 class="title">I am red</h1>
+  <button style="font-size: 10rem">I am a button</button>
 </template>
 
 <style scoped>

content/2-templating/4-event-click/vue2/Counter.vue

@@ -16,8 +16,6 @@ export default {
 <template>
   <div>
     <p>Counter: {{ count }}</p>
-    <button @click="incrementCount">
-      +1
-    </button>
+    <button @click="incrementCount">+1</button>
   </div>
 </template>

content/2-templating/4-event-click/vue3/Counter.vue

@@ -9,7 +9,5 @@ function incrementCount() {
 
 <template>
   <p>Counter: {{ count }}</p>
-  <button @click="incrementCount">
-    +1
-  </button>
+  <button @click="incrementCount">+1</button>
 </template>

content/2-templating/6-conditional/vue2/TrafficLight.vue

@@ -21,9 +21,7 @@ export default {
 
 <template>
   <div>
-    <button @click="nextLight">
-      Next light
-    </button>
+    <button @click="nextLight">Next light</button>
     <p>Light is: {{ light }}</p>
     <p>
       You must

content/2-templating/6-conditional/vue3/TrafficLight.vue

@@ -11,9 +11,7 @@ function nextLight() {
 </script>
 
 <template>
-  <button @click="nextLight">
-    Next light
-  </button>
+  <button @click="nextLight">Next light</button>
   <p>Light is: {{ light }}</p>
   <p>
     You must

content/4-component-composition/2-emit-to-parent/vue2/AnswerButton.vue

@@ -13,12 +13,8 @@ export default {
 
 <template>
   <div>
-    <button @click="clickYes">
-      YES
-    </button>
+    <button @click="clickYes">YES</button>
 
-    <button @click="clickNo">
-      NO
-    </button>
+    <button @click="clickNo">NO</button>
   </div>
 </template>

content/4-component-composition/2-emit-to-parent/vue3/AnswerButton.vue

@@ -11,11 +11,7 @@ function clickNo() {
 </script>
 
 <template>
-  <button @click="clickYes">
-    YES
-  </button>
+  <button @click="clickYes">YES</button>
 
-  <button @click="clickNo">
-    NO
-  </button>
+  <button @click="clickNo">NO</button>
 </template>

content/7-webapp-features/2-fetch-data/vue2/App.vue

@@ -30,12 +30,8 @@ export default {
 </script>
 
 <template>
-  <p v-if="isLoading">
-    Fetching users...
-  </p>
-  <p v-else-if="error">
-    An error ocurred while fetching users
-  </p>
+  <p v-if="isLoading">Fetching users...</p>
+  <p v-else-if="error">An error ocurred while fetching users</p>
   <ul v-else-if="users">
     <li
       v-for="user in users"

content/7-webapp-features/2-fetch-data/vue3/App.vue

@@ -5,12 +5,8 @@ const { isLoading, error, data: users } = useFetchUsers();
 </script>
 
 <template>
-  <p v-if="isLoading">
-    Fetching users...
-  </p>
-  <p v-else-if="error">
-    An error ocurred while fetching users
-  </p>
+  <p v-if="isLoading">Fetching users...</p>
+  <p v-else-if="error">An error ocurred while fetching users</p>
   <ul v-else-if="users">
     <li
       v-for="user in users"

frameworks.mjs

@@ -62,6 +62,7 @@ export default [
       extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
       rules: {
         "vue/multi-word-component-names": "off",
+        "vue/singleline-html-element-content-newline": "off",
       },
     },
     playgroundURL: "https://sfc.vuejs.org",
@@ -154,6 +155,7 @@ export default [
       extends: ["eslint:recommended", "plugin:vue/recommended"],
       rules: {
         "vue/multi-word-component-names": "off",
+        "vue/singleline-html-element-content-newline": "off",
       },
     },
     playgroundURL: "",