Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Add support for vue-router #288

mghmay started this conversation in General
Add support for vue-router #288
@mghmay mghmay
Mar 11, 2024 · 2 comments
Return to top
Discussion options

mghmay
Mar 11, 2024

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.
You must be logged in to vote

Replies: 2 comments

Comment options

alienforhumans
May 4, 2024

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.
You must be logged in to vote
0 replies
Comment options

mrholek
May 4, 2024
Maintainer

@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>
You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
3 participants
@mghmay @mrholek @alienforhumans
Converted from issue

This discussion was converted from issue #285 on May 17, 2024 12:48.

Morty Proxy This is a proxified and sanitized view of the page, visit original site.