Best practices for structuring multiple Vue projects in a single Inertia.js app with Ruby backend

[pablo-vega-kloeckner-i]

Hi everyone 👋

I'm working on an Inertia.js application using Ruby (Rails) as the server-side framework.

On the client side, I have a javascript/ directory structured like this:

controllers/
helpers/
javascript/
  ├── app1/
  │   ├── Layouts/
  │   ├── Pages/
  │   └── Components/
  ├── app2/
  │   ├── Layouts/
  │   ├── Pages/
  │   └── Components/
  └── shared/
      ├── Components/
      ├── Composables/
      └── Utils/

Each app1 and app2 is a separate Vue 3 project with its own pages, composables, components, and logic. The shared/ folder contains reusable components, composables, and utilities that should be accessible by both apps.

What I'm trying to achieve:

• Cleanly separate app1 and app2 as independent Vue "frontends"

• Use shared/ components between both apps

• Properly configure Vite (or Webpack if needed) to handle multiple entry points

🔧 Questions:

• What’s the best way to structure this using Inertia?

• How should I configure Vite (or Webpack) to handle multiple Vue entry points and shared code?

• How can I dynamically resolve pages with Inertia (e.g. resolve) across multiple apps?

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

• Are there any examples or repos that showcase this setup with multiple Vue apps in one Inertia project?

📝 I based my setup on the official Inertia demo project for Ruby on Rails and Vue

[francoism90]

Do you mean managing directories and the overall structure of your project?

I'm a big fan of DDD (domain-driven-design), but you may also choose a different approach, with projects depending on a custom package for example.

You have to choose what works for you and your team.

[pablo-vega-kloeckner-i]

@francoism90 Yes, managing directories and the overall structure of my project.

💡 For example Nuxt gives you a directory structure for individual projects.

I want to know if there is a standard way to do it.

[francoism90]

@pablo-vega-kloeckner-i There is no standard, only recommendations. But you can opt-in to make things different, because it works better for you or your team.