Як у vue налаштувати авто-іморт як в Nuxtjs

Якщо ви використовуєте VueJs, та NuxtJS. То думаю ви бачили як в NuxtJs зручно працює автоіморт компонентів, та внутрішнії функцій VueJS. З приходом Vue3 та Composition Api, кожен раз імпортувати всі ref, reactive, computed стає великую рутиную, але її можна позбутися. Для цього ми використаємо плагін - unplugin-auto-import/vite. 

yarn add unplugin-auto-import --dev

vite.config.js:

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
   // ...
   plugins: [
     AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n'],
      dirs: ['./src/composables'],
      eslintrc: { enabled: true  },
    }),
   ],
   // ...

})

В цьому прикладі я зробив автоматичний іморт з 'vue', 'vue-router', 'vue-i18n', а також всього, що знаходиться в папці ./src/composables, але ви можете додати і компоненти, та інші міксіни, які вам потрібні.

Тепер давайте розглянемо, як зробити автоімпорт компоненів в вью, так як це працює в nuxt:

Для початку створимо файл ./src/core/component-autoimport.js з наступним змістом:

import { defineAsyncComponent } from 'vue';

export default {
  install(app) {
    const components = import.meta.glob('../components/**/*.vue');

    for (const path in components) {
      const pathParts = path.split('/');
      const fileName = pathParts.pop();
      const folderName = pathParts[pathParts.length - 1];
      const componentName = fileName.replace(/\.\w+$/, '');
      const finalComponentName = folderName !== 'components' ? `${folderName}-${componentName}` : componentName;
      app.component(finalComponentName, defineAsyncComponent(components[path]));
    }
  },
};

import registerComponents from '@/core/component-autoimport.js';


import App from './App.vue'
import router from './router'
const app = createApp(App)

...

app.use(registerComponents)

...

app.use(router)
app.mount('#app')

AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n'],
      dirs: ['./src/composables', './src/stores', './src/components'],
      eslintrc: { enabled: true }
}),