In my previous projects with Vue, which were based in a Laravel-Mix/Webpack runtime environment, I used to individually register components and views as needed. This was done by importing them and extending Vue:
import BaseButton from './components/BaseButton.vue'
import BaseIcon from './components/BaseIcon.vue'
import BaseInput from './components/BaseInput.vue'
window.base = Vue.extend {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
I would then compile this into a JS file using webpack.mix.js:
const mix = require('laravel-mix');
mix.vue({
version: 2
})
.js('src/js/base.js', 'dist/base_rendered.js')
and include the compiled file within an HTML file using a <script> tag:
<script src="base_rendered.js"></script>
<script>
new base({
el: '#base',
});
</script>
This method worked well for smaller projects, but when I had to migrate a NuxtJS project to the same environment, with over 100 components needing registration, it became cumbersome. That's why I turned to Vue's documentation on automatic global registration of components for help. Here's their example code:
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// More code here...
While I understand how this code scans through component files and extracts PascalCase names, I'm struggling with integrating this approach with my current workflow involving webpack.mix.js and script references in HTML. Any guidance or assistance would be greatly appreciated as dealing with over 100 imports/export manually seems daunting to me.
(Additionally, my current setup uses kebab case for referencing components in HTML. Would this remain the same, or do I need to make adjustments? I also have sub-folders structured for different sections of components in my library.)