hybridly/hybridly

Solution to develop server-driven, client-rendered applications

Q&A

What's the goal of this project?

Hybridly aims to provide the best developer experience possible when using Laravel, Vue and Vite. Over time, it might become closer to what Nuxt 3 currently is in terms of DX.

 

When should I use Hybridly instead of Inertia?

Inertia is popular and sponsored by Laravel. It's the safe option. Hybridly is moving faster, and exists because Inertia has issues and a different philosophy. Chose Inertia for better community support, and Hybridly if you value developer experience more at the expense of a smaller community.

 

Why fork Inertia instead of contributing?

That's what I tried before writing Hybridly, but the maintenance of Inertia is highly lacking, pull requests and issues are not being addressed. Additionally, its minimalist philosophy is not compatible with my developer experience needs.

 

Can I use Hybridly with other frameworks than Laravel or Vue?

The core of Hybridly is framework-agnostic, just like Inertia's. But there is no plan for an official adapter other than Laravel and Vue, because that is what I am using and willing to maintain. Feel free to create your own adapter though.

 

Will Hybridly be properly maintained?

I'm primarily building Hybridly for myself. I am actively using and improving it. That means Hybridly is an opinionated project and may not suit your tastes, but it will live as long as I am a developer and I didn't find a better way to build web applications.

   




<sub>·


Built with ❤︎ by Enzo Innocenzi
Acknowledgments to Jonathan Reinink, the Inertia team and its contributors.</sub>

hybridly's Issues

useHead not working as documented

Describe the bug

Seems some crettins snuck in when migrating from @vueuse/head to @unhead/vue.

Firstly, createHead does not take a titleTemplate. So I switched to useHead in the layout. I then needed to clear out .hybridly (even after restarting the dev server) as it was still auto-importing @vueuse/head. Then, it could not find useHead, so I imported it manually. Now I get this:

[Vue warn]: injection "usehead" not found. 
  at <Default security= Object applications= Array(2) app_meta= Object  ... > 
  at <Hybridly> 
  at <App>

(seems like a case-sensitivity issue?)

and

Unhead is missing Vue context, falling back to shared context. This may have unexpected results.
injectHead @ vue.cf295fb1.mjs:77
Show 1 more frame
Show less

Reproduction

None

Steps to reproduce

Remove createHead call if added to enhanceVue. Then, in the default layout script:

<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  titleTemplate: (title?: string) => title ? `${title} • My App` : 'My App',
})
</script>

In individual pages:

<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  title: 'Page Title',
})
</script>

System information

  System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 112.17 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 7.19.0 - ~/Library/pnpm/pnpm
  Browsers:
    Safari: 16.5
  npmPackages:
    hybridly: ^0.4.1 => 0.4.5

Used package manager

npm

Logs

Browser debug logs

