Skip to content
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

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

Closed
lighth7015 opened this issue Jul 2, 2022 · 1 comment
Closed

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

lighth7015 opened this issue Jul 2, 2022 · 1 comment

Comments

@lighth7015
Copy link

lighth7015 commented Jul 2, 2022

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!

@ycs77
Copy link
Owner

ycs77 commented Jul 3, 2022

Emm.... has some mistakes...

  1. In vite.config.ts, the option of inertia() is an object, not a function. and this is not to use the composer() function, the use time is to use the installed composer package will be used it:

https://github.com/lighth7015/inertia-modules-plugin-repro/blob/c5f8cad4ee7e4fe649078b407a0a53d9404c53ec/vite.config.ts#L50-L55

-   inertia(({ composer }) => {
-     namespaces: [
-       composer( 'hpprx/core', '.' ),
-       composer( 'hpprx/myapp', 'Modules/Myapp' ),
-     ]
-   }),
+   inertia({
+     namespaces: [
+       { myapp: 'Modules/Myapp/Resources/views/pages' },
+     ],
+   }),

The namespace object is a namespace => path mapping, myapp is the namespace and Modules/Myapp/Resources/views/pages is the path corresponding to the namespace. You can use Inertia::render('myapp::welcome'); (welcome is welcome.vue component) to use the module page in the main app.

  1. In resources/ts/main.ts, this :

https://github.com/lighth7015/inertia-modules-plugin-repro/blob/c5f8cad4ee7e4fe649078b407a0a53d9404c53ec/resources/ts/main.ts#L8-L10

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

This loads the main pages for the main app, but then your pages are put in resources/views/pages, and must be changed the glob pattern to ../views/pages/**/*.vue.

Note: Copying and pasting the code from the documentation is recommended.

  1. Add some text to Modules/Myapp/Resources/views/pages/welcome.vue (can add to anywhere in this page, because this is only to look and welcome.vue is different):
<template>
  ...
  <span class="dark:text-white px-2 text-lg font-semibold">In plugin</span>
  ...
</template>
  1. Use page to routes/web.php:
Route::get('/', function () {
    return inertia('welcome'); // resources/views/pages/welcome.vue
});

Route::get('/myapp', function () {
    return inertia('myapp::welcome'); // Modules/Myapp/Resources/views/pages/welcome.vue
});

@ycs77 ycs77 closed this as completed Jul 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants