Capitalization or not of pages/vue routing files in a Laravel-Inertia-Vue application

Hello. Is there any specific reason for capitalizing the names of vue page files, i.e. Index, Create, Show etc instead of index, create and show. I can accept that the components themselves are capitalized but capitalizing these traditionally "route pages" can cause issues (and did) when I was testing my solution with nuxt/vue which recommends that route pages are not capitalized. Then I landed in a problem once I removed the capitalization and got deployment server errors which turned out to be du to linux being case-sensitive, windows not case sensitive, git on windows did not update the casing in the repo. Another problem I landed in was the file-based routing with pure vue application, that does not accept capitals for route files. After these ordeals, it is my opinion that it is much safer to just have the traditional route vue files (in the pages dirrectory) without capitalization - removed all these risks. About using the same code in nuxt, I only minor modifications of Inertia specifics which I fixed with "conditionals" (nuxtApp: true vs. false) for routing etc and it now works in both. MY QUESTION is whether there is any down sides of not capitalizing these route files in the laravle-inertia-vue framework? Any other opinions on this?

LaryAI

3 months ago

Level 58

In a Laravel-Inertia-Vue application, there is no technical requirement from Inertia.js, Vue, or Laravel that mandates route page files (such as Index.vue, Create.vue, Show.vue) be capitalized. The capitalization you often see is due to convention, aiming for consistency and readability, and mirroring Vue component naming best practices.

Key Considerations:

File System Case Sensitivity
- Linux systems are case-sensitive, while Windows and macOS (by default) are not. This can cause deployment issues if you change only the casing and rely on Git to notice the change.
- Example: renaming index.vue to Index.vue might not be reflected in Git on Windows, but will matter on Linux.
Routing Conventions
- Some frameworks, such as Nuxt or Vite’s file-based routing, expect route/page files to be lowercase (e.g., index.vue, about.vue). Capitals can cause those routers to skip your files or break your routes.
- Inertia itself does not enforce any naming convention, so you are safe to use lowercase if it suits your broader goals (such as code reuse between projects).
Component Naming in Vue
- Vue's convention is for components to be PascalCase (MyComponent.vue). However, this is not mandatory for pages unless you specifically need to reference them as components somewhere else.
Code Portability
- If your goal is to maximize portability and compatibility with static file routers or frameworks (like Nuxt), all-lowercase for route files is safer.
- For code consistency, try to pick one convention and stick with it throughout your projects.

Downsides to Not Capitalizing:

There are no downsides within a Laravel-Inertia-Vue context. The framework does not care about capitalization for page file names.
Some minor confusion may arise if you mix conventions (lowercase for pages, PascalCase for components), but it does not impact functionality.

What to Watch Out For:

If you start a project with capitalized names and later change them to lowercase, ensure you use git mv to rename files so that git tracks the casing change properly:
```
git mv Index.vue index.vue
```
Be aware of import paths elsewhere in your code that might break if the case changes.

Summary: You are perfectly safe to use lowercase for your route/page files in Laravel-Inertia-Vue. In fact, this may avoid deployment and cross-platform issues. There is no functional downside to this approach in the context of Inertia.js and Laravel.

Recommendation:
For maximal compatibility and fewer surprises, especially if you share codebases or switch between routers/apps, stick to lowercased filenames for your page components.

Example Folder Structure:

resources/js/Pages/
  index.vue
  create.vue
  show.vue

Other Opinions:
Some teams prefer capitalizing page components for visual distinction in editors, but this is strictly a style choice.

Conclusion:
Use whichever convention best fits your workflow and environment, but lowercase page filenames are safer for cross-platform compatibility and integration with file-based routers. There are no functional downsides to this approach in Laravel-Inertia-Vue.

vincent15000

3 months ago

Level 63

It's really not a problem to capitalize the names of the views, but I don't know the reason why it's like this.

You can safely use non capitalized names, but you need to do change some things in your code.

createInertiaApp({
    id: 'custom_id',
    resolve: name => {
        const pages = import.meta.glob('./pages/**/*.vue', { eager: true }); // here pages in lowercase

        const page = pages[`./pages/${name}.vue`]; // here pages in lowercase
        
        page.default.layout = page.default.layout || Layout;

        return page;
    },
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) });

        app.use(plugin);

        app.mount(el);
    },
});

And for tests to be working, you also have to publish the inertia.php configuration file and change these lines.

'page_paths' => [

    resource_path('js/pages'), // here pages in lowercase

],

'testing' => [

    'ensure_pages_exist' => true,

    'page_paths' => [

        resource_path('js/pages'), // here pages in lowercase

    ],

    'page_extensions' => [

        'js',
        'jsx',
        'svelte',
        'ts',
        'tsx',
        'vue',

    ],

],

1 like

Please or to participate in this conversation.