Vue Router Loop - Loop over your router to create a nav bar (or other component) dynamically

NavBar.vue

<div
  v-for="route in routes"
  :key="route.path"
  class="col flex items-center justify-between p-6"
>
  <router-link
    class=""
    :to="route"
    exact-active-class="font-bold"
    exact
  >
    {{ route.name }}
  </router-link>

</div>

<script>
export default {
	name: 'DynamicallyRenderedNavBar',
	computed: {
		routes: function() {
			let routes = [];
			for (let i in this.$router.options.routes) {
				if (!this.$router.options.routes.hasOwnProperty(i)) {
					continue;
				}
				let route = this.$router.options.routes[i];
				if (route.hasOwnProperty('name')) {
					routes.push(route);
				}
			}
			return routes;
		},
	},
}
</script>