Extensible architecture for Laravel and Vue JS components
I'm building a blog application, which had extensible feature in
Laravel 5.5 with front end
Vue JS 2.4, I'm having a folder structure something like this
Blog: Controllers Databases Models Routes web.php api.php Extensions Extension 1 Models Controllers Databases Routes api.php Views Components extension1.Vue Store app.js config.php Extension 2 Models Controllers Databases Routes api.php Views Components extension2.Vue Store app.js config.php Extension 3 * * * Views home.blade.php Assets JS Components Dashboard.Vue Posts.Vue Plugins.Vue Routes Store app.js bootstrap.js CSS
Basic core structure says, that I'm having a package of blog which has its own
databases.. etc, In
views folder I'm having a basic
home.blade.php which is only used in rendering the
app.js file compiled by
app.js file inside the
views folder contains basic bootstrapping similar to
resources/assets/js/bootstrap.js, file links I'm loading basic components like dashboard section, posts section, plugins section etc. Now in
dashboard section I want to having
dynamic widgets which can be pulled from the
extension folders but according to the user needs, I mean there can be a lot of extension out of which suppose end user opted to have 5-6 widgets to show on there dashboard, I want to load or render only those extension's components.
In short I want to
import extension components dynamically. How can I achieve this, I've seen a article regarding async vue components where I can call components dynamically but not able to get how to implement this in architecture, I think there can be the basic steps to achieve this:
Lets take an example of weather widget
Step 1: Create a js file, destination
Extensions/Views/weather.js which will hold the basic vue state instance of that particular plugin.
Step 2: Create a Vue component file, destination
Extensions/Views/Components/weather.vue which holds the component instance.
Step 3: Asynchronously load the components through
axios call in dashboard view.
I went through this forum discussion and came to point that this can be possible, only thing is we have to compile the component asynchronously. I mean we have to define the components in
app.js file so I can make a list of all the
widgets/extensions in a
json file and push them as
axios/ajax call to compile the components.
So my code looks like: https://gist.github.com/nitish1986/3ec9f71d0f58759b74b756551b2331fa
I'm not sure about my code, guide me how can I do the implementation.