eidellev / inertiajs-adonisjs

280 stars 17 forks source link

Documentation Update - Include Non-SSR Setup Instructions - import.meta and official inertiaJS docs. #122

Open TDodgeCo opened 1 year ago

TDodgeCo commented 1 year ago

There's no documentation on this repo for hooking up Vue3 without SSR. I followed the official documentation, which directed me to include this bit of code in my main javascript file (app.js in this case)

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)
  },
})

import.meta isn't a supported feature in the bundling processes included in AdonisJS. My templates wouldn't render until I changed

resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]

to:

resolve: (name) => require(./Pages/${name})

I found this extension through adocasts, and it was a little frustrating following their tutorial point for point and being unable to produce a working result. Naturally, I came to these docs first to see if there was any new steps in the process since his video is a year old. The import.meta issue appears to crop up fairly often, so it would likely save some folks a good deal of frustration mentioning how the AdonisJS inertia module expects things to be done.

Thanks!

TDodgeCo commented 1 year ago

Of course after posting this I ended up realizing the official inertiaJS docs do discuss how to resolve components, it just requires some scrolling. Still, it's a simple fix and it's always nice to have a full quick start guide on a packages repo.

Thanks again.

eidellev commented 1 year ago

Hi @TDodgeCo ! Thanks for taking the time to report this. I will update the docs