unplugin / unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack and Rollup
MIT License
3.21k stars 195 forks source link

Function not auto imported on template #250

Closed threedayAAAAA closed 2 years ago

threedayAAAAA commented 2 years ago

Describe the bug

Functions used in template are not imported normally

viteconfig.ts

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import AutoImport from "unplugin-auto-import/vite"

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            imports: ["vue"],
            dirs: ["./src/util"],
        }),
    ],
})

util/index.ts

export const sum = (a: number, b: number) => a + b

app.vue

<script setup>
const count = ref(0)
const doubleCount = computed(() => sum(count.value, 100))
</script>

<template>
    <div class="card">
        <p>{{ sum(count, 1000) }}</p>
        <p>{{ doubleCount }}</p>
        <button type="button" @click="count++">count is {{ count }}</button>
    </div>
</template> 

doubleCount can be used normally, but when used directly in the template, it will not automatically import sum throw err is: _ctx.sum is not a function

Reproduction

Reproducible

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (16) x64 AMD Ryzen 7 PRO 4750G with Radeon Graphics
    Memory: 5.86 GB / 15.41 GB
  Binaries:
    Node: 16.0.0 - D:\nodejs\node.EXE
    Yarn: 1.22.18 - D:\nodejs\yarn.CMD
    npm: 7.10.0 - D:\nodejs\npm.CMD
  Browsers:
    Internet Explorer: 11.0.18362.1

Used Package Manager

npm

Validations

threedayAAAAA commented 2 years ago

Sorry, I ignored the configuration of vueTemplate