Vue 2 --> 3 and Mix --> vite

I'm not sure I should be upgrading both of these at the same time, but here goes. I have a Vue2 app with many components that is built using mix. I want to migrate to vue3 and vite because these are the upcoming and supported technologies. The problem is that I need to upgrade app.js to load all my components.

Here's what I have now:

import Vue from 'vue';
import VueMoment from 'vue-moment';
Vue.use(VueMoment, {
  moment,
});

const files = require.context('./', true, /\.vue$/i);
files.keys().map((key) => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

const app = new Vue({
  el: '#app',
  data: {},
  store,
});

I want to be able to import all the components using a loop like this. Is there any way to do that?

mankowitz

3 years ago

Level 1

In case anyone else needs it, this worked for me:

const app = createApp({});
const components = import.meta.globEager('./components/*.vue');
Object.entries(components).forEach(([path, definition]) => {
  const componentName = path.split('/').pop().replace(/\.\w+$/, '');
  app.component(componentName, definition.default);
});

app.mount('#app');

Please or to participate in this conversation.