Anchor

This composable provides an easy way to handle vue-router routes, click event and basic anchors. If the to property is set, it will automatically resolve the route which can be used as the href value.

Usage

import { TCard, TCell } from "@dija/tohama-components";
import { useAnchor } from "@dija/tohama-use";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const basic = useAnchor({
      href: "https://dija.sa",
    });

    const route = useAnchor({
      to: "/",
      // Or named route with options
      // to: {
      //     name: 'home',
      // },
    });

    return () => (
      <TCell>
        <TCard design="outlined" mb p>
          <a href={basic.href.value}>Basic Link</a>
        </TCard>
        <TCard design="outlined" p>
          <a href={route.href.value} onClick={route.onClick}>
            Route Link
          </a>
        </TCard>
      </TCell>
    );
  },
});

Catalog

Examples

Composables

Aspect Ratio