시작하기

설치하기

@jood/v-modal 은 vue >= v3.x 이상을 지원합니다.

yarn

$ yarn add @jood/v-modal

npm

$ npm install @jood/v-modal

CDN

<script src="https://unpkg.com/@jood/v-modal"></script>
<link rel="stylesheet" href="https://unpkg.com/@jood/v-modal/dist/v-modal.css" />

세팅하기

@jood/v-modal 을 사용하기 위해 몇가지 기본적인 세팅이 필요합니다.

• 기본 스타일을 위한 CSS 파일을 import 합니다.
• provideJdModalService 로 JdModalService 를 주입해 줍니다.
• JdModalProvider 컴포넌트를 추가합니다.

Vue 3

main.ts

import '@jood/v-modal/dist/v-modal.css'; // CSS 파일을 import 합니다.
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

App.vue

<template>
  <div id="app">
    <router-view />
    <jd-modal-provider /><!-- Provider 컴포넌트를 추가합니다. -->
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount } from 'vue';
import { provideJdModalService, JdModalProvider } from '@jood/v-modal';

const modalService = provideJdModalService(); // JdModalService 를 provide 합니다.

onBeforeMount(() => {
  modalService.setUseBlockBodyScroll(true); // 모달이 열릴때 body scroll 잠금 여부
  modalService.setUseHistoryStrategy(false); // 모달 history.back 연동 여부
  modalService.init();
});
</script>

Nuxt 3

nuxt.config.ts

export default defineNuxtConfig({
  css: ['@jood/v-modal/dist/v-modal.css'],
});

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
  <JdModalProvider />
</template>

<script setup lang="ts">
import { onBeforeMount } from 'vue';
import { provideJdModalService, JdModalProvider } from '@jood/v-modal';

const modalService = provideJdModalService();

onBeforeMount(() => {
  modalService.setUseBlockBodyScroll(true); // 모달이 열릴때 body scroll 잠금 여부
  modalService.setUseHistoryStrategy(false); // 모달 history.back 연동 여부
  modalService.init();
});
</script>