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)

Do you know if this will work if I have several directories for .vue files? For example, main components for pages (create, edit, index, etc.) I am storing in a ./views/ directory, but actual components are stored in ./components/. 90% of the time I'll be using this to load a "view", but I may need to return a single component from an API method from time to time.

What about if I have my components organized into subdirectories within ./components/? How will that require.context magic load those into Vue?

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