-
-
Notifications
You must be signed in to change notification settings - Fork 229
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Suggestion] Using Inertiajs views in Laravel Package #92
Comments
I've also hit this. I have some of my optional routes defined inside a package, and the javascript component ends up being published out to In the package controller, I can't just do return Inertia::render('../vendor/MyPackage/js/Pages/MyPackagePage');` which isn't ideal, and doesn't even seem to work. |
I would love this feature too, however i found my way around this which i gonna post here in hope it might help you? for production i publish the resources to the app's resource folder:
during development i have
Like this you are able to work out your package as you would do it in the main application. |
Contrary to Blade, Inertia doesn't look for views, they're just strings. You have full control over your own Quick example: return Inertia::render('my-package::Home/Index'); new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => {
if (name.startsWith('my-package::')) {
return require(`../../vendor/my/package/resources/js/Pages/${name.substr(12)}`).default
}
return require(`./Pages/${name}`).default
}
},
}),
}).$mount(app) Inertia doesn't impose any conventions regarding your frontend code, so I'm not sure what can be done to streamline this. |
The only problem with that is that the The suggestion from OP seems better in terms of isolation / injection, you would tell inertia that you have views in a package folder, and then when you call This would allow the javascript |
I've spent a bit longer on this today and realised @sebastiandedeyne is right. You need the requires to have at least the partial path to allow webpack to statically analyse the lazy load possibilities, so doing it inside the componentResolver makes a lot more sense. |
This is may solution to call and component from modules and packages app.js Call from modules using https://github.com/nWidart/laravel-modules Module file structure modulo it's default use the package when create a new module |
Just wondering at this point a guide about creating packages with Inertia would be a nice addition :) |
For future reference here is my approach. Built a package as a standalone dashboard using inertia, where target app does not has inertia or laravel mix. |
my current implementation for laravel package resources/js/app.js new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => {
let splited = name.split('::')
if (splited.length == 1) return require(`./Pages/${name}`).default
let [first, page] = splited
let [author, plugin] = first.split('/')
// '~': path.resolve('vendor')
return require(`~/${author}/${plugin}/resources/js/Pages/${page}`).default
},
},
}),
}).$mount(app); Author/PackageName/Controller/DashboardController.php class DashboardController extends Controller
{
public function index()
{
return inertia('author/package-name::Dashboard');
}
} i hope there is a better and proper way to implement inertiajs return view on laravel package. |
@vortechron this looks very promising i am likely ditching my approach in favors of yours |
i gave @vortechron 's solution a try and i wasn't satisfied. running dev/prod with npm took way to long. |
I'm also interested on this feature. Has anyone found a workaround for this? |
Actually work with modules package + inertiajs + vue/react + bootstrap/tailwind |
@yashiroiori can you explain how did you manage to setup the packages, so that views are loaded with Inertia? |
+1 |
I think this can be done using This is an example directory
In your package Inertia::loadComponentsFrom(__DIR__.'/../js', 'my-package'); Then have artisan command similar to
In your controller you can use something like this Inertia::render('my-package::ComponentA'); It will replace the the component from The command can be added to composer How do you guys think about this approach? |
OK. I think I got the answer. Thanks all for the ideas, inspired me to create a plugin. Inertia Plugin
The plugin page loader for Inertia.js, powered by unplugin, supports Vite and Laravel Mix. Define the namespace mapping for plugins pages directory, also can be extract namespace from the npm / composer package: // webpack.mix.js
const InertiaPlugin = require('inertia-plugin/webpack')
mix
.webpackConfig({
plugins: [
InertiaPlugin({
namespaces: ({ npm, composer }) => [
// define namespace mapping:
{ 'my-package-1': 'node_modules/my-plugin1/src/Pages' },
// load namespace from npm package:
npm('my-plugin2'),
// load namespace from composer package:
composer('ycs77/my-php-package'),
],
}),
],
}) The npm package like {
"name": "my-plugin2",
"inertia": {
"my-npm-package": "src/other-pages"
}
} The composer package like {
"name": "ycs77/my-php-package",
"extra": {
"inertia": {
"my-php-package": "resources/js/Pages"
}
}
} Will can be used namespace prefix get the view: Inertia::render('my-package-1::Page3');
Inertia::render('my-npm-package::Page222');
Inertia::render('my-php-package::PhpPackagePage'); For full usage see the docs. Try it~ 😊 |
when i try to use this. i have an error javascript heap out of memory |
If I build a Laravel package, I hope I can load Inertia views into the package.
Load Inertia views example:
Usage Inertia views example:
Can it be achieved?
Updated on 2022/07/03:
Thanks all for the ideas, inspired me to create the Inertia Plugin to resolve this issue.
The text was updated successfully, but these errors were encountered: