Jae Front-end Study

Composables with Nuxt 3 — Course part 6

https://www.youtube.com/watch?v=cWX4b2qD6sg&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=6

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

Composables이란

Vue 애플리케이션에서 composable(컴포저블)이란, Vue의 Composition API를 활용하여 상태 저장 논리를 캡슐화하고 재사용하는 함수를 의미한다.

함수의 이름은 'use'로 시작하고, 카멜 케이스 형식으로 지정한다.

1. composables 폴더 만들기

• composables/useUtils.ts

export const useUtils = () => {
  const sayHello = () => console.log('Hello from useHello')

  return {
    sayHello
  }
}

2. useUtils 함수 불러오기

• pages/index.vue

<script setup lang="ts">
import { useUtils } from "~/composables/ussUtils";

const { sayHello } = useUtils()

sayHello()
</script>

결과 화면

VueUse란

VueUse 모듈은 Vue Composition(컴포지션, import 한 함수를 사용해서 Vue 컴포넌트를 작성할 수 있는 API) 유틸리티 모음이다.

VueUse에 대한 자세한 설명을 아래 공식 문서를 참고한다.

https://vueuse.org/

https://nuxt.com/modules/vueuse

VueUse 설치하기

터미널에서 아래 명령어를 실행한다.

설치된 버전은 package.json 파일에서 확인할 수 있다.

npm i -D @vueuse/nuxt @vueuse/core

• nuxt.config.ts

모듈 부분에 @vueuse/nuxt를 import 한다.

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@vueuse/nuxt'
  ],
  css: ['@/assets/scss/main.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }
})

1. useMouse

• pages/index.vue

<template>
  <div>Mouse position: {{ x }}, {{ y }}</div>
</template>

<script setup lang="ts">
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()
</script>

2. useLocalStorage

• pages/index.vue

<script setup lang="ts">
import { useLocalStorage } from '@vueuse/core'

const store = useLocalStorage(
    'my-storage',
    {
      name: 'Apple',
      color: 'red'
    }
)
</script>

3. usePreferredDark

• pages/index.vue

<script setup lang="ts">
import { usePreferredDark } from '@vueuse/core'

const isDark = usePreferredDark()

console.log(isDark)

if(isDark.value) {
  console.log('다크모드 true')
} else {
  console.log('다크모드 false')
}
</script>

4. useTitle

• pages/index.vue

<template>
  <h1>{{ themeTitle }}</h1>
</template>

<script setup lang="ts">
import { usePreferredDark, useTitle } from '@vueuse/core'

const isDark = usePreferredDark()

const themeTitle = useTitle(() => isDark.value ? '다크모드 true' : '다크모드 false')
</script>

5. onClickOutside

• pages/index.vue

<template>
  <div ref="el">
    Click Outside of Me
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const el = ref()

function close () {
  alert('영역의 바깥을 클릭했습니다.')
}

onClickOutside(el, close)
</script>