├── LICENSE.md
├── README.md
├── package.json
└── src
    ├── ComponentModal.vue
    ├── IsModalable.vue
    ├── JetstreamModal.vue
    ├── Modalable.vue
    ├── ToModal.vue
    └── index.js


/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Protone Media B.V.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # This package is not maintained anymore, but it has a successor: [Inertia Modal](https://inertiaui.com/inertia-modal/docs/introduction?utm_source=github&utm_campaign=inertia-vue-modal-poc) 🚀 
  2 | 
  3 | # Inertia Vue Modal POC
  4 | 
  5 | I've copied the default [Laravel Jetstream](https://jetstream.laravel.com/2.x/stacks/inertia.html) modal component for this demo.
  6 | 
  7 | ## Blog post
  8 | 
  9 | [Proof of Concept: Load any route into a modal with Inertia.js using Laravel and Vue.js](https://protone.media/en/blog/proof-of-concept-load-any-route-into-a-modal-with-inertiajs-using-laravel-and-vuejs)
 10 | 
 11 | ## Limitations
 12 | 
 13 | This POC is a very early draft, so these limitations will probably be fixed soon.
 14 | 
 15 | * No support for nested modals (modal in modal)
 16 | * Only tested on Vue 2.6 + Laravel 8
 17 | * No access to the parent from within the modal
 18 | * No way to close the modal from the parent
 19 | * It doesn't use browser history navigation
 20 | 
 21 | ## Installation
 22 | 
 23 | ### Client-side installation
 24 | 
 25 | ```bash
 26 | npm i @protonemedia/inertia-vue-modal-poc
 27 | ```
 28 | 
 29 | The only dependency for this POC to work is [vue-portal](https://github.com/LinusBorg/portal-vue).
 30 | 
 31 | In your main JavaScript file, register the `Modalable` and `ToModal` components:
 32 | 
 33 | ```javascript
 34 | import Vue from "vue";
 35 | import { Modalable, ToModal } from "@protonemedia/inertia-vue-modal-poc"
 36 | import PortalVue from "portal-vue";
 37 | 
 38 | Vue.component("Modalable", Modalable);
 39 | Vue.component("ToModal", ToModal);
 40 | Vue.use(PortalVue)
 41 | ```
 42 | 
 43 | In your root layout, you need to add the `ComponentModal` as the last component of your template:
 44 | 
 45 | ```vue
 46 | <template>
 47 |   <div class="min-h-screen">
 48 |     <nav></nav>
 49 | 
 50 |     <!-- Page Content -->
 51 |     <main>
 52 |       <slot />
 53 |     </main>
 54 | 
 55 |     <ComponentModal />
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | import { ComponentModal } from "@protonemedia/inertia-vue-modal-poc"
 61 | 
 62 | export default {
 63 |   components: {
 64 |     ComponentModal,
 65 |   },
 66 | };
 67 | </script>
 68 | ```
 69 | 
 70 | ### Server-side installation
 71 | 
 72 | In your Laravel application, you only need to add a few lines of code to the `HandleInertiaRequests` middleware.
 73 | 
 74 | 1. Add the `handle` method to the `HandleInertiaRequests` middleware.
 75 | 2. Add the `isModal` property to the shared data array.
 76 | 
 77 | ```php
 78 | <?php
 79 | 
 80 | namespace App\Http\Middleware;
 81 | 
 82 | use Closure;
 83 | use Illuminate\Http\Request;
 84 | use Inertia\Inertia;
 85 | use Inertia\Middleware;
 86 | use Symfony\Component\HttpFoundation\RedirectResponse;
 87 | 
 88 | class HandleInertiaRequests extends Middleware
 89 | {
 90 |     public function handle(Request $request, Closure $next)
 91 |     {
 92 |         $response = parent::handle($request, $next);
 93 | 
 94 |         if ($response instanceof RedirectResponse && (bool) $request->header('X-Inertia-Modal-Redirect-Back')) {
 95 |             return back(303);
 96 |         }
 97 | 
 98 |         if (Inertia::getShared('isModal')) {
 99 |             $response->headers->set('X-Inertia-Modal', true);
100 |         }
101 | 
102 |         return $response;
103 |     }
104 | 
105 |     public function share(Request $request)
106 |     {
107 |         return array_merge(parent::share($request), [
108 |             'isModal' => (bool) $request->header('X-Inertia-Modal'),
109 |         ]);
110 |     }
111 | }
112 | ```
113 | 
114 | ## Usage
115 | 
116 | Since we added the `ComponentModal` component, the global `$inertia` object now has a `visitInModal` method. This allows you to make an Inertia visit that loads into the modal.
117 | 
118 | You can use this method, for example, in the `@click` handler of a button:
119 | 
120 | ```vue
121 | <button @click="$inertia.visitInModal('/user/create')">Load in modal</button>
122 | ```
123 | 
124 | Instead of using the method in your template, you can also use it in your script:
125 | 
126 | ```vue
127 | <script>
128 | export default {
129 |   methods: {
130 |     openModal() {
131 |       this.$inertia.visitInModal('/user/create');
132 |     },
133 |   },
134 | };
135 | </script>
136 | ```
137 | 
138 | ### Update the page you want to load into a modal
139 | 
140 | In most cases, the `/user/create` endpoint renders a form that's wrapped into a template, maybe with other components and components to style the form. Here's a simple example of what the `UserCreate.vue` component might look like:
141 | 
142 | ```vue
143 | <template>
144 |   <!-- app-layout provides the sidebar navigation and footer -->
145 |   <app-layout>
146 |     <!-- form-panel provides a nice padding and shadow -->
147 |     <form-panel>
148 |       <form @submit.prevent="form.post('/user/store')">
149 |         <input type="text" v-model="form.name">
150 |         <input type="email" v-model="form.email">
151 | 
152 |         <button type="submit">Login</button>
153 |       </form>
154 |     </form-panel>
155 |   </app-layout>
156 | </template>
157 | 
158 | <script>
159 | export default {
160 |   data() {
161 |     return {
162 |       form: this.$inertia.form({
163 |         name: "",
164 |         email: "",
165 |       }),
166 |     };
167 |   },
168 | };
169 | </script>
170 | ```
171 | 
172 | To load this form into a modal, we don't want the sidebar, footer, and styling from the `form-panel` component. We want just the `form` itself!
173 | 
174 | To accomplish this, you need to do three things:
175 | 
176 | 1. Add the `IsModalable` mixin to your component.
177 | 2. Wrap your *whole* component into the `Modalable` component.
178 | 3. Move the `form` to a separate `#toModal` template and replace it with a `ToModal` component.
179 | 
180 | ```vue
181 | <template>
182 |   <!-- the new Modalable root component -->
183 |   <Modalable :is-modal="isModal">
184 |     <!-- the 'old' root component -->
185 |     <app-layout>
186 |       <form-panel>
187 |         <!-- the previous location of the form, replaced by the ToModal component -->
188 |         <ToModal />
189 |       </form-panel>
190 |     </app-layout>
191 | 
192 |     <template #toModal>
193 |       <!-- the 'new' location of the form -->
194 |       <form @submit.prevent="form.post('/user.store')">
195 |         <input type="text" v-model="form.name">
196 |         <input type="email" v-model="form.email">
197 | 
198 |         <button type="submit">Login</button>
199 |       </form>
200 |     </template>
201 |   </Modalable>
202 | </template>
203 | 
204 | <script>
205 | import { IsModalable } from "@protonemedia/inertia-vue-modal-poc"
206 | 
207 | export default {
208 |   mixins: [IsModalable],
209 | 
210 |   components: {
211 |     Modalable
212 |   },
213 | 
214 |   data() {
215 |     return {
216 |       form: this.$inertia.form({
217 |         name: "",
218 |         email: "",
219 |       }),
220 |     };
221 |   },
222 | };
223 | </script>
224 | ```
225 | 
226 | Now when you visit `/user/create`, nothing has changed! You still have your layout and `form-panel` styling. But when you load this component into a modal, it will only render the `form`.
227 | 
228 | ### Handling redirects
229 | 
230 | By default, redirects are handled as any other Inertia request. For example you're visiting `/user`, you open `/user/create` in a modal, and after a successful submit, you redirect the user to the detail page of the newly created user:
231 | 
232 | ```php
233 | public function store(UserStoreRequest $request)
234 | {
235 |     $user = User::create(...);
236 | 
237 |     return redirect()->route('user.show', $user);
238 | }
239 | ```
240 | 
241 | You might not always want to route to the detail page. Luckily, you don't have to update your server-side implementation.
242 | 
243 | The `visitInModal` method accepts a second argument that can either a Boolean or a callback. Instead of redirecting the user, the user stays on the same page, and you can manually handle the event with the callback. This callback is executed after a successful request, for example, when the new user is stored in the database.
244 | 
245 | ```javascript
246 | this.$inertia.visitInModal('/user/create', (event) => {
247 |   // do something
248 | });
249 | ```
250 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@protonemedia/inertia-vue-modal-poc",
 3 |   "version": "0.0.1",
 4 |   "description": "Proof of concept for loading routes/components into a modal",
 5 |   "main": "src/index.js",
 6 |   "author": "Pascal Baljet",
 7 |   "license": "MIT",
 8 |   "private": false,
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/protonemedia/inertia-vue-modal-poc.git"
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/ComponentModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <JetstreamModal :show="modal != null" @close="close">
 3 |     <component v-if="modal" :is="modal.component" v-bind="modal.page.props" />
 4 |   </JetstreamModal>
 5 | </template>
 6 | 
 7 | <script>
 8 | import JetstreamModal from "./JetstreamModal";
 9 | import Axios from "axios";
10 | import {
11 |   hrefToUrl,
12 |   urlWithoutHash,
13 |   mergeDataIntoQueryString,
14 | } from "@inertiajs/inertia";
15 | 
16 | export default {
17 |   components: { JetstreamModal },
18 | 
19 |   data() {
20 |     return {
21 |       modal: null,
22 |     };
23 |   },
24 | 
25 |   beforeMount() {
26 |     this.$inertia.visitInModal = (url, onSuccess) => {
27 |       this.visitInModal(url, onSuccess);
28 |     };
29 | 
30 |     this.$inertia.on("success", (event) => {
31 |       if (typeof this.modal?.onSuccess === "function") {
32 |         this.modal.onSuccess(event);
33 |       }
34 | 
35 |       this.close();
36 |     });
37 |   },
38 | 
39 |   methods: {
40 |     close() {
41 |       if (this.modal) {
42 |         // remove the 'X-Inertia-Modal' and 'X-Inertia-Modal-Redirect-Back' headers for future requests
43 |         this.modal.removeBeforeEventListener();
44 |       }
45 | 
46 |       this.modal = null;
47 |     },
48 | 
49 |     visitInModal(url, onSuccess) {
50 |       let data = {};
51 | 
52 |       [url, data] = mergeDataIntoQueryString("get", hrefToUrl(url), {});
53 | 
54 |       Axios({
55 |         method: "get",
56 |         url: urlWithoutHash(url).href,
57 |         data: {},
58 |         params: data,
59 |         headers: {
60 |           Accept: "text/html, application/xhtml+xml",
61 |           "X-Requested-With": "XMLHttpRequest",
62 |           "X-Inertia": true,
63 |           "X-Inertia-Modal": true,
64 |           "X-Inertia-Version": this.$page.version,
65 |         },
66 |       }).then((response) => {
67 |         const Inertia = this.$inertia;
68 |         const page = response.data;
69 | 
70 |         return Promise.resolve(Inertia.resolveComponent(page.component)).then(
71 |           (component) => {
72 |             const clone = JSON.parse(JSON.stringify(page));
73 |             clone.props = Inertia.transformProps(clone.props);
74 | 
75 |             const removeBeforeEventListener = Inertia.on("before", (event) => {
76 |               // make sure the backend knows we're requesting from within a modal
77 |               event.detail.visit.headers["X-Inertia-Modal"] = true;
78 | 
79 |               if (onSuccess) {
80 |                 event.detail.visit.headers[
81 |                   "X-Inertia-Modal-Redirect-Back"
82 |                 ] = true;
83 |               }
84 |             });
85 | 
86 |             this.modal = {
87 |               component,
88 |               onSuccess,
89 |               removeBeforeEventListener,
90 |               page: clone,
91 |             };
92 |           }
93 |         );
94 |       });
95 |     },
96 |   },
97 | };
98 | </script>


--------------------------------------------------------------------------------
/src/IsModalable.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     isModal: {
 5 |       type: Boolean,
 6 |       default: false,
 7 |     },
 8 |   },
 9 | };
