Menu
Vuetify 4 - themes, @mdi/js icons, useDisplay, components. Use when using v-* components or touching the theme.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Global 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.
| 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 it