Setting the file. One moment.
Skill 07 · Stitch::extract Design Md
Subchapter 7.5
references/vue.mdMarkdown3 KBView on GitHub
Vue projects have a distinctive styling architecture. Styles are often
co-located with components inside <style> blocks, and Nuxt adds
convention-based directories.
nuxt.config.ts / nuxt.config.js — May contain global CSS paths,
font configuration, and Tailwind/UnoCSS module config.
assets/css/main.css (or similar) — Global styles, CSS custom
properties, and font imports.
tailwind.config.js (if Tailwind is used) — Same as React; extract
custom theme values directly.
plugins/vuetify.ts (if Vuetify) — Theme definition with custom
palette and typography.
Component <style> blocks — Co-located styles (scoped or global).
Vue components bundle template, script, and style together:
<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 valuesscoped styles → component-specific, but reveal consistent patterns.card__title) → hints at component hierarchyVuetify projects define their design system explicitly:
// 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.
These component libraries use their own theming systems:
quasar.config.js → framework.config.brand for colorsassets/ or theme preset configurationelement-variables.scssLook for the override file — that’s where the project’s unique values live.
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.
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.