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

Time:12-11

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']
      })
  ],
})

CodePudding user response:

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.

  • Related