How should I auto import composition functions

[Alexandru Serban]

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", }),

[TLovers]

@AlexandruSerban142 配一个别名可以吗？

  composition：path.resolve(__dirname, 'src/composition') 
import { useSearch } from 'composition'

[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

[Anthony Fu]

For the context, here is how I implemented it in Nuxt 3 nuxt/framework#1176

If anyone wants to work on it you could use it as some reference.

[markthree]

I like nuxt hooks，It's really convenient

[markthree]

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

---

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

[Alastair Hodgson]

For the context, here is how I implemented it in Nuxt 3 nuxt/framework#1176

If anyone wants to work on it you could use it as some reference.

Hey @antfu, I have a Nuxt 3 site that imports some external Vue components that rely on Vue and Nuxt imports. When these components are not external and placed in the Nuxt /components folder, the auto imports work fine. but when I move the packages out into the NPM package, they don't, which is to be expected I guess as only the /components and /composables folders implement the auto imports in Nuxt.

Is there a way for me to extend this functionality and get Nuxt to looks in my NPM packages folder too? I don't see anything in the Nuxt docs regarding this but wonder if there is an advanced way to do this?

[plh]

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

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

I want to use react+vite+vite-auto-import-resolvers, but Vite seems not work very well with react.

[Anthony Fu]

This is already supported via dirs option

[markthree]

This is already supported via dirs option

Nice, I will recommend it in vite-auto-import-resolvers readme