javascriptvue.jsvuejs3viteauto-import

How to auto-import composables/node_modules with unplugin-vue-components package?


I've set up unplugin-vue-components which now auto-imports all vue components from src folder but it won't import js files (f.e. store.js which is located in src/composables). It also doesn't import node modules like axios. Any idea how to do it? I'd like it to work like Nuxt 3 auto import (which is 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']
      })
  ],
})

Solution

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

    Beside the ability to import popular library like axios, you can also add your local ones 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
        // ...
      ],
    

    Refer to readme for more information.