The plugin page loader for Inertia.js

Related tags

Learning resource inertia-plugin
Overview

Inertia Plugin

NPM version Software License Total Downloads

Warning: This plugin status is experimental, don't use it for the production application.

The plugin page loader for Inertia.js, that allows the server-side to use Inertia::render('my-package::Page');.

Install

npm i inertia-plugin -D
Vite 
// vite.config.js
import Inertia from 'inertia-plugin/vite'

export default defineConfig({
  plugins: [
    Inertia({ /* options */ }),
  ],
})


Webpack 
// webpack.config.js
const inertiaPlugin = require('inertia-plugin/webpack').default

module.exports = {
  /* ... */
  plugins: [
    inertiaPlugin({ /* options */ })
  ]
}


Laravel Mix 
// webpack.mix.js
const inertiaPlugin = require('inertia-plugin/webpack').default

mix
  .webpackConfig({
    plugins: [
      inertiaPlugin({ /* options */ }),
    ],
  })


Type

Add to env.d.ts:

/// <reference types="inertia-plugin/client" />

Configuration

Inertia({
  // Current work directory
  cwd: process.cwd(),

  // Define namespace mapping
  namespaces: [],

  // Namespace separator
  separator: '::',

  // Module extension
  // (Defaults to '.vue' if not set and used with vite)
  extension: '',

  // Use `import()` to load pages for webpack, default is using `require()`
  // Only for webpack
  import: false,

  // Enable SSR mode
  ssr: false,
})

Usage with Vite

Add inertia-plugin to vite.config.js:

import Inertia from 'inertia-plugin/vite'

export default defineConfig({
  plugins: [
    Inertia({
      namespaces: [
        { 'my-package-1': 'node_modules/my-plugin1/src/Pages' },
        { 'my-package-2': 'node_modules/my-plugin2/src/Pages' },
      ],
    }),
  ],
})

