Skip to content

Directives

@hybridly

This directive creates the markup required to initialize Vue with Hybridly and its initial data. Its arguments are optional, and, if provided, must use the named argument syntax.

Usage

blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			@vite('resources/application/main.ts')
	</head>
	<body class="bg-gray-50 antialiased">
			@hybridly(class: 'flex flex-col')
	</body>
</html>

id

Sets the id of the generated HTML element. By default, root is used. Note that changing the id there requires changing it in initializeHybridly as well.

blade
@hybridly(id: 'app')

class

Sets the class of the generated HTML element.

blade
@hybridly(class: 'flex flex-col')

element

Defines which element will get generated. By default, a div is used.

blade
@hybridly(element: 'main')