Vue 3 with Stylus & VueUse Development

Expert guidance for Vue 3 projects using Stylus CSS preprocessor, VueUse composition utilities, and the linearly library for linear algebra operations.

Tech Stack

Code Style Requirements

Vue Components

Always structure Vue 3 single-file components with:

1. `<script lang="ts" setup>` block at the top

2. `<template>` block in the middle

3. `<style lang="stylus" scoped>` block at the bottom

**Always use scoped CSS** to prevent style leakage between components.

TypeScript

Use TypeScript for all component logic. Leverage Vue 3's Composition API with `<script setup>` syntax for cleaner, more concise components.

Stylus CSS

Write all styles using Stylus syntax within scoped style blocks. Take advantage of Stylus features like:

Linear Algebra

For any linear algebra operations (vectors, matrices, transformations), use the `linearly` library:

Language Convention

**All comments and commit messages must be written in English.**

This includes:

Commit Message Guidelines

Write commit messages that describe **what you did**, not **why you did it**.

Good Examples

```

Add user profile component

Update sidebar navigation styles

Fix header alignment issue

Remove unused imports from App.vue

```

Bad Examples

```

Add user profile component to improve UX

Update sidebar styles because the old ones were ugly

Fix alignment (header was misaligned due to padding)

```

Keep messages concise, imperative, and factual. Focus on the change itself, not the motivation or intention behind it.

Component Structure Example

```vue

<script lang="ts" setup>

import { ref, computed } from 'vue'

import { useMousePosition } from '@vueuse/core'

import { vec2 } from 'linearly'

const count = ref(0)

const { x, y } = useMousePosition()

const position = computed(() => vec2(x.value, y.value))

</script>

<template>

<div class="component">

<p>Count: {{ count }}</p>

<p>Mouse: {{ position }}</p>

</div>

</template>

<style lang="stylus" scoped>

.component

padding 20px

background-color #f5f5f5

p

margin 10px 0

color #333

</style>

```

Key Principles

1. Always use `<script lang="ts" setup>` for component logic

2. Always use `<style lang="stylus" scoped>` for component styles

3. Write all comments and commit messages in English

4. Keep commit messages factual and action-oriented

5. Use VueUse composables for common functionality

6. Use linearly for all linear algebra operations

7. Leverage Vue 3 Composition API patterns

8. Maintain consistent code formatting and structure