10 | </script>


--------------------------------------------------------------------------------
/src/JetstreamModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition leave-active-class="duration-200">
  3 |     <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50">
  4 |       <transition
  5 |         enter-active-class="ease-out duration-300"
  6 |         enter-class="opacity-0"
  7 |         enter-to-class="opacity-100"
  8 |         leave-active-class="ease-in duration-200"
  9 |         leave-class="opacity-100"
 10 |         leave-to-class="opacity-0"
 11 |       >
 12 |         <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
 13 |           <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 14 |         </div>
 15 |       </transition>
 16 | 
 17 |       <transition
 18 |         enter-active-class="ease-out duration-300"
 19 |         enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 20 |         enter-to-class="opacity-100 translate-y-0 sm:scale-100"
 21 |         leave-active-class="ease-in duration-200"
 22 |         leave-class="opacity-100 translate-y-0 sm:scale-100"
 23 |         leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 24 |       >
 25 |         <div
 26 |           :dusk="dusk"
 27 |           v-show="show"
 28 |           class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
 29 |           :class="maxWidthClass"
 30 |         >
 31 |           <slot></slot>
 32 |         </div>
 33 |       </transition>
 34 |     </div>
 35 |   </transition>
 36 | </template>
 37 | 
 38 | <script>
 39 | export default {
 40 |   props: {
 41 |     dusk: {
 42 |       default: "",
 43 |     },
 44 |     show: {
 45 |       default: false,
 46 |     },
 47 |     maxWidth: {
 48 |       default: "2xl",
 49 |     },
 50 |     closeable: {
 51 |       default: true,
 52 |     },
 53 |   },
 54 | 
 55 |   methods: {
 56 |     close() {
 57 |       if (this.closeable) {
 58 |         this.$emit("close");
 59 |       }
 60 |     },
 61 |   },
 62 | 
 63 |   watch: {
 64 |     show: {
 65 |       immediate: true,
 66 |       handler: (show) => {
 67 |         if (show) {
 68 |           document.body.style.overflow = "hidden";
 69 |         } else {
 70 |           document.body.style.overflow = null;
 71 |         }
 72 |       },
 73 |     },
 74 |   },
 75 | 
 76 |   created() {
 77 |     const closeOnEscape = (e) => {
 78 |       if (e.key === "Escape" && this.show) {
 79 |         this.close();
 80 |       }
 81 |     };
 82 | 
 83 |     document.addEventListener("keydown", closeOnEscape);
 84 | 
 85 |     this.$once("hook:destroyed", () => {
 86 |       document.removeEventListener("keydown", closeOnEscape);
 87 |     });
 88 |   },
 89 | 
 90 |   computed: {
 91 |     maxWidthClass() {
 92 |       return {
 93 |         sm: "sm:max-w-sm",
 94 |         md: "sm:max-w-md",
 95 |         lg: "sm:max-w-lg",
 96 |         xl: "sm:max-w-xl",
 97 |         "2xl": "sm:max-w-2xl",
 98 |       }[this.maxWidth];
 99 |     },
100 |   },
101 | };
102 | </script>
103 | 


--------------------------------------------------------------------------------
/src/Modalable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <portal-target v-if="isModal" :name="portalName" />
 4 |     <slot v-else></slot>
 5 | 
 6 |     <portal :to="portalName">
 7 |       <slot name="toModal" />
 8 |     </portal>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: {
15 |     isModal: {
16 |       type: Boolean,
17 |       default: false,
18 |     },
19 | 
20 |     portalName: {
21 |       type: String,
22 |       default: "visit-modal",
23 |       required: false,
24 |     },
25 |   },
26 | };
27 | </script>


--------------------------------------------------------------------------------
/src/ToModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <portal-target :name="portalName" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     portalName: {
 9 |       type: String,
10 |       default: "visit-modal",
11 |       required: false,
12 |     },
13 |   },
14 | };
15 | </script>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as ComponentModal } from './ComponentModal'
2 | export { default as IsModalable } from './IsModalable'
3 | export { default as JetstreamModal } from './JetstreamModal'
4 | export { default as Modalable } from './Modalable'
5 | export { default as ToModal } from './ToModal'
6 | 


--------------------------------------------------------------------------------