Vue Links - Flowbite

The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card

Default link

Use this example to set default styles to an inline link element.

<template>
  <fwb-a href="#"> Flowbite-vue </fwb-a>
</template>

<script setup>
import { FwbA } from 'flowbite-vue'
</script>

Flowbite-vue

Paragraph link

Use this example to set a link inside a paragraph with an underline style.

<template>
  <fwb-p>
    The free updates that will be provided is based on the <fwb-a href="#"
    class="underline hover:no-underline">roadmap</fwb-a> that we have laid
    out for this project. It is also possible that we will provide
    extra updates outside of the roadmap as well.
  </fwb-p>
</template>

<script setup>
import { FwbA, FwbP } from 'flowbite-vue'
</script>

The free updates that will be provided is based on the roadmap that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.

Custom classes

Use class attribute prop to apply the tailwind classes.

<template>
  <fwb-a class="text-orange-500 italic" href="#"> Flowbite-vue </fwb-a>
</template>

<script setup>
import { FwbA } from 'flowbite-vue'
</script>

Flowbite-vue