[Nuxt3] auto import 설정

pinia 의 사용시 특정 pinia 함수들은 별도 import 선언문 없이 사용할수 있도록 처리한다.

nuxt.config.ts 파일의 모듈 옵션을 변경

export default defineNuxtConfig({
  modules: [
    ['@pinia/nuxt', {autoImports: ['defineStore', 'acceptHMRUpdate']}]
  ]
}

이런 식으로 선언 해주면 된다.

autoImports 안의 함수명들에 대한 코드 제안을 보고 싶은데 뭔가 설정이 제대로 안되었는지 동작하지 않는다.

 

설정되고 나면

export const useUser = defineStore('user', {
  state: () => {
    return {
      isLoggedIn: false,
    }
  },
  getters: {},
  actions: {}
})

 

defineStore 에 대해서는 import 없이 바로 사용 가능하다.

 

그리고 useUser 를 다른 컴포넌트에서 사용할때도 자동으로 import 되는 설정을 할수 있다.

export default defineNuxtConfig({
  modules: [
    ['@pinia/nuxt', {autoImports: ['defineStore', 'acceptHMRUpdate']}]
  ],
  imports: {
    dirs: ['stores'] // 대상 디렉토리
  }
})

 

.vue 내에서

<script lang="ts" setup>
definePageMeta({
    layout: 'something'
})
const user = useUser();
</script>

이런 식으로 바로 사용 가능하다.