Add support for vue-router

[mghmay]

I'd like to clarify the status of vue-router and coreui.

According to this thread it hasn't been implemented: #177

But according to the documentation we can turn a link into a router link by passing the to prop: https://coreui.io/vue/docs/3.2/components/link.html#router-link-props

I'm currently trying to get coreui to work with vue-router and as far as I can tell this currently isn't working. It would be very useful to pass a route using a to prop, it would make the code a lot neater too.

Failing that could the documentation be updated? Perhaps with detailed instructions about how to use router-link with coreui.

[alienforhumans]

Hi, as I see in CoreUI v4 code it is still impossible. You can use something like:

<template>
  <CSidebar unfoldable>
    <CSidebarNav>
      <CNavItem>
        <router-link
          class="nav-link"
          to="/"
        >
          <CIcon  customClassName="nav-icon" :icon="cilSpeedometer"/> Dashboard
        </router-link>
      </CNavItem>
    </CSidebarNav>
  </CSidebar>
</template>

It is important not to pass the "href" attribute for the navigation element.

[mrholek]

@mghmay @alienforhumans you can also try something like this

<CSidebar>
  <CSidebarNav>
    <router-link v-slot="{ href, navigate, isActive }" to="./compose" custom>
      <CNavItem :active="isActive" :href="href" @click="navigate">
        <CIcon custom-class-name="nav-icon" icon="cil-pencil" />
        Compose
      </CNavItem>
    </router-link>
    <router-link v-slot="{ href, navigate, isActive }" to="./inbox" custom>
      <CNavItem :active="isActive" :href="href" @click="navigate">
        <CIcon custom-class-name="nav-icon" icon="cil-inbox" />
        Inbox
        <CBadge class="ms-auto" color="danger">4</CBadge>
      </CNavItem>
    </router-link>
</CSidebar>