[POC] Dynamic component by current route

_page.vue

<template>
  <Component :is="is" />
</template>

<script>
import layout from '@/helpers/layout'
const components = {
  vBuilding: () => import('@/components/pages/Building.vue' /* webpackChunkName: `building` */),
  vSeminaire: () => import('@/components/pages/Seminaire.vue' /* webpackChunkName: 'components/page/seminaire' */),
  vCoaching: () => import('@/components/pages/Coaching.vue' /* webpackChunkName: 'components/page/coaching' */),
  vDestination: () => import('@/components/pages/Destination.vue' /* webpackChunkName: 'components/page/destination' */),
  vDefault: () => import('@/components/pages/Default.vue' /* webpackChunkName: 'components/page/default' */)
  // ...
}
export default {
  data: () => ({
    layout: 'Default'
  }),

  computed: {
    is() {
      return 'v' + layout(this.$route.params)
    }
  },

  components
}
</script>

layout.js

export default params => {
  const { page, slug = null }  = params

  if (page.startsWith('team-building-')) {
    return 'Destination'
  } else if (page.startsWith('animation-seminaire-')) {
    return 'Destination'
  } else if (page.startsWith('coaching-entreprise-')) {
    return 'Destination'
  } else if ('destinations-team-building' === page) {
    return 'Building'
  } else if ('animation-seminaire' === page) {
    return 'Seminaire'
  } else if ('coaching-entreprise' === page) {
    return 'Coaching'
  } else {
    return 'Default'
  }

}