@nitra/cursor 1.0.10 → 1.0.12
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/mdc/vue.mdc +96 -6
- package/package.json +1 -1
- package/mdc/vite.mdc +0 -7
package/mdc/vue.mdc
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Vue
|
|
3
3
|
alwaysApply: true
|
|
4
|
-
version: '1.
|
|
4
|
+
version: '1.2'
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
# Vue 3 (Composition API)
|
|
@@ -13,10 +13,10 @@ version: '1.0'
|
|
|
13
13
|
```javascript
|
|
14
14
|
const vue3CompositionApiBestPractices = [
|
|
15
15
|
'Використовуй функцію setup() для логіки компонента',
|
|
16
|
-
'Реалізуй computed properties через computed()',
|
|
16
|
+
'Реалізуй computed properties через $computed()',
|
|
17
17
|
'Використовуй watch і watchEffect для side effects',
|
|
18
18
|
'Підключай lifecycle hooks: onMounted, onUpdated тощо',
|
|
19
|
-
'
|
|
19
|
+
'не використовуй provide/inject для dependency injection'
|
|
20
20
|
]
|
|
21
21
|
```
|
|
22
22
|
|
|
@@ -31,17 +31,32 @@ src/
|
|
|
31
31
|
router/
|
|
32
32
|
store/
|
|
33
33
|
assets/
|
|
34
|
+
public/
|
|
34
35
|
App.vue
|
|
35
36
|
main.js
|
|
36
37
|
`
|
|
37
38
|
```
|
|
38
39
|
|
|
40
|
+
### Найменування файлів
|
|
41
|
+
|
|
42
|
+
- **SFC:** імена файлів компонентів у **PascalCase** починаючи з букви N(`NMyWidget.vue`).
|
|
43
|
+
- **Інші JS-модулі:** узгоджено **kebab-case** (`date-utils.js`).
|
|
44
|
+
|
|
45
|
+
### Модулі та архітектура
|
|
46
|
+
|
|
47
|
+
- **ES modules** (`import`/`export`), один модуль — одна відповідальність, уникай **circular dependencies**.
|
|
48
|
+
- **Composition** замість успадкування; логіку для повторного використання винось у **composables** (замість зайвих HOC, де це доречно).
|
|
49
|
+
|
|
50
|
+
### Code splitting
|
|
51
|
+
|
|
52
|
+
- **Route-based:** lazy-імпорти в маршрутах (`() => import('...')`) і async components.
|
|
53
|
+
|
|
39
54
|
## Додаткові вказівки
|
|
40
55
|
|
|
41
56
|
```javascript
|
|
42
57
|
const additionalInstructions = `
|
|
43
58
|
1. Використовуй JavaScript
|
|
44
|
-
2. Коректно оголошуй props
|
|
59
|
+
2. Коректно оголошуй props, emits, defineModel
|
|
45
60
|
3. За потреби використовуй компонент Teleport у Vue 3
|
|
46
61
|
4. Застосовуй Suspense для async components
|
|
47
62
|
5. Реалізуй належний error handling
|
|
@@ -60,6 +75,49 @@ const additionalInstructions = `
|
|
|
60
75
|
6. **Vue macros**: Використовуй Vue macros для більш ефективного розробки компонентів.
|
|
61
76
|
7. **Vue Reactivity Transform**: Використовуй Vue Reactivity Transform для змінних в компонентах.
|
|
62
77
|
|
|
78
|
+
### Патерни та антипатерни
|
|
79
|
+
|
|
80
|
+
- **provide/inject** — для глибоко вкладених залежностей; **renderless**-компоненти / **slots** — коли логіку відділяєш від розмітки.
|
|
81
|
+
- **HTTP:** окремі модулі **services** або **composables** для API; **async/await**.
|
|
82
|
+
- **Події:** батько–дитина через **emits**; для не пов’язаних гілок — **store**.
|
|
83
|
+
- Не мутуй **props** напряму — оновлення через подію вгору або v-model.
|
|
84
|
+
- Обмежуй зайве в глобальному стані; локальний стан у компоненті — за замовчуванням.
|
|
85
|
+
- Уникай прямої роботи з **DOM**, якщо достатньо реактивного шаблону та ref.
|
|
86
|
+
|
|
87
|
+
### State management
|
|
88
|
+
|
|
89
|
+
- **Single source of truth** для спільних даних: у нових проєктах на Vue 3 **Pinia** (модульні stores, actions)
|
|
90
|
+
- Похідний стан — через обчислення в store або **computed** у компонентах, без «тихих» побічних ефектів у getters.
|
|
91
|
+
|
|
92
|
+
### Обробка помилок (додатково)
|
|
93
|
+
|
|
94
|
+
- **try/catch** навколо async-операцій; зрозумілі повідомлення для користувача через notifySuccess, notifyError; логування на сервіс моніторингу за потреби.
|
|
95
|
+
|
|
96
|
+
### Продуктивність
|
|
97
|
+
|
|
98
|
+
- **v-for** — стабільні унікальні **`:key`**; не плутай **v-if** (умовний mount) і **v-show** (перемикання visibility).
|
|
99
|
+
- **debounce/throttle** для частих подій.
|
|
100
|
+
- Після ручних **addEventListener** / підписок — прибирай у **onUnmounted**.
|
|
101
|
+
|
|
102
|
+
### Безпека
|
|
103
|
+
|
|
104
|
+
- Не довіряй **v-html** без санітизації; для форм/API — **CSRF**-захист за потреби; валідація **на сервері** обов’язкова.
|
|
105
|
+
|
|
106
|
+
### Тестування
|
|
107
|
+
|
|
108
|
+
- **Unit / component:** **Vue Test Utils**; з **Vite** зручно **Vitest**.
|
|
109
|
+
- **E2E:** **Playwright** змістовні сценарії користувацьких потоків.
|
|
110
|
+
|
|
111
|
+
### Інструменти (узгоджено з Vite і цим правилом)
|
|
112
|
+
|
|
113
|
+
- Якість коду: **ESLint** + **eslint-plugin-vue**; форматування — **oxfmt**, див. `js-format.mdc`.
|
|
114
|
+
- Збірка та dev-сервер — **Vite**
|
|
115
|
+
- **Vue Devtools** для дебагу; продакшен-збірка — **`vite build`**, оптимізація асетів і кешування на рівні деплою / CDN.
|
|
116
|
+
|
|
117
|
+
### CI/CD
|
|
118
|
+
|
|
119
|
+
- У pipeline: **install**, **lint**, **test**, **vite build**; артефакти з продакшен-режиму.
|
|
120
|
+
|
|
63
121
|
### Приклад
|
|
64
122
|
|
|
65
123
|
```javascript
|
|
@@ -69,7 +127,7 @@ import { computed, onMounted } from 'vue'
|
|
|
69
127
|
export default {
|
|
70
128
|
setup() {
|
|
71
129
|
const count = $ref(0)
|
|
72
|
-
const doubleCount = computed(() => count * 2)
|
|
130
|
+
const doubleCount = $computed(() => count * 2)
|
|
73
131
|
|
|
74
132
|
onMounted(() => {
|
|
75
133
|
console.log('Компонент змонтовано')
|
|
@@ -113,14 +171,40 @@ export default {
|
|
|
113
171
|
import Vue from '@vitejs/plugin-vue'
|
|
114
172
|
import VueMacros from 'vue-macros/vite'
|
|
115
173
|
import { defineConfig } from 'vite'
|
|
174
|
+
import AutoImport from 'unplugin-auto-import/vite'
|
|
175
|
+
import Layouts from 'vite-plugin-vue-layouts-next'
|
|
116
176
|
|
|
117
177
|
export default defineConfig({
|
|
118
178
|
plugins: [
|
|
179
|
+
AutoImport({
|
|
180
|
+
imports: [
|
|
181
|
+
// presets
|
|
182
|
+
'vue',
|
|
183
|
+
'vue-router',
|
|
184
|
+
'quasar',
|
|
185
|
+
'pinia',
|
|
186
|
+
// custom
|
|
187
|
+
{
|
|
188
|
+
'@nitra/vite-boot/apollo': [
|
|
189
|
+
// named imports
|
|
190
|
+
'gql',
|
|
191
|
+
'useQuery',
|
|
192
|
+
'useMutation',
|
|
193
|
+
'useSubscription'
|
|
194
|
+
],
|
|
195
|
+
'@nitra/consola': [
|
|
196
|
+
// named imports
|
|
197
|
+
'createLogger' // import { createLogger } from '@nitra/consola'
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
]
|
|
201
|
+
}),
|
|
119
202
|
VueMacros({
|
|
120
203
|
plugins: {
|
|
121
204
|
vue: Vue()
|
|
122
205
|
}
|
|
123
|
-
})
|
|
206
|
+
}),
|
|
207
|
+
Layouts()
|
|
124
208
|
]
|
|
125
209
|
})
|
|
126
210
|
```
|
|
@@ -128,3 +212,9 @@ export default defineConfig({
|
|
|
128
212
|
### Висновок
|
|
129
213
|
|
|
130
214
|
Дотримуючись цих практик і правил, можна будувати масштабовані, підтримувані та ефективні застосунки на Vue 3 з Composition API. Завжди звіряйся з офіційною документацією Vue 3 щодо оновлень і нових можливостей.
|
|
215
|
+
|
|
216
|
+
Потрібно використовувати Vite версії 8 та вище для frontend проекту на Vue.
|
|
217
|
+
|
|
218
|
+
Потрібно використовувати unplugin-auto-import для автоматичного імпортування компонентів, composables, utils та інших функцій і прибирати з Vue sfc імпорти які їх дублюють.
|
|
219
|
+
|
|
220
|
+
Потрібно використовувати vite-plugin-vue-layouts-next для автоматичного імпортування layout компонентів.
|
package/package.json
CHANGED