Fix vue code fences (#1420)

Author: philhawksworth

examples/tutorials/vue.md

@@ -203,10 +203,10 @@ at `/:dinosaur`.
 Finally, you can delete all of the code in the `src/App.vue` file to and update
 it to include only the `<RouterView>` component:
 
-```vue title="App.vue"
+```html title="App.vue"
 <template>
   <RouterView />
-</template>;
+</template>
 ```
 
 ### The components
@@ -231,25 +231,27 @@ up earlier and render them as links using the
 `lang="ts"` attribute on the script tag.) Add the following code to the
 `Dinosaurs.vue` file:
 
-```vue title="Dinosaurs.vue"
+```html title="Dinosaurs.vue"
 <script lang="ts">
-import { defineComponent } from 'vue';
+  import { defineComponent } from "vue";
 
-export default defineComponent({
+  export default defineComponent({
     async setup() {
-        const res = await fetch("http://localhost:8000/dinosaurs")
-        const dinosaurs = await res.json() as Dinosaur[];
-        return { dinosaurs };
-    }
-});
+      const res = await fetch("http://localhost:8000/dinosaurs");
+      const dinosaurs = await res.json() as Dinosaur[];
+      return { dinosaurs };
+    },
+  });
 </script>
 
 <template>
-    <div v-for="dinosaur in dinosaurs" :key="dinosaur.name">
-        <RouterLink :to="{ name: 'Dinosaur', params: { dinosaur: `${dinosaur.name.toLowerCase()}` } }" >
-            {{ dinosaur.name }}
-        </RouterLink>
-    </div>
+  <div v-for="dinosaur in dinosaurs" :key="dinosaur.name">
+    <RouterLink
+      :to="{ name: 'Dinosaur', params: { dinosaur: `${dinosaur.name.toLowerCase()}` } }"
+    >
+      {{ dinosaur.name }}
+    </RouterLink>
+  </div>
 </template>
 ```
 
@@ -265,9 +267,9 @@ uniquely identify each dinosaur.
 The homepage will contain a heading and then it will render the `Dinosaurs`
 component. Add the following code to the `HomePage.vue` file:
 
-```vue title="HomePage.vue"
+```html title="HomePage.vue"
 <script setup lang="ts">
-import Dinosaurs from './Dinosaurs.vue';
+  import Dinosaurs from "./Dinosaurs.vue";
 </script>
 <template>
   <h1>Welcome to the Dinosaur App! 🦕</h1>
@@ -308,28 +310,30 @@ type ComponentData = {
 
 Then update the `Dinosaur.vue` file:
 
-```vue title="Dinosaur.vue"
+```html title="Dinosaur.vue"
 <script lang="ts">
-import { defineComponent } from 'vue';
+  import { defineComponent } from "vue";
 
-export default defineComponent({
+  export default defineComponent({
     props: { dinosaur: String },
     data(): ComponentData {
-        return { 
-            dinosaurDetails: null 
-        };
+      return {
+        dinosaurDetails: null,
+      };
     },
     async mounted() {
-        const res = await fetch(`http://localhost:8000/dinosaurs/${this.dinosaur}`);
-        this.dinosaurDetails = await res.json();
-    }
-});
+      const res = await fetch(
+        `http://localhost:8000/dinosaurs/${this.dinosaur}`,
+      );
+      this.dinosaurDetails = await res.json();
+    },
+  });
 </script>
 
 <template>
-    <h1>{{ dinosaurDetails?.name }}</h1>
-    <p>{{ dinosaurDetails?.description }}</p>
-    <RouterLink to="/">🠠 Back to all dinosaurs</RouterLink>
+  <h1>{{ dinosaurDetails?.name }}</h1>
+  <p>{{ dinosaurDetails?.description }}</p>
+  <RouterLink to="/">🠠 Back to all dinosaurs</RouterLink>
 </template>
 ```