How to automatically import composables/node_modules using the unplugin-vue-components package?

Question

I have set up unplugin-vue-components and it will now automatically import all vue components from the src folder, but it won't js files (such as store.js located in src/composables). It also doesn't import node modules like axios does. Any idea how to do it? I want it to work like Nuxt 3 auto import (which would be awesome).

github link: unplugin-vue-components

This is my vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
      vue(),
      Components({
          dirs: ['src'],
          extensions: ['vue', 'js']
      })
  ],
})

Answer 1

unplugin-vue-components plug-in is used to import components. If you want to import JS files (more specifically, JS variables), you can use this plugin: https://github.com/antfu/unplugin-auto-import

In addition to being able to import popular libraries such as axios, you can also add local libraries using dir porperty.

// Auto import for module exports under directories
  // by default it only scan one level of modules under the directory
  dirs: [
    // './hooks',
    // './composables' // only root modules
    // './composables/**', // all nested modules
    // ...
  ],

See the readme file for more information.