VvAnchor Component

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

Import

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

// ./src/components/SomeComponent.vue
import VvAnchor from './vv/anchors/VvAnchor.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.

Alternatively, you can install the raw library VvAnchor Component with:

import { VvAnchor } from '@obewds/vueventus'

TIP

Importing raw VueVentus library components will still apply your ./src/app.vv.ts settings automatically through the Vue provide() and inject() pattern. All raw VueVentus library components automatically check for a provided "vv" keyed object with a ConfigVv type interface.

CLI or Raw?

The main difference between raw library components and CLI installed components, is that you have no control over component defaults with raw library components. This is less flexible than using CLI installed components, because control of component defaults can greatly reduce the number of props a dev has to type for component instances, which reduces app code.

Meanwhile, the control CLI installed components provide through customizable defaults, opens up to a global level (styling management system) control for default component state characteristic values (particularly powerful with color and proportional size characteristics).

Prop: button

Type: Boolean
Default: false

When the VvAnchor 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:

<VvAnchor
    :button="true"
    palette="solid"
    color="primary"
    href="#"
>
    VvAnchor
</VvAnchor>

Result:

VvAnchor

Prop: buttonBlock

Type: Boolean
Default: false

The VvAnchor 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:

<VvAnchor
    :button="true"
    :button-block="true"
    palette="solid"
    color="primary"
    href="#"
>
    VvAnchor
</VvAnchor>

Result:

VvAnchor

Prop: buttonFab

Type: Boolean
Default: false

The VvAnchor 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:

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

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

Result:

+ +

Prop: buttonSize

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

The VvAnchor 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:

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

Result:

VvAnchor

Downstream Typescript Prop Typing:

If you are building a component that uses a nested VvAnchor 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:

SPA/SSG Stacks

<!-- ./src/components/AppVvAnchor.vue -->

<script lang="ts">

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

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

    export default defineComponent({

        components: { VvAnchor },

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

    })

</script>

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

Nuxt 3 Stack

<!-- ./components/AppVvAnchor.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>
    <VvAnchor
        :href="href"
        :button="true"
        palette="solid"
        color="primary"
        :button-size="buttonSize"
    >
        AppVvAnchor.vue
    </VvAnchor>
</template>

Prop: color

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

The VvAnchor 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 <a> element, 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 <a> element, then the color prop value pulls classes from a button palette.

TIP

When using the VvAnchor Component with the button mode enabled, you'll often need to also set the component instance's palette value to a button palette (ie: :palette="solid" or :palette="outline" etc.), otherwise the component will look for palette colors from an anchor color palette.

Since there is no "default" named button palette but there is a "default" named anchor palette, not changing a VvAnchor Component instance's palette to a button palette when button mode is enabled will result in no output color classes from either an anchor or button palette.

Syntax:

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

Result:

VvAnchor , VvAnchor , VvAnchor , VvAnchor , VvAnchor

To view the color examples of the VvAnchor 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 VvAnchor 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:

SPA/SSG Stacks

<!-- ./src/components/AppVvAnchor.vue -->

<script lang="ts">

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

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

    export default defineComponent({

        components: { VvAnchor },

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

    })

</script>

<template>
    <VvAnchor
        :href="href"
        :color="color"
    >
        AppVvAnchor.vue
    </VvAnchor>
</template>

Nuxt 3 Stack

<!-- ./components/AppVvAnchor.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>
    <VvAnchor
        :href="href"
        :color="color"
    >
        AppVvAnchor.vue
    </VvAnchor>
</template>

Prop: debug

Type: Boolean
Default: false

The VvAnchor 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-anchor- prefixed HTML attributes.

Syntax:

<VvAnchor :debug="true">
    VvAnchor debug
</VvAnchor>

Result:

VvAnchor debug

Prop: external

Type: Boolean
Default: false

When the VvAnchor Component external prop value is true, the output <anchor> element will have a target="_blank" and rel="noopener noreferrer" attributes/values so links that leave the application space open in a new tab for users.

Syntax:

<VvAnchor
    :external="true"
    href="https://obewds.github.io/vueventus/components/anchors/vv-anchor.html"
>
    VueVentus VvAnchor Docs
</VvAnchor>

Result:

VueVentus VvAnchor Docs

Prop: href

Type: String
Default: "#"

The VvAnchor Component href prop value sets the href value for the output <a> element.

Syntax:

<VvAnchor href="#">
    VvAnchor
</VvAnchor>

Result:

VvAnchor

Prop: palette

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

The VvAnchor 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 <a> element, 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 <a> element, then the color prop value pulls classes from a button palette.

TIP

When using the VvAnchor Component with the button mode enabled, you'll often need to also set the component instance's palette value to a button palette (ie: :palette="solid" or :palette="outline" etc.), otherwise the component will look for palette colors from an anchor color palette.

Since there is no "default" named button palette but there is a "default" named anchor palette, not changing a VvAnchor Component instance's palette to a button palette when button mode is enabled will result in no output color classes from either an anchor or button palette.

Syntax:

<VvAnchor palette="default" color="default">
    VvAnchor
</VvAnchor>, 
<VvAnchor palette="default" color="error">
    VvAnchor
</VvAnchor>, 
<VvAnchor palette="default" color="primary">
    VvAnchor
</VvAnchor>, 
<VvAnchor palette="default" color="secondary">
    VvAnchor
</VvAnchor>, 
<VvAnchor palette="default" color="success">
    VvAnchor
</VvAnchor>

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

Result:

VvAnchor , VvAnchor , VvAnchor , VvAnchor , VvAnchor

VvAnchor
VvAnchor
VvAnchor
VvAnchor
VvAnchor

To view the color examples of the VvAnchor 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 VvAnchor 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:

SPA/SSG Stacks

<!-- ./src/components/AppVvAnchor.vue -->

<script lang="ts">

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

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

    export default defineComponent({

        components: { VvAnchor },

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

    })

</script>

<template>
    <VvAnchor
        :href="href"
        color="primary"
        :palette="palette"
    >
        AppVvAnchor.vue
    </VvAnchor>
</template>

Nuxt 3 Stack

<!-- ./components/AppVvAnchor.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>
    <VvAnchor
        :href="href"
        color="primary"
        :palette="palette"
    >
        AppVvAnchor.vue
    </VvAnchor>
</template>

Prop: textSize

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

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

Syntax:

<VvAnchor href="/" text-size="lg">
    "lg" VvAnchor text
</VvAnchor>

Result:

"lg" VvAnchor text

size prop VvAnchor size examples

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

Downstream Typescript Prop Typing:

If you are building a component that uses a nested VvAnchor 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:

SPA/SSG Stacks

<!-- ./src/components/AppVvAnchor.vue -->

<script lang="ts">

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

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

    export default defineComponent({

        components: { VvAnchor },

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

    })

</script>

<template>
    <VvAnchor
        :href="href"
        :text-size="textSize"
    >
        AppVvAnchor.vue
    </VvAnchor>
</template>

Nuxt 3 Stack

<!-- ./components/AppVvAnchor.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>
    <VvAnchor
        :href="href"
        :text-size="textSize"
    >
        AppVvAnchor.vue
    </VvAnchor>
</template>

Slot: #default

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

Syntax:

<VvAnchor href="#">
    Slot <span class="text-red-500 dark:text-red-300">Content</span>
</VvAnchor>

Result:

Slot Content

Current Version:

v0.61.7