Add questionnaire pages for each life event and breadcrumb nav

components/Breadcrumb.vue

@@ -0,0 +1,67 @@
+<template>
+  <nav v-if="$route.fullPath !=='/'" class="usa-breadcrumb" aria-label="Breadcrumbs,,">
+    <ol class="usa-breadcrumb__list"
+      vocab="http://schema.org/"
+      typeof="BreadcrumbList">
+      <li class="usa-breadcrumb__list-item"
+      property="itemListElement" typeof="ListItem">
+          <nuxt-link class="usa-breadcrumb__link" property="item" typeof="WebPage"
+            to="/">
+            <span property="name">Home</span>
+          </nuxt-link>
+        <meta property="position" content="1" />
+      </li>
+      <li v-for="(crumb, index) in crumbs"
+        :key="index"
+        class="usa-breadcrumb__list-item"
+        property="itemListElement"
+        typeof="ListItem">
+        <template v-if="$route.fullPath === crumb.path">
+          <span property="name">{{
+            $route.fullPath === crumb.path && title !== null ? title : crumb.title
+          }}</span>
+        </template>
+        <template v-else>
+          <nuxt-link class="usa-breadcrumb__link" property="item" typeof="WebPage"
+            :to="crumb.path">
+            <span property="name">{{
+              $route.fullPath === crumb.path && title !== null ? title : crumb.title
+            }}</span>
+          </nuxt-link>
+          <meta property="position" :content="index + 2" />
+        </template>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+
+const _ = require('lodash');
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    crumbs () {
+      const fullPath = _.escapeRegExp(this.$route.fullPath);
+      const segments = fullPath.substring(1).split('/');
+      const crumbs = [];
+      let path = '';
+      segments.forEach((segment, index) => {
+        path = `${path}/${segment}`;
+        const match = this.$router.match(path);
+        crumbs.push({
+          title: _.startCase(segment),
+          ...match,
+        });
+      });
+      return crumbs;
+    },
+  },
+}
+</script>

components/Header.vue

@@ -162,6 +162,13 @@
         </div>
       </nav>
     </header>
+    <div class="grid-container">
+      <div class="grid-row">
+        <div class="grid-col margin-top-2">
+            <Breadcrumb />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
   collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue'
+    '<rootDir>/pages/**/*.vue',
   ],
   coverageThreshold: {
     global: {

layouts/default.vue

@@ -11,7 +11,7 @@
 <script>
 export default {
   head: {
-    script: [{ src: "./assets/js/uswds-init.min.js" }]
+    script: [{ src: "/assets/js/uswds-init.min.js" }]
   }
 };
 </script>