How should I auto import composition functions

Hey,

So far the plugin works great for importing vue, vue-router.

So as I am working with vue3, let’s assume an example where I have two composition functions in my src/composition, named: useSearch.ts and useFilter.ts…

The first question is: Should I attempt to auto-import them into my components or because those functions will not be used as much as something like ref from vue3 I should just stick to normal imports?

If you advise me to do so, how should I be able to do that? I’ve attempted to create src/composition/index.ts where I export all of my functions and in vite.config.ts I added the below code, but it tells me when the app runes in the browser that it ‘Failed to resolve import “src/composition”’

AutoImport({ imports: ["vue", "vue-router", "@vueuse/head", { "src/composition": ["useSearch"] }], dts: "src/auto-imports.d.ts", }),

[markthree]

hello, about the automatic introduction of custom composition API in the project, I have defined a path alias and resolver.

The simplest example 👇👇👇

// vite.config.ts
import { resolve } from 'path'
import { defineConfig } from "vite"
import Vue from '@vitejs/plugin-vue'
import type { Resolver } from 'unplugin-auto-import/dist/types'

const compositionResolver: Resolver = name => {
	const isCompositionApi = name.startsWith('use')
	if (isCompositionApi) {
	  return `~/composition/${name}`
	}
}

export default defineConfig({
  resolve: {
    alias: {
	'~/': `${resolve(__dirname, 'src')}/`
    }
  },
  plugins: [
    Vue(),
    AutoImport({
      resolvers: [compositionResolver]
    })
  ]
})

src/composition/useFoo.ts

// The default export will be loaded on demand
export default 200

src/App.vue

<script setup lang="ts">
 console.log(useFoo) // Automatic on demand，will log 200
</script>

//....

Of course, it’s not safe, but I’m trying to use the node to solve this problem.

Here are the idea 👇👇👇

watch and collect all file names in the target directory, and judge when resolve 😁。

More specific engineering practices 👉 tov-template

---

你好，关于项目中的组合式 api 自动按需引入，我的做法是定义一个路径别名还有 resolver 解析器。

最简单的例子 👇👇👇

// vite.config.ts
import { resolve } from 'path'
import { defineConfig } from "vite"
import Vue from '@vitejs/plugin-vue'
import type { Resolver } from 'unplugin-auto-import/dist/types'

const compositionResolver: Resolver = name => {
	const isCompositionApi = name.startsWith('use')
	if (isCompositionApi) {
	  return `~/composition/${name}`
	}
}

export default defineConfig({
  resolve: {
    alias: {
	'~/': `${resolve(__dirname, 'src')}/`
    }
  },
  plugins: [
    Vue(),
    AutoImport({
      resolvers: [compositionResolver]
    })
  ]
})

src/composition/useFoo.ts

// 默认的导出将被自动按需引入
export default 200

src/App.vue

<script setup lang="ts">
 console.log(useFoo) // 按需自动引入，打印200
</script>

//....

当然这是不安全的，不过我尝试使用 node 去解决这个问题。

以下是我的想法 👇

监视并收集目标目录中的所有文件名，并在解析时判断。

更多的工程实践可见 👉 tov-template

[markthree]

This is a resolver that automatically loads modules under a specific directory 👉 vite-auto-import-resolvers

---

这是一个按需自动加载特定目录下模块的 resolver 👉 vite-auto-import-resolvers