Jae Front-end Study

Plugins with Nuxt 3 — Course part 7

https://www.youtube.com/watch?v=9MCVjsq35I8&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=7

유튜브 강의를 참고하고 있습니다.

Plugins이란

Nuxt에는 Vue 애플리케이션 생성 시 Vue 플러그인을 사용할 수 있는 플러그인 시스템이 있다.

Nuxt는 자동으로 plugins 디렉터리 파일을 읽고, Vue 애플리케이션 생성 시 이를 로드한다.

1. plugins 폴더 만들기

• plugins/myPlugins.ts

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      hello: (msg: string) => console.log(`Hello ${msg}`)
    }
  }
})

2. 플러그인 import 하기

plugins 디렉터리 최상위에 있는 파일(또는 하위 디렉터리 내의 index 파일)은 별로의 import 없이 자동으로 플러그인으로 등록된다.

• pages/index.vue

<script setup lang="ts">
console.log(useNuxtApp())
</script>

3. 플러그인 사용하기

• pages/index.vue

<script setup lang="ts">
const { $hello } = useNuxtApp()

$hello('world')
</script>