pletox/alpine-blade-setup

Enable <script setup> with props(), mount(), and auto-imports for Alpine.js in Blade components and pages.

v1.0.0 2025-07-12 01:19 UTC

Requires

• php: >=8.1
• illuminate/support: ^9.0 || ^10.0 || ^11.0 || ^12.0

MIT

• Pletox Technologies

README

Use Vue-style <script setup> in Laravel Blade components and pages with support for:

• props([...]) → @props([...])
• mount(...) => ({}) → x-data="{...}"
• Computed get x() {} → x() { ... }
• Auto-imports from @/utils/xyz.js

Installation

composer require pletox/alpine-blade-setup

Usage

In your Blade file:

<script setup>
import { formatTime } from '@/utils/time'

props(['from'])

mount(props => ({
    seconds: 0,
    get time() { return formatTime(this.seconds) }
}))
</script>

<div x-text="time"></div>

License

MIT