Hybridly

<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 /**/"
		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.

mode ​

  • Type: 'navigation' | 'async'

Defines whether the request is a full navigation or an asynchronous background request.

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'

Preloading has been removed from the router internals.

The preload prop is currently a no-op and is kept only for backwards compatibility in templates.