Hybridly

Appearance

<router-link> ​

This built-in component can be used to replace anchor tags to navigate from a hybrid view to another.

This component is a wrapper around Vue's <Component>. By default, it creates anchors elements but intercepts their click handlers to make hybrid navigations.

href ​

  • Required: true
  • Type: string

Similar to the <a> tag, accepts the hyperlink to navigate to. If this doesn't point to a hybrid view, set the external property to true.

Usage ​

vue
<template>
	<router-link :href="route('index')/* [!code focus]*/">
		Home
	</router-link>
</template>

external ​

  • Type: boolean

When set to true, disables the custom click handler. This must be used when navigating to external websites or non-hybrid views — otherwise, a hybrid request will be made and will result into an error.

Usage ​

vue
<template>
	<router-link
		v-for="link in navigation"
		:key="link.url"
		:href="link.url"
		:external="link.external/* [!code focus]*/"
		v-text="link.label"
	/>
</template>

as ​

  • Type: string or Component

Defines the tag or component to render as.

Usage ​

vue
<script setup lang="ts">
import BaseButton from '@/views/components/base-button.vue'
</script>

<template>
	<router-link
		:as="BaseButton/* [!code focus]*/"
		method="POST"
		:href="route('chirps.delete')"
	>
		Delete
	</router-link>
</template>

method ​

  • Type: GET, POST, PUT, PATCH or DELETE

Defines the method that will be used when making the hybrid request. May be lowercase or uppercase.

data ​

  • Type: object

Optional data to be sent with the hybrid request. This is the same as using data in a programmatic navigation.

options ​

  • Type: HybridRequestOptions

Options for the hybrid request. This is the same as the options argument in programmatic navigations.

disabled ​

  • Type: boolean

When set to true, the click handler will not be triggered and the disabled HTML attribute will be added.

preload ​

  • Type: boolean | 'mount' | 'hover'

When set to true, the URL will be preloaded when hovering over the link. When set to mount, the preloading will be done when the link component is mounted.

Read more on preloading.