# Vue Renderer Standards

> Use when editing massCode renderer code in Vue 3, especially for script setup patterns, import rules, composables, shared state, and renderer-side conventions.

- Skill: `masscodeio/vue-renderer-standards` (Agent Skill)
- Install (CLI): `npx skillmds@latest add masscodeio/vue-renderer-standards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/masscodeio/vue-renderer-standards/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: masscodeio (https://skillmd.com/u/masscodeio)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/masscodeio/vue-renderer-standards

---


# Vue Renderer Standards

## Overview

Renderer в massCode строится на Vue 3 Composition API с `<script setup lang="ts">`. Здесь важны строгие import rules, composable-first state sharing и запрет на прямой доступ к backend-возможностям.

## Component Pattern

- Используй Vue 3 Composition API и `<script setup lang="ts">`.
- Vue core (`ref`, `computed`, `watch`, `onMounted` и подобные) не импортируй вручную: они auto-imported.
- Проектные компоненты из `src/renderer/components/` тоже не импортируй вручную: они auto-imported.
- Локальную логику компонента держи в script, а не в template.

## Manual Imports Only Where Required

Всегда импортируй вручную:

- composables из `@/composables`;
- utils из `@/utils`;
- `@vueuse/core`;
- Electron bridge из `@/electron`;
- Shadcn UI из `@/components/ui/shadcn/*`.

## Shared State

- Глобальное shared state реализуется composables без Pinia/Vuex.
- Reactive state, который должен шариться между компонентами, объявляй на module level, вне экспортируемой функции composable.
- Persistent UI/settings state храни через `store` из `@/electron`:
  - `store.app` для UI state;
  - `store.preferences` для user preferences.

## VueUse First

- Перед написанием нового composable сначала проверь, нет ли подходящего решения в `@vueuse/core`.
- Кастомный composable добавляй только если готового utility реально нет.

## Renderer Boundaries

- Renderer не импортирует storage internals или backend-модули доступа к данным напрямую.
- Renderer не обращается напрямую к Node.js, filesystem или storage runtime.
- Доступ к main process возможен только через `api` или `ipc`.

## Common Mistakes

- Ручной импорт `ref` / `computed` / `watch`.
- Ручной импорт локальных project components.
- Локальный state внутри composable, который должен быть общим между несколькими компонентами.
- Попытка “срезать путь” и импортировать backend-модуль прямо в renderer.