VueVentus Docs

Appearance

VvRouterLink Component ​

The VvRouterLink Component is modeled after the VvAnchor component, but instead uses a Vue Router router-link tag/props instead of an a tag/props like the VvAnchor component uses.

The VvRouterLink Component provides variety of props and config module based settings to make a variety of anchor styled elements for applications with an extremely DRY implementation of atomic classes.

Import ​

To import a VvRouterLink Component installed by the vueventus CLI or vv-update CLI:

javascript
// ./src/components/SomeComponent.vue
import VvRouterLink from './vv/anchors/VvRouterLink.vue'

TIP

CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.

Prop: button ​

Type: Boolean
Default: false

When the VvRouterLink Component button prop value is true, the output element changes from normal anchor element styling set in the Anchor Config Module to button styling that is driven by the Tailwind CSS classes in the Button Config Module.

Syntax: ​

html
<VvRouterLink
    :button="true"
    palette="solid"
    color="primary"
    to="/"
>
    VvRouterLink
</VvRouterLink>

Result: ​

VvRouterLink

Prop: buttonBlock ​

Type: Boolean
Default: false

The VvRouterLink Component buttonBlock prop sets the component instance to use block-level base classes making the returned <a> element a full width and block-level button styled element.

Syntax: ​

html
<VvRouterLink
    :button="true"
    :button-block="true"
    palette="solid"
    color="primary"
    to="/"
>
    VvRouterLink
</VvRouterLink>

Result: ​

VvRouterLink

Prop: buttonFab ​

Type: Boolean
Default: false

The VvRouterLink Component buttonFab prop sets the component instance to use base classes with equal width and height classes making the returned <anchor> element a square element that can also be styled as a circle using a Tailwind CSS .rounded-full class.

Syntax: ​

html
<VvRouterLink
    :button="true"
    :button-fab="true"
    palette="solid"
>
    +
</VvRouterLink>

<VvRouterLink
    :button="true"
    :button-fab="true"
    palette="solid"
    class="rounded-full"
>
    +
</VvRouterLink>

Result: ​

+ +

Prop: buttonSize ​

Type: String as PropType<keyof SizesButtons>
Default: "md"

The VvRouterLink Component buttonSize prop sets the Tailwind CSS size classes applied to the output element. By default, these classes match the size classes (and examples) over in the VvButton Prop: Size docs section.

Syntax: ​

html
<VvRouterLink
    :button="true"
    button-size="xl"
    palette="solid"
    color="primary"
>
    VvRouterLink
</VvRouterLink>

Result: ​

VvRouterLink

Downstream Typescript Prop Typing: ​

