@krds.ui/vue 0.0.18 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -69,6 +69,16 @@ app.use(KrdsVue, {
69
69
  })
70
70
  ```
71
71
 
72
+ 전역 등록한 컴포넌트의 템플릿 타입 검사·자동완성(Volar/vue-tsc)을 쓰려면 `tsconfig.json`에 전역 타입을 추가합니다. 전체 컴포넌트와 `v-sr-only`, `$krds`가 전역으로 선언되므로 일부만 등록했다면 등록하지 않은 컴포넌트 사용에 주의하세요.
73
+
74
+ ```json
75
+ {
76
+ "compilerOptions": {
77
+ "types": ["@krds.ui/vue/global"]
78
+ }
79
+ }
80
+ ```
81
+
72
82
  ### 3. 개별 컴포넌트 import
73
83
 
74
84
  전역 등록이 필요 없다면 필요한 컴포넌트만 가져옵니다.
@@ -91,6 +101,33 @@ app.use(KrdsVue, {
91
101
  </template>
92
102
  ```
93
103
 
104
+ ### 4. Nuxt
105
+
106
+ 서버 렌더링을 지원합니다. 스타일은 `nuxt.config.ts`에 추가하고, 플러그인에서 등록합니다.
107
+
108
+ ```ts
109
+ // nuxt.config.ts
110
+ export default defineNuxtConfig({
111
+ css: ['@krds.ui/vue/style']
112
+ })
113
+ ```
114
+
115
+ ```ts
116
+ // plugins/krds.ts (Nuxt 4 기본 구조에서는 app/plugins/krds.ts)
117
+ import KrdsVue from '@krds.ui/vue'
118
+
119
+ export default defineNuxtPlugin(nuxtApp => {
120
+ nuxtApp.vueApp.use(KrdsVue)
121
+ })
122
+ ```
123
+
124
+ Nuxt는 tsconfig를 자동 생성하므로, 전역 타입은 프로젝트의 `.d.ts` 파일에 참조를 추가합니다.
125
+
126
+ ```ts
127
+ // types/krds.d.ts
128
+ /// <reference types="@krds.ui/vue/global" />
129
+ ```
130
+
94
131
  ## TypeScript
95
132
 
96
133
  컴포넌트 props와 공통 타입을 패키지 루트에서 가져올 수 있습니다.
@@ -216,7 +253,8 @@ cd krds-vue
216
253
  pnpm install
217
254
  pnpm storybook # Storybook 개발 서버 실행
218
255
  pnpm test # Vitest 실행 (Playwright 브라우저 모드)
219
- pnpm lint # ESLint 검사 및 자동 수정
256
+ pnpm lint # oxlint 검사 (--fix로 자동 수정)
257
+ pnpm format # oxfmt 포매팅
220
258
  pnpm build # 타입 검사와 라이브러리 빌드
221
259
  pnpm build-storybook # 정적 Storybook 빌드
222
260
  ```