How to structure files to use dynamic imports with Vue single file components

Hi there,

While the title seems pretty straightforward, I'd like a little help setting up my simple project to separate my Vue .vue single file components and being able to load them dynamically.

I see many how-to's on Google (implying installing a babel plugin), but as they're all "old" (2017's), I wonder if webpack/mix/vue doesn't support it OOB now?

If not, I still need an idea on how to structure my files. On a fresh Laravel 5.6 project, the JS files are linked together in a way that they compiles to 1 big .js file, including my .vue files.

I'd like to be able to load a component using vanilla JS, from a blade template unless there is a better way. Why from a blade template? Because it would be the best place to dynamically load a .vue component containing the entire page (in case of a form for instance).

Suggestions are welcome, thank you for your help