If you are building a component that uses a nested VvRouterLink Component and want to pass through strict typing into your code base when using your built component, you can add typing for Vue props like this:
html
<!-- ./src/components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { PropType } from 'vue'
    import type { SizesButtons } from '@obewds/vueventus'

    import { defineComponent } from 'vue'
    import VvRouterLink from './vv/anchors/VvRouterLink.vue'

    export default defineComponent({

        components: { VvRouterLink },

        props: {
            href: {
                type: String,
                default: '/',
            },
            buttonSize: {
                type: String as PropType<keyof SizesButtons>,
                default: 'md',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        :button="true"
        palette="solid"
        color="primary"
        :button-size="buttonSize"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>
html
<!-- ./components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { SizesButtons } from '@obewds/vueventus'

    export default defineComponent({

        props: {
            href: {
                type: String,
                default: '/',
            },
            buttonSize: {
                type: String as PropType<keyof SizesButtons>,
                default: 'md',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        :button="true"
        palette="solid"
        color="primary"
        :button-size="buttonSize"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>

Prop: color ​

Type: String as PropType<keyof DefaultPaletteColors>
Default: "default"

The VvRouterLink Component color prop sets the component instance color based both on the color prop and the palette prop values together with the button prop value.

If the button prop value is false and the component is being used to output a visually text styled <router-link> component, then the color prop value pulls classes from an anchor palette.

Conversely, if the button prop value is true and button mode is enabled to output a visually button styled <router-link> element, then the color prop value pulls classes from a button palette.

Syntax: ​

html
<VvRouterLink color="default">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink color="error">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink color="primary">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink color="secondary">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink color="success">
    VvRouterLink
</VvRouterLink>

Result: ​

VvRouterLink , VvRouterLink , VvRouterLink , VvRouterLink , VvRouterLink

To view the color examples of the VvRouterLink Component with button mode enabled, check out the docs for the VvButton Prop: color and VvButton Prop: palette.

Downstream Typescript Prop Typing: ​

If you are building a component that uses a nested VvRouterLink Component and want to pass through strict typing into your code base when using your built component, you can add typing for Vue props like this:
html
<!-- ./src/components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { PropType } from 'vue'
    import type { DefaultPaletteColors } from '@obewds/vueventus'

    import { defineComponent } from 'vue'
    import VvRouterLink from './vv/anchors/VvRouterLink.vue'

    export default defineComponent({

        components: { VvRouterLink },

        props: {
            href: {
                type: String,
                default: '/',
            },
            color: {
                type: String as PropType<keyof DefaultPaletteColors>,
                default: 'primary',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        :color="color"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>
html
<!-- ./components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { DefaultPaletteColors } from '@obewds/vueventus'

    export default defineComponent({

        props: {
            href: {
                type: String,
                default: '/',
            },
            color: {
                type: String as PropType<keyof DefaultPaletteColors>,
                default: 'primary',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        :color="color"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>

Prop: debug ​

Type: Boolean
Default: false

The VvRouterLink Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-router-link- prefixed HTML attributes.

Syntax: ​

html
<VvRouterLink :debug="true">
    VvRouterLink debug
</VvRouterLink>

Prop: palette ​

Type: String as PropType<keyof DefaultButtonPalettes | keyof DefaultPalettes>
Default: "default"

The VvRouterLink Component palette prop sets the component instance color based both on the palette prop and the color prop values together with the button prop value.

If the button prop value is false and the component is being used to output a visually text styled <router-link> component, then the color prop value pulls classes from an anchor palette.

Conversely, if the button prop value is true and button mode is enabled to output a visually button styled <router-link> element, then the color prop value pulls classes from a button palette.

Syntax: ​

html
<VvRouterLink palette="default" color="default">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink palette="default" color="error">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink palette="default" color="primary">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink palette="default" color="secondary">
    VvRouterLink
</VvRouterLink>, 
<VvRouterLink palette="default" color="success">
    VvRouterLink
</VvRouterLink>
html
<VvRouterLink :button="true" palette="solid" color="default" class="mb-2">
    VvRouterLink
</VvRouterLink>
<br>
<VvRouterLink :button="true" palette="outline" color="error" class="mb-2">
    VvRouterLink
</VvRouterLink>
<br>
<VvRouterLink :button="true" palette="outline" color="primary" class="mb-2">
    VvRouterLink
</VvRouterLink>
<br>
<VvRouterLink :button="true" palette="outline" color="secondary" class="mb-2">
    VvRouterLink
</VvRouterLink>
<br>
<VvRouterLink :button="true" palette="outline" color="success" class="mb-2">
    VvRouterLink
</VvRouterLink>

Result: ​

VvRouterLink , VvRouterLink , VvRouterLink , VvRouterLink , VvRouterLink
VvRouterLink
VvRouterLink
VvRouterLink
VvRouterLink
VvRouterLink

To view the color examples of the VvRouterLink Component with button mode enabled, check out the docs for the VvButton Prop: color and VvButton Prop: palette.

Downstream Typescript Prop Typing: ​

If you are building a component that uses a nested VvRouterLink Component and want to pass through strict typing into your code base when using your built component, you can add typing for Vue props like this:
html
<!-- ./src/components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { PropType } from 'vue'
    import type { DefaultButtonPalettes, DefaultPalettes } from '@obewds/vueventus'

    import { defineComponent } from 'vue'
    import VvRouterLink from './vv/anchors/VvRouterLink.vue'

    export default defineComponent({

        components: { VvRouterLink },

        props: {
            href: {
                type: String,
                default: '/',
            },
            palette: {
                type: String as PropType<keyof DefaultButtonPalettes | keyof DefaultPalettes>,
                default: 'default',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        color="primary"
        :palette="palette"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>
html
<!-- ./components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { DefaultButtonPalettes, DefaultPalettes } from '@obewds/vueventus'

    export default defineComponent({

        props: {
            href: {
                type: String,
                default: '/',
            },
            palette: {
                type: String as PropType<keyof DefaultButtonPalettes | keyof DefaultPalettes>,
                default: 'default',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        color="primary"
        :palette="palette"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>

Prop: textSize ​

Type: String as PropType<keyof SizesText>
Default: "md"

The VvRouterLink Component textSize prop sets the component instance size-based classes which in the context of anchor elements typically involves font size atomic classes.

Syntax: ​

html
<VvRouterLink to="/" text-size="lg">
    "lg" VvRouterLink text
</VvRouterLink>

Result: ​

"lg" VvRouterLink text
size prop VvAnchor size examples
"5xs" VvRouterLink text
"4xs" VvRouterLink text
"3xs" VvRouterLink text
"2xs" VvRouterLink text
"xs" VvRouterLink text
"sm" VvRouterLink text
"md" VvRouterLink text
"lg" VvRouterLink text
"xl" VvRouterLink text
"2xl" VvRouterLink text
"3xl" VvRouterLink text
"4xl" VvRouterLink text
"5xl" VvRouterLink text
"6xl" VvRouterLink text
"7xl" VvRouterLink text
"8xl" VvRouterLink text
"9xl" VvRouterLink text
"10xl" VvRouterLink text
"11xl" VvRouterLink text
"12xl" VvRouterLink text

Downstream Typescript Prop Typing: ​

If you are building a component that uses a nested VvRouterLink Component and want to pass through strict typing into your code base when using your built component, you can add typing for Vue props like this:
html
<!-- ./src/components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { PropType } from 'vue'
    import type { SizesText } from '@obewds/vueventus'

    import { defineComponent } from 'vue'
    import VvRouterLink from './vv/anchors/VvRouterLink.vue'

    export default defineComponent({

        components: { VvRouterLink },

        props: {
            href: {
                type: String,
                default: '/',
            },
            textSize: {
                type: String as PropType<keyof SizesText>,
                default: 'md',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        :text-size="textSize"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>
html
<!-- ./components/AppVvRouterLink.vue -->

<script lang="ts">

    import type { SizesText } from '@obewds/vueventus'

    export default defineComponent({

        props: {
            href: {
                type: String,
                default: '/',
            },
            textSize: {
                type: String as PropType<keyof SizesText>,
                default: 'md',
            },
        },

    })

</script>

<template>
    <VvRouterLink
        :href="href"
        :text-size="textSize"
    >
        AppVvRouterLink.vue
    </VvRouterLink>
</template>

Prop: to ​

Type: String
Default: "/"

The VvRouterLink Component to prop value sets the to -> href value for the output <router-link> component.

Syntax: ​

html
<VvRouterLink to="/">
    VvRouterLink
</VvRouterLink>

Result: ​

VvRouterLink

Slot: #default ​

The VvRouterLink Component has a standard #default Vue slot to insert child elements/nodes into the component.

Syntax: ​

html
<VvRouterLink to="#">
    Slot <span class="text-red-500 dark:text-red-300">Content</span>
</VvRouterLink>

Result: ​

Slot Content

Released under the MIT License

Copyright © 2022 Matt McT LLC