메뉴
Vuetify 4 - themes, @mdi/js icons, useDisplay, components. Use when using v-* components or touching the theme.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | vuetify |
| description | Vuetify 4 - themes, @mdi/js icons, useDisplay, components. Use when using v-* components or touching the theme. |
Using Vuetify 4 in the project: themes, icons, components and SSR restrictions.
app/plugins/vuetify.ts - configuration and theme synchronizationapp/stores/app.ts - active theme (source of truth)ssr: true@mdi/js) - tree-shaking, no CDNuseAppStore().theme via watch in the pluginprimary: #859FFF secondary: #5C7EFF accent: #A785FF
background: #0B0E14 surface: #151920 surface-variant: #1F252C
on-surface: #EDF2F7 on-background: #EDF2F7
error: #FCA5A5 info: #93C5FD success: #6EE7B7 warning: #FCD34D
primary: #3451D9 secondary: #2F29B0 accent: #6600A3
background: #F8F9FC surface: #FFFFFF surface-variant: #E8EBF0
on-surface: #0F1419 on-background: #0F1419
error: #DC2626 info: #2563EB success: #059669 warning: #D97706
/* Access theme colors in CSS */
color: rgb(var(--v-theme-primary));
background: rgba(var(--v-theme-surface), 0.8);
border-color: rgba(var(--v-theme-on-surface), 0.15);
import { mdiHome, mdiAccount, mdiPost, mdiFolder, mdiSchool } from '@mdi/js'
// In a Vuetify template
<v-icon :icon="mdiHome" />
<v-list-item :prepend-icon="mdiAccount" />
Only import icons from @mdi/js (not @mdi/font or CDN).
// CORRECT: use the store (the plugin syncs with Vuetify automatically)
const appStore = useAppStore()
appStore.toggleTheme()
appStore.setTheme('light')
// INCORRECT: do not use directly
// vuetify.theme.global.name.value = 'light' ← deprecated
The plugin adds/removes .dark on <html> when the theme changes:
.dark .my-element { /* dark mode styles */ }
v-app - main wrapper (in layouts)
v-navigation-drawer - desktop sidebar
v-app-bar - mobile top bar
v-list / v-list-item - navigation
v-btn - buttons
v-chip - chips/tags
v-slide-group - horizontal mobile navigation
v-tooltip - tooltips
v-divider - separators
// Only available on the client or inside ClientOnly
const { mobile, mdAndUp } = useDisplay()
// In SSR it returns default values (false) - may cause mismatch
// Always use with isHydrated or inside ClientOnly
vuetify.theme.global.name (deprecated in Vuetify 4)@mdi/font or CDN - only @mdi/jsuseDisplay() only works correctly on the client (see the ssr-patterns skill)--v-theme-* CSS variablesssr: true is configured - do not remove itGlobal Pinia store (useAppStore) for theme and language with cookie persistence. Use when changing theme or language, or touching app/stores/app.ts.
Create/edit blog articles in EN/ES - frontmatter, collections, images, Markdown features. Use when writing content under content/{en,es}/blog/.
Auto-imported global and content components plus layouts (default/blog). Use when using/creating components or working with ContentRenderer.
Project composables - useBlog, usePageSeo, useEnterAnimations, useBlogScroll, useGsapAnimations. Use when consuming blog/SEO/animation logic.
CSS custom properties, utility classes and theme colors. Use when editing styles, working in app/assets/styles/*, writing <style scoped>, or touching colors, spacing or typography.
Static data - contact.ts, projects.ts, sidebar-items.ts. Use when displaying contact/projects info or adding navigation items.