---
name: app-development
description: Vue/Nuxt/UnoCSS application conventions. Use when building web apps, choosing between Vite and Nuxt, or writing Vue components.
---

# App Development

## Framework Selection

| Use Case                                               | Choice     |
| ------------------------------------------------------ | ---------- |
| SPA, client-only, library playgrounds                  | Vite + Vue |
| SSR, SSG, SEO-critical, file-based routing, API routes | Nuxt       |

## Vue Conventions

| Convention    | Preference                         |
| ------------- | ---------------------------------- |
| Script syntax | Always `<script setup lang="ts">`  |
| State         | Prefer `shallowRef()` over `ref()` |
| Objects       | Use `ref()`, avoid `reactive()`    |
| Styling       | UnoCSS                             |
| Utilities     | VueUse                             |

### Props and Emits

```vue
<script setup lang="ts">
interface Props {
  title: string;
  count?: number;
}

interface Emits {
  (e: 'update', value: number): void;
  (e: 'close'): void;
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
});

const emit = defineEmits<Emits>();
</script>
```
