Skip to content

Instantly share code, notes, and snippets.

@jobcerto
Created February 13, 2019 00:54
Show Gist options
  • Save jobcerto/3a2e8005d725f9d11ea0ad6aefa54ff1 to your computer and use it in GitHub Desktop.
Save jobcerto/3a2e8005d725f9d11ea0ad6aefa54ff1 to your computer and use it in GitHub Desktop.
// 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)
@mikemand
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment