DOCSEARCHbyAlgolia
Submit Docs

Hybridly Documentation

website·Indexed 32 days ago

https://hybridly.dev

Documentation for Hybridly, a framework consisting of a Laravel adapter, a Vue adapter, and a Vite plugin. It provides a set of headless components like <Deferred>, <Form>, and <WhenVisible>, along with utility hooks such as useForm, useRoute, and useProperties to bridge the gap between server-side Laravel and client-side Vue.

Tokens
33.6K
Snippets
223
Records
284
Agent score
67%

What's inside Hybridly

  1. Overview of the Hybridly Refining process

    Refining is a declarative API for filtering and sorting data. The workflow consists of:

    1. Declaring filters and sorts using a Refine instance.
    2. The Refine instance updating the query based on the current request.
    3. Sharing the query results and refinement metadata with the view.
    4. Using the useRefinements composable in the view to generate the UI and apply changes.

  2. Overview of Hybridly

    Hybridly is a framework built on top of Laravel and Vue that allows developers to build applications using Vue instead of Blade while maintaining the benefits of a classic monolithic architecture. It uses a protocol similar to Inertia.js but is specifically optimized for Laravel, Vite, and Vue, providing more built-in features and quality-of-life improvements (such as native support for dialogs and data tables) compared to framework-agnostic alternatives.

  3. Overview of Hybridly Dialogs

    Dialogs are components with their own URL and properties that render as siblings to view components. When navigating from a view to a dialog, the dialog is mounted as a sibling. If a dialog is accessed directly via its URL, the base view component and its properties are loaded first so the dialog can render on top of it.

  4. Migrate configuration from hybridly.config.ts to config/hybridly.php

    In Hybridly 0.4.x, configuration sharing between Hybridly and its Code extension has moved from hybridly.config.ts to PHP. You can delete hybridly.config.ts and map the previous options to the architecture array in config/hybridly.php as follows:

    • eager becomes architecture.eager_load_views
    • domains becomes architecture.preset (valid values: default, modules, or custom)
    • root becomes architecture.root

    Note: The pages and layouts options have been removed entirely.

    // config/hybridly.php
'architecture' => [
    'preset' => 'modules',
    'eager_load_views' => true,
    'root' => 'resources',
],

  5. Intercept Hybridly request lifecycle events

    Hybridly provides a set of lifecycle hooks that allow developers to execute custom logic during a request. These hooks can be implemented globally (via plugins), manually (via registerHook), or locally (via visit options during navigation). Most hooks can be awaited using Promises.

  6. Migrate architecture configuration to v0.6.x

    In v0.6.x, architecture.preset and architecture.domains_directory have been removed. Architecture is now configured via a service provider. To load a module from the domains directory, use the loadModuleFrom method on the Hybridly instance. To disable the default architecture, set architecture.load_default_module to false in your configuration.
    // In a Service Provider
public function boot(Hybridly $hybridly): void
{
    $hybridly->loadModuleFrom(resource_path('domains'));
}

// In config/hybridly.php
'architecture' => [
    'load_default_module' => false,
]

  7. Understand Hybridly default scroll behavior

    By default, Hybridly simulates standard browser behavior: when navigating between pages, the body scroll position is automatically reset to the top. When navigating back and forward through the browser history, the scroll position of each page is automatically restored.

  8. Update view and layout syntax for domain-based architecture

    In version 0.4.x, the syntax for specifying pages or layouts in a domain-based architecture has changed from a single colon (domain:name) to a double colon (domain::name) to align with Laravel's base syntax.
    // Views
return view('security::login');
    <!-- Layouts -->
<template layout="security::profile">

  9. Configure auto-importing of Vue components

    Hybridly uses unplugin-vue-components to auto-import Headless UI, Radix components, architecture-specified components, components in resources/components, and the Link component. You can customize the configuration or disable it by setting vueComponents to false. Note: Disabling this also disables icon auto-imports and built-in components like <router-link>.
    import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'

export default defineConfig({
	plugins: [
		hybridly({
			vueComponents: {
				linkName: 'HybridlyLink',
			},
		}),
	],
})

  10. Manage asset versioning and forced page reloads in Hybridly

    Hybridly prevents users from interacting with outdated pages after a deployment by exchanging a version hash between the front-end and back-end adapters. If the hashes mismatch, Hybridly triggers an external redirection, forcing a full page reload to ensure the user is on the latest version of the application.

  11. Configure Hybridly default file architecture

    By default, Hybridly expects view and layout files, the main.ts entrypoint, and the root.blade.php layout to be stored in the resources directory. It does not use resources/views or resources/layouts subdirectories, as this would alter the component identifiers.
    resources/
├── main.ts
├── root.blade.php
├── index.view.vue
├── security/
│  ├── register.view.vue
│  └── login.view.vue
└── default.layout.vue

  12. Manage page titles and meta tags with @unhead/vue

    Hybridly does not provide a built-in tool for managing the <title> or <meta> tags. It is recommended to use @unhead/vue, which is simple to use and supports Server-Side Rendering (SSR).