Vue / nuxt에서 focus directive 만들기

input focus용 directive 만들기 예시

가끔 모달 창이나, 페이지 접근 시 특정 인풋에 포커스 해달라는 요청이 있다.
기존에는 그때그때 el에 접근하여 처리했는데, 별도 directive를 만들어서 처리하면 편하기에 메모해놓는다.

Vue3 방식

커스텀 디렉티브 생성

const { createApp, onMounted } = Vue;
const app = createApp({})
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
  // 기타 directive가 동작할 다른 라이프 사이클 추가
})

사용 예시

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
    <input />
    <input v-focus />
    <input />
</div>

Nuxt3 방식

커스텀 디렉티브 생성 (플러그인)

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('focus', {
        mounted(el, binding) {
            if (!binding.hasOwnProperty('value') || binding.value) {
                el.focus()
            }
        }
    })
})

사용 예시 (동적 포커싱)

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
    <input />
    <input v-focus="true" />
    <input />
</div>

nuxt.config.ts

// 플러그인 정보를 등록해준다.
plugins: [{ src: '@/plugins/vue-focus.js', mode: 'all' }],