Entrypoint File Question

[Fedrius]

Hi,

For the Vue entrypoints, I have 1 file called application.js and have been adding in entrypoints as seen below:

I'm slowly converting each Rails view page into a Vue page. Is this the correct way to set the entrypoints or am I supposed to have separate entrypoint JS files for each view page?

Also I'd like to thank you and the contributors for implementing this. It was easy to add in and has been working great for me.

[ElMassimo]

Hi Paul!

It's usually fine to have a single entrypoint, and let Rollup figure out the best way to split the bundle.

Something that you can do to have a more flexible setup is to allow the bundle to split each page in a separate chunk, by using dynamic imports:

if (location.pathname === '/admin/dbadmin')
  import('@pages/admin/Dbadmin.vue').then(mod => createApp(mod.default).mount('#sl_vue_dbadmin'))

You could generalize this by using a declarative approach such as adding data-app="admin/Dbadmin" to the element where each app should be mounted, using import.meta.glob to import all pages, then use the attribute to mount the corresponding Vue app:

const pagesByFilename = import.meta.glob('@pages/**/*.vue', { import: 'default' })

document.querySelectorAll('[data-app]').forEach(mountEl => {
  const pageName = mountEl.dataset.app
  const importPage = pagesByFilename[`${pageName}.vue`]
  importPage().then(mod => createApp(mod.default).mount(mountEl)
})

[Fedrius]

Got it, I'll try that out! Thanks again.