@nitra/cursor 1.0.11 → 1.0.12

package/mdc/vue.mdc

@@ -1,7 +1,7 @@
 ---
 description: Vue
 alwaysApply: true
-version: '1.1'
+version: '1.2'
 ---
 
 # Vue 3 (Composition API)
@@ -13,10 +13,10 @@ version: '1.1'
 ```javascript
 const vue3CompositionApiBestPractices = [
   'Використовуй функцію setup() для логіки компонента',
-  'Реалізуй computed properties через computed()',
+  'Реалізуй computed properties через $computed()',
   'Використовуй watch і watchEffect для side effects',
   'Підключай lifecycle hooks: onMounted, onUpdated тощо',
-  'Використовуй provide/inject для dependency injection'
+  'не використовуй provide/inject для dependency injection'
 ]
 ```
 
@@ -31,6 +31,7 @@ src/
   router/
   store/
   assets/
+  public/
   App.vue
   main.js
 `
@@ -38,14 +39,13 @@ src/
 
 ### Найменування файлів
 
-- **SFC:** імена файлів компонентів у **PascalCase** (`MyWidget.vue`).
+- **SFC:** імена файлів компонентів у **PascalCase** починаючи з букви N(`NMyWidget.vue`).
 - **Інші JS-модулі:** узгоджено **kebab-case** (`date-utils.js`).
 
 ### Модулі та архітектура
 
 - **ES modules** (`import`/`export`), один модуль — одна відповідальність, уникай **circular dependencies**.
 - **Composition** замість успадкування; логіку для повторного використання винось у **composables** (замість зайвих HOC, де це доречно).
-- **SFC** для template + script + style; за потреби розділяй presentational і container-компоненти (UI vs дані/оркестрація).
 
 ### Code splitting
 
@@ -56,7 +56,7 @@ src/
 ```javascript
 const additionalInstructions = `
 1. Використовуй JavaScript
-2. Коректно оголошуй props і emits
+2. Коректно оголошуй props, emits, defineModel
 3. За потреби використовуй компонент Teleport у Vue 3
 4. Застосовуй Suspense для async components
 5. Реалізуй належний error handling
@@ -79,11 +79,10 @@ const additionalInstructions = `
 
 - **provide/inject** — для глибоко вкладених залежностей; **renderless**-компоненти / **slots** — коли логіку відділяєш від розмітки.
 - **HTTP:** окремі модулі **services** або **composables** для API; **async/await**.
-- **Події:** батько–дитина через **emits**; для не пов’язаних гілок — **store** / **provide-inject**, уникай глобального **event bus** у новому коді.
+- **Події:** батько–дитина через **emits**; для не пов’язаних гілок — **store**.
 - Не мутуй **props** напряму — оновлення через подію вгору або v-model.
 - Обмежуй зайве в глобальному стані; локальний стан у компоненті — за замовчуванням.
 - Уникай прямої роботи з **DOM**, якщо достатньо реактивного шаблону та ref.
-- **Magic numbers/strings** винось у константи; **computed** тримай простими, важкі обчислення — у функції або утиліти.
 
 ### State management
 
@@ -92,14 +91,12 @@ const additionalInstructions = `
 
 ### Обробка помилок (додатково)
 
-- **try/catch** навколо async-операцій; зрозумілі повідомлення для користувача; логування на сервіс моніторингу за потреби.
-- **Error boundary**-підхід у Vue — через окремі компоненти-обгортки та `onErrorCaptured` / глобальні хендлери залежно від архітектури.
+- **try/catch** навколо async-операцій; зрозумілі повідомлення для користувача через notifySuccess, notifyError; логування на сервіс моніторингу за потреби.
 
 ### Продуктивність
 
 - **v-for** — стабільні унікальні **`:key`**; не плутай **v-if** (умовний mount) і **v-show** (перемикання visibility).
-- Важкі **computed** / **watch** — не робити зайвої роботи; **debounce/throttle** для частих подій.
-- **v-once** для статичного вмісту; уникай глибоко вкладених дерев без потреби.
+- **debounce/throttle** для частих подій.
 - Після ручних **addEventListener** / підписок — прибирай у **onUnmounted**.
 
 ### Безпека
@@ -130,7 +127,7 @@ import { computed, onMounted } from 'vue'
 export default {
   setup() {
     const count = $ref(0)
-    const doubleCount = computed(() => count * 2)
+    const doubleCount = $computed(() => count * 2)
 
     onMounted(() => {
       console.log('Компонент змонтовано')
@@ -174,14 +171,40 @@ export default {
 import Vue from '@vitejs/plugin-vue'
 import VueMacros from 'vue-macros/vite'
 import { defineConfig } from 'vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Layouts from 'vite-plugin-vue-layouts-next'
 
 export default defineConfig({
   plugins: [
+    AutoImport({
+      imports: [
+        // presets
+        'vue',
+        'vue-router',
+        'quasar',
+        'pinia',
+        // custom
+        {
+          '@nitra/vite-boot/apollo': [
+            // named imports
+            'gql',
+            'useQuery',
+            'useMutation',
+            'useSubscription'
+          ],
+          '@nitra/consola': [
+            // named imports
+            'createLogger' // import { createLogger } from '@nitra/consola'
+          ]
+        }
+      ]
+    }),
     VueMacros({
       plugins: {
         vue: Vue()
       }
-    })
+    }),
+    Layouts()
   ]
 })
 ```
@@ -189,3 +212,9 @@ export default defineConfig({
 ### Висновок
 
 Дотримуючись цих практик і правил, можна будувати масштабовані, підтримувані та ефективні застосунки на Vue 3 з Composition API. Завжди звіряйся з офіційною документацією Vue 3 щодо оновлень і нових можливостей.
+
+Потрібно використовувати Vite версії 8 та вище для frontend проекту на Vue.
+
+Потрібно використовувати unplugin-auto-import для автоматичного імпортування компонентів, composables, utils та інших функцій і прибирати з Vue sfc імпорти які їх дублюють.
+
+Потрібно використовувати vite-plugin-vue-layouts-next для автоматичного імпортування layout компонентів.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitra/cursor",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "CLI для завантаження cursor-правил Nitra у локальний репозиторій",
   "keywords": [
     "cli",

package/mdc/vite.mdc

@@ -1,7 +0,0 @@
----
-description: Vite
-alwaysApply: true
-version: '1.0'
----
-Потрібно використовувати Vite для frontend проекту версії 8 та вище.
-