PHPackages                             tofandel/inertia-vue-modal - 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. [Utility & Helpers](/categories/utility)
4. /
5. tofandel/inertia-vue-modal

AbandonedArchivedLibrary[Utility & Helpers](/categories/utility)

tofandel/inertia-vue-modal
==========================

Display any inertia page in a modal

v0.2.26(3y ago)144.1k1[2 issues](https://github.com/Tofandel/inertia-vue3-modal/issues)GPL-3.0-or-laterVuePHP >=7.4

Since Aug 9Pushed 3y ago2 watchersCompare

[ Source](https://github.com/Tofandel/inertia-vue3-modal)[ Packagist](https://packagist.org/packages/tofandel/inertia-vue-modal)[ RSS](/packages/tofandel-inertia-vue-modal/feed)WikiDiscussions main Synced 1mo ago

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

Inertia Vue Modal
=================

[](#inertia-vue-modal)

> **Warning**
>
> I stopped development of this package and will not be using it anymore, there is a lot of issues with it and it is definitely not something I'd recommend using in production. Have a look at [momentum-modal](https://github.com/lepikhinb/momentum-modal) for an alternative or [hybridly](https://github.com/hybridly/hybridly) for complete inertia alternative (and much more)
>
> **Warning**

Limitations
-----------

[](#limitations)

This POC is a very early draft, so these limitations will probably be fixed soon.

- No support for nested modals (modal in modal)
- It doesn't use browser history navigation

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

[](#installation)

### Client-side installation

[](#client-side-installation)

```
composer require tofandel/inertia-vue-modal && npm i vendor/tofandel/inertia-vue-modal
```

In your layout, you need to add the `InertiaModal` component, here is an example using the Quasar Dialog

```

import { InertiaModal, ModalSlot } from "@tofandel/inertia-vue-modal";

```

##### Axios dependency

[](#axios-dependency)

It's very important that your project only uses one version of axios because of the use of interceptors, if you use webpack and your packages have conflicting versions of axios they will each be bundled separately and interceptors won't work To resolve this issue make sure that you add this to your webpack.config.js

```
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      //...
      'axios': path.resolve('node_modules/axios/dist/axios.js'),
    },
  },
  //...
}
```

### Server-side installation

[](#server-side-installation)

In your Laravel application, you need to extend our HandlesInertiaModalRequest middleware

```