micheal_mand.twitter

// I just do a replace to transform something like users.events.inddex in UsersEventsIndex
ViewFactory::macro('component', function ($name, $data = []) {
	 $name = str_replace(' ', '', ucwords(str_replace('.', ' ', $name)));

	 return View::make('app', ['name' => $name, 'data' => $data]);
});

// In the app.js tiny little modifications to calculate the componentName


const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => {
    let componentName = key.split('/')
        .splice(2)
        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
        .join('')
        .replace('.vue', '');
        
         Vue.component(componentName, files(key).default);
});

// The mout part is the easy one: Replace the Vue.component with the name created in AppServiceProvider

// Boot the current Vue component
const root = document.getElementById('app')
window.vue = new Vue({
    render: h => h(/** Here */root.dataset.component, {
            props: JSON.parse(root.dataset.props)
        }
    )
}).$mount(root)

Yes, work just fine. I have tried with return view ()->component('directory.level1.level2.level3.customComponent') and the following directory structure: components/directory/level1/level2/level3/customComponent.vue.

The component name created via serviceProvider was DirectoryLevel1Level2Level3CustomComponent

I think that require.context loads all the files inside the folder structure recursively

Ah, I have created a directory inside js/ called views/About.vue and call view()->component('about'). Also worked

Excellent! Thank you for the help!

I'm not understand this part

// The mout part is the easy one: Replace the Vue.component with the name created in AppServiceProvider

// Boot the current Vue component
const root = document.getElementById('app')
window.vue = new Vue({
    render: h => h(/** Here */root.dataset.component, {
            props: JSON.parse(root.dataset.props)
        }
    )
}).$mount(root)

@elisongomes What are you needing explained? Did you read the original article? https://reinink.ca/articles/server-side-apps-with-client-side-rendering