-
-
Notifications
You must be signed in to change notification settings - Fork 195
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How should I auto import composition functions #76
Comments
@AlexandruSerban142 配一个别名可以吗? composition:path.resolve(__dirname, 'src/composition')
import { useSearch } from 'composition' |
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]
})
]
})
// The default export will be loaded on demand
export default 200
<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 Here are the idea 👇👇👇 watch and collect all file names in the target directory, and judge when resolve 😁。 More specific engineering practices 👉 tov-template 你好,关于项目中的组合式 最简单的例子 👇👇👇 // 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]
})
]
})
// 默认的导出将被自动按需引入
export default 200
<script setup lang="ts">
console.log(useFoo) // 按需自动引入,打印200
</script>
//.... 当然这是不安全的,不过我尝试使用 以下是我的想法 👇 监视并收集目标目录中的所有文件名,并在解析时判断。 更多的工程实践可见 👉 tov-template |
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. |
I like nuxt hooks,It's really convenient |
This is a 这是一个按需自动加载特定目录下模块的 |
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? |
I want to use react+vite+vite-auto-import-resolvers, but Vite seems not work very well with react. |
This is already supported via |
Nice, I will recommend it in vite-auto-import-resolvers readme |
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", }),
The text was updated successfully, but these errors were encountered: