#Laravel Starter Kit, app.ts - store .vue pages in different directories

1 messages · Page 1 of 1 (latest)

shrewd totem
#

It’ll be rather difficult, because inertia is really built to only support a single directory. For example when you’re rendering an Inertia view, you’d pass it as the path within that folder, so for Inertia there wouldn’t be a distinction which folder it should look for, it could even contain duplicate paths then

tardy mango
#

I got it working with a second folder

#

but it gave a small error in the console

#

there must be a way

#

why restrict a project to one folder?

#

resolvePageComponent() accepts an Array

shrewd totem
#

I mean, it’s possible if you write your own resolve method instead of using the one from Laravel

tardy mango
#

I couldnt find the source for resolvePageComponent()

#

just lead me to a typescript definition file

shrewd totem
#

Thats for fallback pages, while it might work with some adjustments, its not really the intended use-case I think, as you’d still have issues if you have the same paths

#

You could just move the starter files to a folder like pages/starter/?

tardy mango
#

what's "fallback pages"?

shrewd totem
#

If the path can’t be found in the directory it would take the second one as the view. So like you try to render a view that doesn’t exist, instead of throwing an error, it would render your fallback view, such as an error page

tardy mango
#

so my pages aren't even being loaded by resolvePageComponent()

#

they are being loaded magically from laravel-vite plugin?

shrewd totem
#

It might with a dynamic one, but not sure about that fallback thing. From the pr the usecase is just a single error page if the page can’t be found

#

Hmm it seems it also works with a variable path, but then you still can’t have duplicate pathnames

#

And your glob import would need to contain files in both of those paths

tardy mango
#

resolvePageComponent -> accepts array where the 2nd value is the fail case, I see what you mean

tardy mango
#

but I tried to add a 3rd location and it broke

#

😆

shrewd totem
#

I’ve seen some online that just wrote their own render method (you don’t need to use the resolvePageComponent from Laravel), basically with an “if starts with ‘web/‘ look here, else look there”
But imho, in this case I might argue it makes things more messy than it solves 😅

tardy mango
#

wheres the code for that?

#

yes that could be the case

shrewd totem
tardy mango
#

where can I find out what

resolve: (name) =>
    resolvePageComponent(`./pages/${name}.vue`,
    import.meta.glob<DefineComponent>('./pages/**/*.vue')),

is actually doing?
do you know where the source is?

#

I could do something like your github link

#

I may just stick my whole project into ./pages though, a bit of a fail, but if it can't be helped

shrewd totem
tardy mango
#

when I click around in the editor it never takes me to the source

#

wow man its only a few lines of code

#

shouldn't be too hard to remake

midnight agate
#

#💬-general message

This might give you an idea of what you could do, but in my opinion you should just go with what Robert said and separate the pages in subdirectories

tardy mango
#

why did you make it async?

midnight agate
#

Just noticed that I left it async when I modified my production snippet, in my case I also had a default layout

tardy mango
#

your solution seems safe

#

it's just a bit messy

#

do you forsee any future problems with it_

#

cause I would like to keep my app very separate from the starter kit files

midnight agate
#

Ehh it’s a workaround for managing a huge monorepo, personally I wouldn’t do something like that

#

For a single non-monorepo application*

shrewd totem
#

If I may ask, why’d you want to keep them separate from the starter kit files? Because that’s kinda how the starter kits are set up; it’s a starting point for you to continue from, so it’s kinda encouraged to also modify those files to your liking, they’re part of your app, not separate files that don’t belong to your app

tardy mango
#

the starter kit is mostly login stuff

#

which I won't touch

#

theres many composables, ui files, etc, that are separate from my logic

shrewd totem
#

Then you can just keep them as-is right? They’re already located in the auth part of your pages

tardy mango
#

is there a performance problem if I put my whole app in ./pages/app ?

#

look at js/components folder, its full of so much stuff

#

cant put my app in there

midnight agate
shrewd totem
#

I don’t really understand, those files are not pages, you can relocate them if you like. The idea behind the starter kit is also that you’d use those components in your own pages, since that would unify the styling of your app. So you have pages, which decide the layout of every page. And you’d have components, which are reusable small pieces you use across multiple pages

tardy mango
#

but I just think the other files are distracting

#

look at layouts, theres 3 folders in there

tardy mango
shrewd totem
shrewd totem
# tardy mango but I just think the other files are distracting

Just trying to think along; if you wouldn’t use a starter kit, how would you structure it? So where would you place the auth views, where would you place the layouts etc. Maybe you can restructure the app to your liking that way?
I’m probably wrong, but it kinda sounds like you’re hiding the starter kit files because the structure isn’t how you’d put it, so introducing workarounds to hide that, which might become more messy as the project grows

tardy mango
#

js/your_app
js/starter

#

that's my opinion

shrewd totem
#

I meant, fully ignoring the starter kit 😅 like if you’d built it from scratch

tardy mango
#

probably the same as the starter kit

#

it's a great starter kit

#

no doubt

#

but I can't use it's folders without getting distracted

#

composables like 'useInitials.ts'

#

haha man

# 
resolve: (name) => {
    console.log(name)
    if (name.startsWith('myapp')){
      return resolvePageComponent(...)
    }
}
#

I hacked it up like this

#

and it works
but this console.log is getting called twice

#

and even though it loads the page

#

it still prints an error in the console

# 
// resources/views/app.blade.php
@vite(
        [
            'resources/js/app.ts', 
            "resources/js/pages/{$page['component']}.vue"
        ]
    )