Example

<template>
  <Relations>
    <Relation right="users" :route-fn="visitUsers" fas :icon="usersIcon">
      {{ $t('customers.relation.customerUsers') }}
    </Relation>
    <Relation right="projects" :route-fn="visitProjects" fas :icon="projectsIcon">
      {{ $t('customers.relation.projects') }}
    </Relation>
  </Relations>
</template>

<script>
import { Relations, Relation, defineRelation } from '@jdi/vue-backoffice-library'

export default {
  components: {
    Relations,
    Relation
  },
  setup(_, context) {
    const [usersIcon, visitUsers] = defineRelation(context, 'users')
    const [projectsIcon, visitProjects] = defineRelation(context, 'projects')

    return {
      usersIcon,
      projectsIcon,
      visitUsers,
      visitProjects
    }
  }
}
</script>