PHPackages                             mxent/pwax - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. mxent/pwax

ActiveLibrary[Framework](/categories/framework)

mxent/pwax
==========

Progressive Web App built with Laravel & Vue

v1.48.0(9mo ago)045MITPHPPHP >=8.2CI passing

Since Aug 16Pushed 3mo agoCompare

[ Source](https://github.com/mxent/pwax)[ Packagist](https://packagist.org/packages/mxent/pwax)[ RSS](/packages/mxent-pwax/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (2)Versions (3)Used By (0)

mxent/pwax
==========

[](#mxentpwax)

Progressive Web App built with Laravel & Vue

A Laravel package that seamlessly integrates Vue 3, Vue Router, and Pinia to build Progressive Web Applications with dynamic component loading and SPA-like experiences.

Features
--------

[](#features)

- 🚀 **Vue 3 Integration** - Modern reactive framework with Composition API support
- 🛣️ **Vue Router** - Client-side routing with hash or history mode
- 🗄️ **Pinia State Management** - Official Vue state management library
- 📦 **Dynamic Component Loading** - Load Vue components on-demand via AJAX
- ⚡ **Code Minification** - Automatic JS/CSS minification for optimal performance
- 🎨 **Customizable** - Extensive configuration options for plugins, directives, and middleware
- 🔄 **Hot Module Injection** - Dynamically inject CSS, JavaScript, and templates from Blade views

Requirements
------------

[](#requirements)

- PHP >= 8.2
- Laravel >= 12.0
- Composer

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require mxent/pwax
```

The service provider is auto-discovered by Laravel, so no additional setup is required.

Configuration
-------------

[](#configuration)

Publish the configuration file:

```
php artisan vendor:publish --tag=pwax-config
```

This creates `config/pwax.php` with the following options:

```
return [
    // Use hash-based routing (#/) or history mode
    'hash_route' => false,

    // Route name for the home page
    'home' => 'index',

    // Prefix for internal pwax routes
    'route_prefix' => '__pwax__',

    // Override default Blade templates
    'blade' => [
        'content' => null,
        'head' => null,
        'foot' => null,
        'error' => null,
        'loader' => null,
    ],

    // Customize loading spinner appearance
    'customization' => [
        'init_spinner_color' => '#0c83ff',
        'init_spinner_bg' => '#f3f3f3',
    ],

    // Additional stylesheets to include
    'styles' => [],

    // CDN URLs for Vue, Vue Router, and Pinia
    'scripts' => [
        'https://unpkg.com/vue@3.5.18/dist/vue.global.prod.js',
        'https://unpkg.com/vue-router@4.5.1/dist/vue-router.global.prod.js',
        'https://unpkg.com/pinia@3.0.3/dist/pinia.iife.prod.js',
    ],

    // Custom Vue plugins
    'plugins' => [],

    // Custom Vue directives
    'directives' => [],

    // Route middleware to execute before component load
    'middleware' => [],
];
```

Publishing Views
----------------

[](#publishing-views)

Publish the view files to customize the layout:

```
php artisan vendor:publish --tag=pwax-views
```

This publishes views to `resources/views/vendor/pwax/`.

Usage
-----

[](#usage)

### Creating a Vue Component

[](#creating-a-vue-component)

Create a Blade view that contains ``, ``, and `` sections:

```
{{-- resources/views/components/hello.blade.php --}}

        {{ message }}
        Count: {{ count }}

export default {
    data() {
        return {
            message: 'Hello from PWax!',
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++
        }
    }
}

.hello {
    padding: 20px;
    text-align: center;
}

```

### Rendering a Component

[](#rendering-a-component)

In your controller, use the `vue()` helper function:

```
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return vue('components.hello');
    }

    public function profile()
    {
        return vue('components.profile', [
            'user' => auth()->user()
        ]);
    }
}
```

### Routing

[](#routing)

Define your routes as usual in `routes/web.php`:

```
Route::get('/', [HomeController::class, 'index'])->name('index');
Route::get('/profile', [HomeController::class, 'profile'])->name('profile');
Route::get('/about', [HomeController::class, 'about'])->name('about');
```

Use the `router()` helper to generate Vue Router compatible paths:

```

        Home
        Profile
        About

export default {
    methods: {
        router(name, params = {}) {
            return window.router(name, params)
        }
    }
}

```

### Dynamic Imports

[](#dynamic-imports)

Use the `import()` helper to dynamically import components:

```

export default {
    async mounted() {
        // Import a component
        const { default: MyComponent } = await @import('components.my-component')

        // Import with variable assignment
        const MyModal = await @import('MyModal from components.modal')
    }
}

```

Advanced Configuration
----------------------

[](#advanced-configuration)

### Custom Plugins

[](#custom-plugins)

Register custom Vue plugins in `config/pwax.php`:

```
'plugins' => [
    [
        'name' => 'myPlugin',
        'init' => 'app.use(MyCustomPlugin, { option: "value" })'
    ]
],
```

### Custom Directives

[](#custom-directives)

Add custom Vue directives:

```
'directives' => [
    [
        'name' => 'focus',
        'init' => 'app.directive("focus", { mounted(el) { el.focus() } })'
    ]
],
```

### Middleware

[](#middleware)

Execute JavaScript before component loads:

```
'middleware' => [
    [
        'name' => 'auth',
        'init' => 'if (!user.isAuthenticated) { window.location = "/login" }'
    ]
],
```

Security Best Practices
-----------------------

[](#security-best-practices)

- ⚠️ **View Names**: Only use trusted view names. The package validates view names to prevent path traversal attacks.
- 🔒 **Config Values**: Avoid adding user-supplied data directly to config arrays like plugins or directives.
- 🛡️ **CSRF Protection**: Ensure CSRF tokens are included in AJAX requests if modifying data.
- 📝 **Input Validation**: Always validate and sanitize user input in your components.

Testing
-------

[](#testing)

Run tests (if implemented):

```
composer test
```

Changelog
---------

[](#changelog)

See [CHANGELOG.md](CHANGELOG.md) for version history and updates.

Contributing
------------

[](#contributing)

Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.

License
-------

[](#license)

This package is open-sourced software licensed under the [MIT license](LICENSE).

Credits
-------

[](#credits)

- [Mxent Open Source Team](mailto:opensource@mxent.com)
- [All Contributors](../../contributors)

Support
-------

[](#support)

For issues, questions, or feature requests, please [open an issue](../../issues) on GitHub.

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance71

Regular maintenance activity

Popularity8

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

276d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7c910069024f89752405ef4647f7fe1e41bfc5a958a718a8c04d022893dec56e?d=identicon)[mikkiesco](/maintainers/mikkiesco)

---

Top Contributors

[![mikkiesco](https://avatars.githubusercontent.com/u/99265192?v=4)](https://github.com/mikkiesco "mikkiesco (70 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (6 commits)")

### Embed Badge

![Health badge](/badges/mxent-pwax/health.svg)

```
[![Health](https://phpackages.com/badges/mxent-pwax/health.svg)](https://phpackages.com/packages/mxent-pwax)
```

###  Alternatives

[laravel/socialite

Laravel wrapper around OAuth 1 & OAuth 2 libraries.

5.7k96.9M674](/packages/laravel-socialite)[laravel/horizon

Dashboard and code-driven configuration for Laravel queues.

4.1k84.2M225](/packages/laravel-horizon)[laravel/ui

Laravel UI utilities and presets.

2.7k134.9M601](/packages/laravel-ui)[laravel/jetstream

Tailwind scaffolding for the Laravel framework.

4.1k19.8M136](/packages/laravel-jetstream)[stancl/tenancy

Automatic multi-tenancy for your Laravel application.

4.3k6.6M40](/packages/stancl-tenancy)[internachi/modular

Modularize your Laravel apps

1.1k662.4k8](/packages/internachi-modular)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)