hybridly:adapter:vue Preparing Hybridly with options: +0ms {architecture: {…}, components: {…}, routing: {…}, imported: {…}, enhanceVue: ƒ, …}
config:5 hybridly:adapter:vue Element "root" is: +0ms <div id=​"root" class=​"h-full" data-v-app>​…​</div>​
config:5 hybridly:adapter:vue Resolved: +0ms {isServer: false, element: div#root.h-full, payload: {…}}
config:5 hybridly:plugin:progress Calling "initialized" hook. +0ms
common.js:113 hybridly:core:hook Called all hooks for [initialized], +0ms (3) [undefined, true, true]
common.js:113 hybridly:core:router Handling the initial page navigation. +0ms
common.js:113 hybridly:adapter:vue:state:context Storing context: +0ms {view: {…}, dialog: null, url: 'https://redacted.test/dashboard', version: '9b532e89e263b1cfbf8d979f1a60949a', responseErrorModals: true, …}
common.js:113 hybridly:core:context Updated context: +0ms {context: {…}, added: {…}}
common.js:113 hybridly:core:router Making an internal navigation: +0ms {context: {…}, options: {…}}
common.js:113 hybridly:plugin:view-transition Calling "navigating" hook. +0ms
common.js:113 hybridly:core:hook Called all hooks for [navigating], +1ms (3) [undefined, true, true]
common.js:113 hybridly:core:history Setting the memo from this history entry into the current context. +0ms
common.js:113 hybridly:adapter:vue:state:context Storing context: +0ms {view: {…}, dialog: null, url: 'https://redacted.test/dashboard', version: '9b532e89e263b1cfbf8d979f1a60949a', responseErrorModals: true, …}
common.js:113 hybridly:core:context Updated context: +1ms {context: {…}, added: {…}}
common.js:113 hybridly:adapter:vue:state:context Storing context: +0ms {view: {…}, dialog: null, url: 'https://redacted.test/dashboard', version: '9b532e89e263b1cfbf8d979f1a60949a', responseErrorModals: true, …}
common.js:113 hybridly:core:context Updated context: +0ms {context: {…}, added: {…}}
common.js:113 hybridly:core:router Target URL is https://redacted.test/dashboard, current window URL is https://redacted.test/dashboard. +1ms {shouldReplaceHistory: true}
common.js:113 hybridly:core:history Serializing data. +0ms {url: 'https://redacted.test/dashboard', version: '9b532e89e263b1cfbf8d979f1a60949a', view: {…}, dialog: null, scrollRegions: Array(0), …}
common.js:113 hybridly:core:history Setting history state: +1ms {method: 'replaceState', context: {…}}
common.js:113 hybridly:adapter:vue Resolving component +0ms dashboard
common.js:113 hybridly:core:router Component [dashboard] resolved to: +1ms {layout: Array(1), __name: 'dashboard', props: {…}, __hmrId: '448e1696', setup: ƒ, …}
common.js:113 hybridly:adapter:vue:state:view Storing view: +0ms {layout: Array(1), __name: 'dashboard', props: {…}, __hmrId: '448e1696', setup: ƒ, …}
common.js:113 hybridly:adapter:vue:state:view Storing properties: +0ms {security: {…}, applications: Array(2), app_meta: {…}, errors: {…}, flash: {…}, …}
common.js:113 hybridly:core:scroll Resetting scroll positions. +0ms
common.js:113 hybridly:core:scroll Saving scroll positions of: +1ms (2) [{…}, {…}]
common.js:113 hybridly:adapter:vue:state:context Storing context: +0ms {view: {…}, dialog: null, url: 'https://redacted.test/dashboard', version: '9b532e89e263b1cfbf8d979f1a60949a', responseErrorModals: true, …}
common.js:113 hybridly:core:context Updated context: +3ms {context: {…}, added: {…}}
common.js:113 hybridly:core:history Serializing data. +2ms {url: 'https://redacted.test/dashboard', version: '9b532e89e263b1cfbf8d979f1a60949a', view: {…}, dialog: null, scrollRegions: Array(2), …}
common.js:113 hybridly:core:history Setting history state: +0ms {method: 'replaceState', context: {…}}
common.js:113 hybridly:plugin:view-transition Calling "navigated" hook. +0ms
common.js:113 hybridly:core:hook Called all hooks for [navigated], +4ms (3) [undefined, true, true]
common.js:113 hybridly:core:history Registering [popstate] and [scroll] event listeners. +0ms
common.js:113 hybridly:core:hook Called all hooks for [ready], +0ms (3) [undefined, true, true]
common.js:113 hybridly:adapter:vue:state:context Storing context: +0ms {view: {…}, dialog: null, url: 'https://redacted.test/dashboard', version: '9b532e89e263b1cfbf8d979f1a60949a', responseErrorModals: true, …}
common.js:113 hybridly:adapter:vue:render:wrapper Rendering wrapper component. +0ms (6) [Proxy(Object), Array(0), {…}, {…}, {…}, {…}]
common.js:113 hybridly:adapter:vue:render:view Rendering view. +0ms
common.js:113 hybridly:adapter:vue:render:layout Rendering layout. +0ms
default.vue:9 [Vue warn]: injection "usehead" not found. 
  at <Default security= {user: {…}} applications= (2) [{…}, {…}] app_meta= {current_route_name: 'dashboard'}  ... > 
  at <Hybridly> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
inject @ runtime-core.esm-bundler.js:3899
injectHead @ vue.cf295fb1.mjs:75
useHead @ vue.f36acd1f.mjs:5
setup @ default.vue:9
callWithErrorHandling @ runtime-core.esm-bundler.js:158
setupStatefulComponent @ runtime-core.esm-bundler.js:7236
setupComponent @ runtime-core.esm-bundler.js:7197
mountComponent @ runtime-core.esm-bundler.js:5599
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
processFragment @ runtime-core.esm-bundler.js:5499
patch @ runtime-core.esm-bundler.js:5014
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
render2 @ runtime-core.esm-bundler.js:6332
mount @ runtime-core.esm-bundler.js:3824
app.mount @ runtime-dom.esm-bundler.js:1431
initializeHybridly @ index.mjs:498
await in initializeHybridly (async)
initializeHybridly @ config:5
(anonymous) @ main.ts:4
default.vue:9 Unhead is missing Vue context, falling back to shared context. This may have unexpected results.
injectHead @ vue.cf295fb1.mjs:77
useHead @ vue.f36acd1f.mjs:5
setup @ default.vue:9
callWithErrorHandling @ runtime-core.esm-bundler.js:158
setupStatefulComponent @ runtime-core.esm-bundler.js:7236
setupComponent @ runtime-core.esm-bundler.js:7197
mountComponent @ runtime-core.esm-bundler.js:5599
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
processFragment @ runtime-core.esm-bundler.js:5499
patch @ runtime-core.esm-bundler.js:5014
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
render2 @ runtime-core.esm-bundler.js:6332
mount @ runtime-core.esm-bundler.js:3824
app.mount @ runtime-dom.esm-bundler.js:1431
initializeHybridly @ index.mjs:498
await in initializeHybridly (async)
initializeHybridly @ config:5
(anonymous) @ main.ts:4
common.js:113 hybridly:adapter:vue Moving data object to URL parameters. +0ms
2common.js:113 hybridly:adapter:vue Moving data object to URL parameters. +0ms
common.js:113 hybridly:adapter:vue Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.Please specify a more appropriate element using the "as" attribute. For example:<RouterLink href="https://redacted.test/guardian/invalidate" method="POST" as="button">...</RouterLink> +0ms
dashboard.vue:11 [Vue warn]: injection "usehead" not found. 
  at <Dashboard security= {user: {…}} applications= (2) [{…}, {…}] app_meta= {current_route_name: 'dashboard'}  ... > 
  at <Default security= {user: {…}} applications= (2) [{…}, {…}] app_meta= {current_route_name: 'dashboard'}  ... > 
  at <Hybridly> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
inject @ runtime-core.esm-bundler.js:3899
injectHead @ vue.cf295fb1.mjs:75
useHead @ vue.f36acd1f.mjs:5
setup @ dashboard.vue:11
callWithErrorHandling @ runtime-core.esm-bundler.js:158
setupStatefulComponent @ runtime-core.esm-bundler.js:7236
setupComponent @ runtime-core.esm-bundler.js:7197
mountComponent @ runtime-core.esm-bundler.js:5599
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
processFragment @ runtime-core.esm-bundler.js:5499
patch @ runtime-core.esm-bundler.js:5014
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
processFragment @ runtime-core.esm-bundler.js:5499
patch @ runtime-core.esm-bundler.js:5014
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
render2 @ runtime-core.esm-bundler.js:6332
mount @ runtime-core.esm-bundler.js:3824
app.mount @ runtime-dom.esm-bundler.js:1431
initializeHybridly @ index.mjs:498
await in initializeHybridly (async)
initializeHybridly @ config:5
(anonymous) @ main.ts:4
dashboard.vue:11 Unhead is missing Vue context, falling back to shared context. This may have unexpected results.
injectHead @ vue.cf295fb1.mjs:77
useHead @ vue.f36acd1f.mjs:5
setup @ dashboard.vue:11
callWithErrorHandling @ runtime-core.esm-bundler.js:158
setupStatefulComponent @ runtime-core.esm-bundler.js:7236
setupComponent @ runtime-core.esm-bundler.js:7197
mountComponent @ runtime-core.esm-bundler.js:5599
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
processFragment @ runtime-core.esm-bundler.js:5499
patch @ runtime-core.esm-bundler.js:5014
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
processFragment @ runtime-core.esm-bundler.js:5499
patch @ runtime-core.esm-bundler.js:5014
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
render2 @ runtime-core.esm-bundler.js:6332
mount @ runtime-core.esm-bundler.js:3824
app.mount @ runtime-dom.esm-bundler.js:1431
initializeHybridly @ index.mjs:498
await in initializeHybridly (async)
initializeHybridly @ config:5
(anonymous) @ main.ts:4
common.js:113 hybridly:adapter:vue:render:view Calling mounted callbacks. +0ms
common.js:113 hybridly:plugin:view-transition Calling "mounted" hook. +0ms
common.js:113 hybridly:core:hook Called all hooks for [mounted], +12ms (3) [undefined, true, true]

Vite debug logs

  vite:hybridly:layout Resolved layouts "default": {
  sourceFile: '/???/resources/pages/application.vue',
  layouts: [ 'default' ],
  imports: "import __hybridly_layout_0 from '~/resources/layouts/default.vue';"
} +1s
  vite:hybridly:layout Resolved layouts "default": {
  sourceFile: '/???/resources/pages/dashboard.vue',
  layouts: [ 'default' ],
  imports: "import __hybridly_layout_0 from '~/resources/layouts/default.vue';"
} +72ms
  vite:hybridly:layout Resolved layouts "guardian": {
  sourceFile: '/???/resources/pages/guardian/signin.vue',
  layouts: [ 'guardian' ],
  imports: "import __hybridly_layout_0 from '~/resources/layouts/guardian.vue';"
} +28ms

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

`artisan` is missing when generating a new hybridly project

Describe the bug

I tried on my mac to initiate an Hybridly application but i got several issues which are linked to a missing file : artisan

  Could not open input file: artisan

Reproduction

None

Steps to reproduce

pnpx @preset/cli apply hybridly/preset
bunx @preset/cli apply hybridly/preset
wait and see the error

System information

System:
    OS: macOS 14.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.48 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.1 - /usr/local/bin/node
    npm: 9.8.0 - /usr/local/bin/npm
    pnpm: 8.6.12 - ~/Library/pnpm/pnpm
    bun: 1.0.27 - ~/.bun/bin/bun
  Browsers:
    Safari: 17.3.1
  npmPackages:
    hybridly: ^0.6.1 => 0.6.1

Used package manager

pnpm / bun

Logs

   ↪  Command failed with exit code 1: composer require --dev --no-interaction --with-all-dependencies pestphp/pest:^2.0
   ↪  Command failed with exit code 1: composer require --dev --no-interaction --with-all-dependencies pestphp/pest:^2.0
   ↪  Command failed with exit code 1: composer require --dev --no-interaction --with-all-dependencies pestphp/pest:^2.0
   ↪  Command failed with exit code 1: composer require --dev --no-interaction --with-all-dependencies pestphp/pest:^2.0
   ↪  Command failed with exit code 1: composer require --dev --no-interaction --with-all-dependencies pestphp/pest:^2.0
  Nothing to modify in lock file
  Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
  Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
  Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
  Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
  Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
  Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
  Updating dependencies
  Nothing to modify in lock file
  Installing dependencies from lock file (including require-dev)
  Nothing to install, update or remove
  Generating autoload files
  > Illuminate\Foundation\ComposerScripts::postAutoloadDump
  > @php artisan package:discover --ansi
  Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
  Could not open input file: artisan

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

Form Errors Reactivity & Nested Fields Errors

Describe the bug

There is def. something weird with the errors and im not sure yet why, but ill leave this issue to follow up

• The first i noticed while investigating some time ago, is that errors behave in a weird way in hybridly ( and a bit different from inertia ), when the backend sends the same error twice for a specific field, the errors variable is not triggered again ( and makes sense since the message is the same, and so the value never changes, so it will not trigger the watch effect. I believe this is related to original issue, reason why i wanted to mention.

• Seems like when using nested fields in forms, if we submit and the field has an error, the error is correctly set and all good here, but if you attempt to fill the said field ( so it does not contain errors ), the form.errors for that specific field seems like its never removed, while the server sends back a response without the given error shared. Its expected that also nested fields are also cleared when they are not present.

• Please do note that is also breaks the watch effect, so if you have a v-if for the given error, it will always be shown, because the variable is never removed.

The only way to proper workaround this is to use the before hook to clear the given fields, but i believe this should be looked properly to have a smooth expirience.

To note also that nested fields errors must be accessed with form.errors['foo.nested'] instead of dot notation, ( not 100% sure but i believe it would be a nice DX to provide nested navigation for those as well.

Reproduction

https://github.com/nikuscs/hybridly-demo-validation-errors

Steps to reproduce

• Visit the https://blue-bird.test/login
• First submit without the nested field so it the error is flashed
• Then fill the contents of nested field and send again
• Errors for the given field will not be sent back by the server, but still persisted in errors
• Watch console for proper errors.

System information

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 201.41 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.8.0 - ~/Library/Caches/fnm_multishells/68334_1681237407108/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.2.0 - ~/Library/Caches/fnm_multishells/68334_1681237407108/bin/npm
  Browsers:
    Brave Browser: 112.1.50.114
    Chrome: 111.0.5563.146
    Firefox: 110.0
    Safari: 16.4

Used package manager

pnpm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

npx @preset/cli apply hybridly/preset issues with Laravel 11??

Describe the bug

I am new to Hybridly and I wanted to setup in a Laravel 11 new project. When I run npx @preset/cli apply hybridly/preset command, I am getting

✘ [ERROR] Expected "]" but found "web"

    ../../../Users/User/AppData/Local/Temp/presets/preset/preset.ts:91:34:
      91 │ ... '$middleware->appendToGroup('web', [\\App\\Http\\Middleware\\...
         │                                  ~~~
         ╵                                  ]


 ERROR  Build failed with 1 error:
../../../Users/User/AppData/Local/Temp/presets/preset/preset.ts:91:34: ERROR: Expected "]" but found "web"

Should we say I am doing something wrong or there's no support for Laravel 11 currently?

On the other hand, I need to ask if running the above command is that all I need to get hybridly to work, because in the documentation I saw another section that said server side setup.

Reproduction

github.com/MotionPhix

Steps to reproduce

Create a new Laravel App and then run npx @preset/cli apply hybridly/preset

System information

Windows 10

Used package manager

npm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

useForm's errors inconsistent initial/empty state value

Describe the bug

Current when the form is initialized, the errors property is an empty object, but after the first request, the property will be filled with all form fields keys and their value set to undefined

This makes hasErrors to be set to true, even though in reality no errors were thrown. so it basically becomes a false positive for any hasErrors checks.

Reproduction

Steps to reproduce

No response

System information

npmPackages:
    hybridly: 0.0.1-alpha.24 => 0.0.1-alpha.24

Used package manager

pnpm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

Layout plugin doesn't support sub-directories

Describe the bug

This is no bug. It's simply a lack of feature. It would be great if the layout plugin supports sub-directories, so you could do something like:

<template layout="public.default">

or

<template layout="public/default">

Given resources/views/layouts/public/default.vue exists.

Reproduction

Steps to reproduce

No response

System information

-

Used package manager

pnpm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

Document which `dirs` are included by default by `unplugin-vue-components`

It would be a good idea to document which folders are included by default for automatic component imports.

https://hybridly.dev/configuration/vite.html#vue-components

Currently, there is:

• ./${config.architecture.root}/components,

Dot-notated paths passed to the `useProperty` become invalid when reaching for a key past a nullable key

Describe the bug

Dot-notated paths passed to the useProperty composable are valid only until a nullable key is reached.

Reproduction

https://github.com/nhedger/hybridly-useProperty-issue

Steps to reproduce

Create the following data objects.

<?php # app/Data/GlobalProperties.php

namespace App\Data;

use Spatie\LaravelData\Data;

class GlobalProperties extends Data
{
    public function __construct(public readonly SecurityData $security) {}
}

<?php # app/Data/SecurityData.php

namespace App\Data;

use Spatie\LaravelData\Data;

class SecurityData extends Data
{
    public function __construct(
        public readonly ?UserData $user,
        public readonly string $test,
    ) {}
}

<?php # app/Data/UserData.php

namespace App\Data;

use Spatie\LaravelData\Data;

class UserData extends Data
{
    public function __construct(
        public readonly ?int $id,
        public readonly string $name,
        public readonly string $email,
    ) {}
}

Try accessing any key on the user

Try accessing any key on the user and see that it produces TypeScript error TS2345.

// TS2345: Argument of type '"security.user.id"' is not assignable to parameter of type 'Path '.
const name = useProperty('security.user.id');

// TS2345: Argument of type '"security.user.name"' is not assignable to parameter of type 'Path '.
const name = useProperty('security.user.name');

// TS2345: Argument of type '"security.user.email"' is not assignable to parameter of type 'Path '.
const name = useProperty('security.user.email');

System information

System:
    OS: macOS 13.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 4.99 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.3.0 - ~/Library/Caches/fnm_multishells/40931_1677913160299/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.2.0 - ~/Library/Caches/fnm_multishells/40931_1677913160299/bin/npm
  Browsers:
    Firefox: 110.0.1
    Safari: 16.2
  npmPackages:
    hybridly: link:../hybridly/packages/hybridly => 0.1.0-alpha.2

Used package manager

npm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

Not compatible with laravel11

Describe the bug

Http/Kernel.php does not exist in the newly created laravel11 project and cannot be installed

Reproduction

no need

Steps to reproduce

No response

System information

no need

Used package manager

npm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

`@vueuse/core` is included by default in `unplugin-auto-import`'s config, causing an error if it's not installed

Potential solution: hardcode a check that only includes the preset if @vueuse/core is actually in package.json.

Error: [auto-import] failed to load @vueuse/core, have you installed it?
    at vueuse_core_default (/Users/nicolas/Code/teamhub/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/chunk-GOGBRDVI.cjs:328:13)
    at /Users/nicolas/Code/teamhub/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/chunk-SSVXEZ6E.cjs:293:51
    at Array.map (<anonymous>)
    at flattenImports (/Users/nicolas/Code/teamhub/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/chunk-SSVXEZ6E.cjs:288:71)
    at createContext (/Users/nicolas/Code/teamhub/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/chunk-SSVXEZ6E.cjs:135:26)
    at /Users/nicolas/Code/teamhub/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/chunk-SSVXEZ6E.cjs:335:13
    at /Users/nicolas/Code/teamhub/node_modules/.pnpm/[email protected]/node_modules/unplugin/dist/index.js:1239:32
    at plugin (/Users/nicolas/Code/teamhub/node_modules/.pnpm/@[email protected]_htqmnotc5iyisqy34ybfrf72a4/node_modules/@hybridly/vite/dist/index.cjs:508:38)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Layout plugin doesn't support hyphen

Describe the bug

Currently the layout plugin doesn't support hyphens in the file name. For example this doesn't work:

<template layout="landing-layout">

Given the file exist in this path:

resources/views/layouts/landing-layout.vue

Reproduction

Steps to reproduce

No response

System information

Hybridly 0.0.1-alpha.11

Used package manager

pnpm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

The registerHook function does not get unregistered automatically on unmount

Describe the bug

When you have 2 different persistent layouts, and you add a registerHook to each one, when you navigate between them the registerHook for both will run. It appears the registerHook does not gets unregistered on component unMounted cycle.

Reproduction

Steps to reproduce

No response

System information

"hybridly": "0.0.1-alpha.16"

Used package manager

pnpm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

Unused field appear on 2nd form when doing multiple form on single page

Describe the bug

While creating a multiple form in a single page. I expect no additional field attached to the payload.

• First form is ok
  

• 2nd form will add fields from first form
  

Reproduction

https://github.com/imsus/hybridly-multi-form-bug

Steps to reproduce

1. npm run dev
2. go to /
3. submit form 1 (should be normal)
4. submit form 2 (notice why field1 is also added to the payload even though I don't add it to the field)

System information

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1
    Memory: 107.61 MB / 8.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 19.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 108.0.5359.94
    Chrome Canary: 110.0.5463.0
    Firefox: 107.0.1
    Safari: 16.1
  npmPackages:
    hybridly: ^0.0.1-alpha.14 => 0.0.1-alpha.14

Used package manager

npm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

Demonstration video not working

Describe the bug

See above. I am using an iPad.

Reproduction

https://hybridly.dev/guide/demonstration.html

Steps to reproduce

No response

System information

iOS 16.1.1

Used package manager

npm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

Cannot build the docs because of dead links

Describe the bug

I cannot build the docs locally (apparently, the CI also fails) because there are dead links in the documentation.

(!) Found dead link ./../api/vite/layout in file guide/comparison-with-inertia.md
(!) Found dead link ./../api/vue/index in file guide/hooks.md
(!) Found dead link ./../api/vite/layout in file guide/pages-and-layouts.md
(!) Found dead link ./../api/vite/layout in file guide/visual-studio-code.md

It looks like the following paths do not exist anymore.

• docs/api/vite
• docs/api/vue

Reproduction

https://github.com/hybridly/hybridly

Steps to reproduce

1. Attempt to build the docs with pnpm docs:build

System information

System:
    OS: macOS 13.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.76 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/Library/Caches/fnm_multishells/36059_1687446196824/bin/node
    npm: 8.19.3 - ~/Library/Caches/fnm_multishells/36059_1687446196824/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Edge: 114.0.1823.51
    Safari: 16.4
  npmPackages:
    @hybridly/core: workspace:* => 0.4.0 
    @hybridly/progress-plugin: workspace:* => 0.4.0 
    @hybridly/utils: workspace:* => 0.4.0 
    @hybridly/vite: workspace:* => 0.4.0 
    @hybridly/vue: workspace:* => 0.4.0 
    hybridly: workspace:* => 0.4.0

Used package manager

pnpm

Logs

Build log

~/Code/hybridly pnpm docs:build

> @0.4.0 docs:build /Users/nicolas/Code/hybridly
> vitepress build docs


  vitepress v1.0.0-beta.1

⠧ building client + server bundles...
The language 'gitignore' is not loaded, falling back to 'txt' for syntax highlighting.
⠴ building client + server bundles...

(!) Found dead link ./../api/vite/layout in file guide/comparison-with-inertia.md
(!) Found dead link ./../api/vue/index in file guide/hooks.md
(!) Found dead link ./../api/vite/layout in file guide/pages-and-layouts.md
(!) Found dead link ./../api/vite/layout in file guide/visual-studio-code.md

If this is expected, you can disable this check via config. Refer: https://vitepress.dev/reference/site-config#ignoredeadlinks

[vitepress] 4 dead link(s) found.
✖ building client + server bundles...
build error:
Error: 4 dead link(s) found.
    at Object.renderStart (file:///Users/nicolas/Code/hybridly/node_modules/vitepress/dist/node/serve-d5608de4.js:37067:15)
    at file:///Users/nicolas/Code/hybridly/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24899:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async PluginDriver.hookParallel (file:///Users/nicolas/Code/hybridly/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24827:9)
    at async Bundle.generate (file:///Users/nicolas/Code/hybridly/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17654:13)
    at async file:///Users/nicolas/Code/hybridly/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:26132:27
    at async catchUnfinishedHookActions (file:///Users/nicolas/Code/hybridly/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:25265:16)
 ELIFECYCLE  Command failed with exit code 1.

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

Missing documentation

There is documentation missing regarding a few features:

• routing: configuration, allowed vendors, excluded routes
• properties: top-level property case conversion
• i18n: lang path, write path

Hybridly unregisters Laravel's default view folder

Describe the bug

I believe that Hybridly may be unregistering Laravel's default resources/views folder.

I would not expect Hybridly to do so.

Reproduction

n/a

Steps to reproduce

In a fresh project without hybridly installed:

~/Code/without-hybridly php artisan tinker
Psy Shell v0.11.20 (PHP 8.2.7 — cli) by Justin Hileman
> app(Illuminate\View\Factory::class)->getFinder()->getPaths();
= [
    "/Users/nicolas/Code/without-hybridly/resources/views",
  ]

In a fresh project with hybridly installed (using the preset with defaults):

~/Code/with-hybridly php artisan tinker
Psy Shell v0.11.20 (PHP 8.2.7 — cli) by Justin Hileman
> app(Illuminate\View\Factory::class)->getFinder()->getPaths();
= [
    "/Users/nicolas/Code/with-hybridly/resources",
    "/Users/nicolas/Code/with-hybridly/frontend/application",
  ]

As you can see, the resources/views folder is no longer available.

System information

System:
    OS: macOS 13.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 902.06 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/Library/Caches/fnm_multishells/30173_1690994804380/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/30173_1690994804380/bin/yarn
    npm: 8.19.3 - ~/Library/Caches/fnm_multishells/30173_1690994804380/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 114.0.1823.79
    Safari: 16.5.2
  npmPackages:
    hybridly: ^0.4.2 => 0.4.2

Used package manager

pnpm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

Root Blade view is not resolved relative to the `architecture.root` path

Describe the bug

Hybridly cannot locate the root Blade view when the architecture.root option is set to an alternative path.

Current behaviour

Hybridly always attempts to locate the root Blade view at resources/application/root.blade.php.

Expected behaviour

Hybridly should attempt to locate the root Blade view at {architecture.root}/application/root.blade.php

Reproduction

https://github.com/nhedger/hybridly-root-view-issue

Steps to reproduce

1. Setup a new Laravel application: laravel new hybridly-root-view-issue
2. Apply the preset to the new installation: pnpm dlx @preset/cli apply hybridly/preset
3. Publish Hybridly's configuration file: php artisan vendor:publish --tag hybridly-config
4. Change the architecture.root option from resources/ to frontend/
5. Move the contents of the resources/ folder to the frontend/ folder
6. Run php artisan serve and attempt to load the page.
7. Assert that an View [root] not found. error is shown.

System information

System:
    OS: macOS 13.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.67 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/Library/Caches/fnm_multishells/22511_1687367505328/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/22511_1687367505328/bin/yarn
    npm: 8.19.3 - ~/Library/Caches/fnm_multishells/22511_1687367505328/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Edge: 114.0.1823.51
    Safari: 16.4
  npmPackages:
    hybridly: ^0.4.0 => 0.4.0

Used package manager

pnpm

Logs

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Hybridly issue and not an issue related to something else (Vite, Vue...). For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A, join our Discord server.
• The provided reproduction is a minimal reproducible example of the bug.

Dialogs get delayed due to view transitions

https://discord.com/channels/1032376983214116914/1080197260538826883/1151504295632580718