108 lines
3.0 KiB
Markdown
108 lines
3.0 KiB
Markdown
# Vue / Nuxt Extraction Patterns
|
|
|
|
Vue projects have a distinctive styling architecture. Styles are often
|
|
co-located with components inside `<style>` blocks, and Nuxt adds
|
|
convention-based directories.
|
|
|
|
## File Discovery Order
|
|
|
|
1. **`nuxt.config.ts` / `nuxt.config.js`** — May contain global CSS paths,
|
|
font configuration, and Tailwind/UnoCSS module config.
|
|
|
|
2. **`assets/css/main.css`** (or similar) — Global styles, CSS custom
|
|
properties, and font imports.
|
|
|
|
3. **`tailwind.config.js`** (if Tailwind is used) — Same as React; extract
|
|
custom theme values directly.
|
|
|
|
4. **`plugins/vuetify.ts`** (if Vuetify) — Theme definition with custom
|
|
palette and typography.
|
|
|
|
5. **Component `<style>` blocks** — Co-located styles (scoped or global).
|
|
|
|
## Single-File Component (SFC) Patterns
|
|
|
|
Vue components bundle template, script, and style together:
|
|
|
|
```vue
|
|
<template>
|
|
<div class="card">
|
|
<h2 class="card__title">{{ title }}</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background: var(--color-surface);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
.card__title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-primary);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
**Key extraction points:**
|
|
- `var(--*)` references → trace back to global CSS for the actual values
|
|
- `scoped` styles → component-specific, but reveal consistent patterns
|
|
- BEM naming (`.card__title`) → hints at component hierarchy
|
|
|
|
## Vuetify Theme Extraction
|
|
|
|
Vuetify projects define their design system explicitly:
|
|
|
|
```ts
|
|
// plugins/vuetify.ts
|
|
export default createVuetify({
|
|
theme: {
|
|
defaultTheme: 'light',
|
|
themes: {
|
|
light: {
|
|
colors: {
|
|
primary: '#294056',
|
|
secondary: '#6B6B6B',
|
|
background: '#FCFAFA',
|
|
surface: '#F5F5F5',
|
|
error: '#EF4444',
|
|
success: '#10B981',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
This is the design system declaration. Map each key to a functional role
|
|
and descriptive name.
|
|
|
|
## Quasar / PrimeVue / Element Plus
|
|
|
|
These component libraries use their own theming systems:
|
|
|
|
- **Quasar**: `quasar.config.js` → `framework.config.brand` for colors
|
|
- **PrimeVue**: CSS themes in `assets/` or theme preset configuration
|
|
- **Element Plus**: SCSS variables in `element-variables.scss`
|
|
|
|
Look for the override file — that's where the project's unique values live.
|
|
|
|
## CSS Scoping Behavior
|
|
|
|
Vue's `scoped` attribute adds data attributes for CSS isolation. When
|
|
scanning for patterns, look at multiple components to find repeated values
|
|
(same `border-radius`, similar `padding`, consistent color references).
|
|
Repeated patterns across scoped styles = design system conventions.
|
|
|
|
## Nuxt-Specific Patterns
|
|
|
|
- **`app.vue`** or **`layouts/default.vue`** — Root layout, reveals
|
|
global background, font loading, and overall structure.
|
|
- **`assets/`** — Global CSS, fonts, and images.
|
|
- **`composables/`** — May contain `useTheme` or `useDesignTokens`.
|
|
- **`nuxt.config.ts`** `css` array — Lists global stylesheets automatically
|
|
injected into every page.
|