Add basic Vue logic to Vehicles/Locations/People

pages/locations/_id.vue

@@ -1,8 +1,31 @@
-<template> </template>
+<template>
+  <div>
+    {{ location }}
+  </div>
+</template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
-  name: "Location"
+  name: "Location",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.location.name}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    await store.dispatch("getLocation", params.id);
+  },
+  computed: {
+    ...mapState(["location"])
+  }
 };
 </script>