[Vue.js] unplugin-auto-import

앞선 글과 같은 이유로 해당 플러그인을 알아보도록 한다.

https://somuchthings.tistory.com/382

[Vue.js] Unplugin-Vue-Router

Basic Vue Import

Vue에서는 기본적으로 API를 사용할 때 'vue'에서 import 해서 사용한다.

import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

쓰다 보면 이게 귀찮다고 느낄 수 있다. 이런 경우 unplugin-auto-import를 사용하면 된다.

unplugin-auto-import

const count = ref(0)
const doubled = computed(() => count.value * 2)

Vite에 적용하기

vite에 적용하려면 vite.config.js의 defineConfig에 등록해주면 된다.

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})

자세한 사항은 공식 깃허브를 참고하길 바란다.

https://github.com/unplugin/unplugin-auto-import

GitHub - unplugin/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup