This package allows you to show a placeholder-component while inertia fetches the content of ne new page while routing

Overview

inertia vue placeholder middleware

This package adds a component placeholder middleware for inertia vue. instead of the InertiaProgressBar you can show predefined components while inertia is loading the requested page.

Usage

install

npm i inertia-vue-placeholder-middleware -S

import and setup

import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { Inertia } from  "@inertiajs/inertia";
import  inertiaPlaceholder  from  "inertia-vue-placeholder-middleware/dist";

createInertiaApp({
	title: (title) =>  `${title} - ${appName}`,
	resolve: (name) => {
		return  require(`./Pages/${name}.vue`);
	},
	setup({ el, app, props, plugin }) {
		const  vueApp = createApp({ render: () =>  h(app, props) })
			.use(plugin)
			.mixin({ methods: { route } })
			.mount(el);
		inertiaPlaceholder().init(vueApp, Inertia, (name) => {
			return  require(`./Placeholder/${name}Placeholder.vue`).default;
		});
		return  vueApp;
	},
});

Update inertia link in vue template

<Link href="/" placeholder="Dashboard" timeout="100"/>

Configuration

inertiaPlaceholder() accepts following options:

Option Description
placeholderAttr (default = placeholder) defines the name of the html attribute to look for the component name
timeoutAttr(default = timeout) defines the name of the html attribute to look for the timeout value
You might also like...

πŸ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

πŸ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Jan 9, 2023

πŸ‰ Material Component Framework for Vue

πŸ‰ Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

Jan 3, 2023

Universal select/multiselect/tagging component for Vue.js

Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Jan 6, 2023

:fire::fire::fire: εΌΊε€§ηš„εŠ¨ζ€θ‘¨ε•η”Ÿζˆε™¨|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON.

:fire::fire::fire: εΌΊε€§ηš„εŠ¨ζ€θ‘¨ε•η”Ÿζˆε™¨|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON.

form-create form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions thr

Jan 3, 2023

:clipboard: A schema-based form generator component for Vue.js

:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Dec 27, 2022

A multi-select component with nested options support for Vue.js

A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Jan 5, 2023

A preview component of the creator with more information on hover.

A preview component of the creator with more information on hover.

vue-creator-preview Introduction A preview component of the creator with more information on hover. Checkout the Demo here. Installation Install using

Jun 20, 2021

A simple, customization star rating component for your vue3 projects

A simple, customization star rating component for your vue3 projects

vue3-star-ratings A simple, customizable component for star ratings Documentation Features Uses svg for the stars, so it can scale without quality los

Oct 7, 2022

Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template.

vue2-shortcut Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template. Install $ npm install --save vu

Aug 14, 2022
Owner
null
A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free β€’ Open Source β€’ Notification View Demo Β· Report Bug Β· Requ

StatusBase 194 Jul 5, 2022
Wordle is a simple word game created by a Software Engineer Wardle. I made this simple helper app to show remaining words in each step.

Wordle Helper Wordle is a simple word game created by a Software Engineer Wardle. I made this simple helper app to show remaining words in each step.

Anwarul Islam 5 Oct 24, 2022
Stale-while-revalidate data fetching for Vue

swrv swrv (pronounced "swerve") is a library using the @vue/composition-api for remote data fetching. It is largely a port of swr. Documentation The n

Kong 1.8k Dec 29, 2022
jump to local IDE source code while click the element of browser automatically.

?? Introduction A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It support

webfansplz 413 Dec 30, 2022
Everything you wish the HTML