Working with InertiaJS

[lucasctd]

Hi guys,

I am trying to get Parcel working with Inertia on a Laravel Project I have.

It's kinda not detecting the .vue files I have, so when I go to the browser, I see it requesting the .vue files in the browser.

I have an app.ts file as the entrypoint of my application as you can see below:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
import ElementPlus from 'element-plus'
import { maska } from 'maska'
import '../css/theme.scss'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'

createInertiaApp({
    title: title => `${title} - ${appName}`,
    resolve: name => require(`./pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const instance = createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ElementPlus)
            .directive('mask', maska)
        instance.mount(el)
        return instance
    }
})

InertiaProgress.init({ color: '#4B5563' })

As you can see there's a scss file above, so Parcel automagically installs the required package to deal with sass files, but it does not do the same for the vue ones meaning it may not be detecting them.

May you guys help me?

Thanks

[fenilli]

I did by using the dynamic import + glob imports for the vue files.

// .parcelrc
{
    "extends": "@parcel/config-default",
    "resolvers": [
        "@parcel/resolver-glob",
        "..."
    ]
}

// app.js
import * as vues from './pages/**/*.vue';

{
  resolve: name => {
    let page;

    for (const property of name.split('/')) {
      page = !page ? vues[property] : page[property];
    };

    if (page) page = page.default;

    return page;
  },
}