And use resolvePage() in resources/js/app.js to resolve the app pages and namespaced pages (don't use one line function):

import { resolvePage } from '~inertia'

createInertiaApp({
  resolve: resolvePage(() => {
    return import.meta.glob('./pages/**/*.vue')
  }),
})

Or you can add persistent layout:

import Layout from './Layout'

createInertiaApp({
  resolve: resolvePage(name => {
    return import.meta.glob('./pages/**/*.vue')
  }, page => {
    page.layout = Layout
    return page
  }),
})

Usage with Laravel Mix

Add inertia-plugin to webpack.mix.js:

mix
  .webpackConfig({
    plugins: [
      inertiaPlugin({
        namespaces: ({ npm, composer }) => [
          { 'my-package-1': 'node_modules/my-plugin1/src/Pages' },
          { 'my-package-2': 'node_modules/my-plugin2/src/Pages' },
        ],
      }),
    ],
  })

And use resolvePage() in resources/js/app.js to resolve the app pages and namespaced pages:

import { resolvePage } from '~inertia'

createInertiaApp({
  resolve: resolvePage(name => require(`./pages/${name}`)),
})

Or you can add persistent layout:

import Layout from './Layout'

createInertiaApp({
  resolve: resolvePage(name => require(`./pages/${name}`), page => {
    page.layout = Layout
    return page
  }),
})

Load namespace in package

If you create a plugin with Inertia pages, the plugin user can use the function npm() or composer() to load the namespace:

export default defineConfig({
  plugins: [
    Inertia({
      namespaces: ({ npm, composer }) => [
        // define namespace mapping:
        { 'my-package-1': 'node_modules/my-plugin1/src/Pages' },
        { 'my-package-2': 'node_modules/my-plugin2/src/Pages' },

        // load namespace from npm package:
        npm('my-plugin2'),

        // load namespace from composer package:
        composer('ycs77/my-php-package'),
      ],
    }),
  ],
})

If you created is npm package, must be added the inertia field to define the namespace mapping, for example in node_modules/my-plugin2/package.json, and you would put pages into src/other-pages directory:

{
  "name": "my-plugin2",
  "inertia": {
    "my-package-2": "src/other-pages"
  }
}

If you created is composer package, must be added the extra.inertia field to define the namespace mapping, for example in vendor/ycs77/my-php-package/composer.json, and you would put pages into resources/js/Pages directory:

{
    "name": "ycs77/my-php-package",
    "extra": {
        "inertia": {
            "my-php-package": "resources/js/Pages"
        }
    }
}

Credits

License

MIT LICENSE

You might also like...

Lingui loader for Vite, Rollup, Webpack, and more

unplugin-lingui-loader It’s a good practice to use compiled message catalogs during development. However, running compile everytime messages are chang

Nov 3, 2022

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Jan 1, 2023

A slick loader to use during your AJAX calls or data processing

Slick Loader A slick loader to use during your AJAX calls or data processing Doc Installation Simply import slick-loader into your HTML. link rel="st

Jan 21, 2022

Webpack dev tools to make performance analysis, error investigation and loader development more convenient

Webpack dev tools to make performance analysis, error investigation and loader development more convenient

build-tool-inspector Introduction Webpack dev tools to make performance analysis, error investigation and loader development more convenient. Provide

Nov 17, 2022

three.js loader for importing M2 assets from World of Warcraft.

three.js loader for importing M2 assets from World of Warcraft.

three-m2loader · M2 Loader for three.js three-m2loader allows you to import M2 assets from World of Warcraft into your three.js app. druidcat2.m2 7ne_

Dec 30, 2022

Customisable javascript skeleton loader.

Customisable javascript skeleton loader.

JS Skeleton loader Simple but very powerful loader package built with full javascript. Installation To install this package, include index.js file int

Dec 1, 2022

Finally, a simple, lightweight (0.6kb), pure JavaScript image lazy loader that even works in IE* using the IntersectionObserver API

Simply Lazy A simple & lightweight (0.6kb), pure JavaScript image lazy loader that even works in IE* utilizing the built in IntersectionObserver API i

Dec 26, 2022

This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Aug 22, 2022

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Dec 7, 2022
Comments
  • Is this how this plug-in is supposed to work?

    Is this how this plug-in is supposed to work?

    Hi,

    So I'm playing around with your inertia plugin, however my vite.config.ts doesn't seem to be building my module correctly, Am I over-thinking how this plug-in works? Probably, but that's why I figured I'd ask. :p

    Test Repository

    Thanks!

    opened by lighth7015 1
  • Add a way to load plugin on runtime

    Add a way to load plugin on runtime

    Is your feature request related to a problem? Please describe. I want my users to be able to install plugins with composer and be able to use them without building JS with Vite.

    Describe the solution you'd like An alternative way to load plugins on runtime

    enhancement 
    opened by maicol07 1
  • Load pages on runtime

    Load pages on runtime

    Supports the way to load pages on runtime (#1)

    Usage

    Sometimes you may want users to use the pages without compiling them after installing the composer package, at this time you can load them at runtime. This is the package directory structure:

    resources/js/
  ├── my-runtime-pluin.js
  └── pages/
     ├── Some.vue
     └── Other.vue

    Use the InertiaPlugin runtime API in resources/js/my-runtime-pluin.js to load pages:

    window.InertiaPlugin.addNamespace('MyRuntimePluin', name => require(`./Pages/${name}`))

    And setting webpack.mix.js to build assets:

    const mix = require('laravel-mix')

mix
  .setPublicPath('public')
  .js('resources/js/my-runtime-pluin.js', 'public/js')
  .vue({ runtimeOnly: true })
  .version()
  .disableNotifications()

    Now you can publish this package and install it in the Inertia app, publish assets (my-runtime-pluin.js) to public/vendor, and open app.blade.php to include scripts to load pages:

    <head>
  <script src="https://unpkg.com/inertia-plugin@^0.4" defer></script>
  <script src="/vendor/my-runtime-pluin/js/my-runtime-pluin.js" defer></script>
  <!-- app.js must be last one -->
  <script src="{{ mix('/js/app.js') }}" defer></script>
</head>

    But the app.js must build with inertia-plugin, you can follow Install chapter to install it (does not need to include any option), like this:

    export default defineConfig({
  plugins: [
    Inertia(),
  ],
})

    Over, using pages:

    Inertia::render('MyRuntimePluin::Some');
    opened by ycs77 0
Releases(v0.5.1)
Owner
Lucas Yang
夜空中的小星星，也會閃耀著光芒~~
Lucas Yang
GitHub
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
Node.js ESM loader for chaining multiple custom loaders.

ESMultiloader Node.js ESM loader for chaining multiple custom loaders. Fast and lightweight No configuration required, but configurable if needed Usag

jhmaster2000 2 Sep 12, 2022
Node.js loader for compiling ESM & TypeScript modules to CommonJS

cjs-loader Node.js require() hook to instantaneously transform ESM & TypeScript to CommonJS on demand using esbuild. Features Transforms ESM & TypeScr

esbuild kit 40 Dec 13, 2022
Node.js loader for compiling TypeScript modules to ESM

esm-loader Node.js import hook to instantaneously transform TypeScript to ESM on demand using esbuild. Features Transforms TypeScript to ESM on demand

esbuild kit 90 Jan 4, 2023
Cumcord loader on Browser (Chrome, Firefox, etc)

CumLoad CumLoad is a Chrome Extension that allows you to load Cumcord and plugins inside your Discord pages. We recommend using the MV2 version becaus

Cumcord Loader Plugins 11 Nov 7, 2022
The Termpura loader core package.

This project is a Work in Progress and currently in development. The API is subject to change without warning. Install npm install @termpura/core Usag

Termpura 2 Oct 15, 2022
A basic USDZ file (Pixar Universal Scene Description) loader for ThreeJS

Three USDZ Loader A basic USDZ (binary Universal Scene Description) reader for Three.js The plugins supports animation as well as loading multiple USD

Pierre-Olivier NAHOUM 37 Dec 13, 2022
Three.js boilerplate project configured with typescript, webpack and css/style loader, HTTPS local server, and a sample test codes !!

three.js-boilerplate Welcome, this is a three.js boilerplate project where you can clone it and start to work !!! Installed and Configured Items: Type

pravin poudel 4 Jul 6, 2022