6. Single Root Components - Vue JS Optimisations

App.vue

<template>
  <ul>
    <NavBarRoutes :routes="persistentNavRoutes />

    <NavBarRoutes
      v-if="loggedIn"
      :routes="loggedInNavRoutes" />

    <NavBarRoutes
      v-else
      :routes="loggedOutNavRoutes" />
  </ul>
</template>

NavBarRoutes.vue

<template>
  <li
    v-for="route in routes"
    :key="route.name">
    <router-link :to="route">
      {{ route.title }}
    </router-link>
  </li>
</template>

<!-- Using a functional component with render we can return a multi-root component

<script>
export default {
  functional: true,
  render(h, { props }) {
    <li key={route.name}>
    <router-link to={route}>
      {router.title}
    </router-link>
  }
}
</script>