Menu
Per-page SEO with usePageSeo() and useSiteSeoDefaults(). Use when setting title/description/OG/Twitter meta or working with seo.* keys in locales.
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 | seo |
| description | Per-page SEO with usePageSeo() and useSiteSeoDefaults(). Use when setting title/description/OG/Twitter meta or working with seo.* keys in locales. |
Configure SEO for pages and blog articles with usePageSeo().
app/composables/usePageSeo.ts - main composableapp/composables/useSiteSeoDefaults.ts - global defaults (app.vue only)app/locales/en.json → seo.* sectionapp/locales/es.json → seo.* section// In <script setup> of the page - reads seo.pages.[pageKey].* from the active locale
usePageSeo('home')
usePageSeo('me')
usePageSeo('projects')
usePageSeo('blog')
usePageSeo('resources')
type SeoValue = string | (() => string)
type PageSeoOptions = {
title?: SeoValue
description?: SeoValue
ogType?: 'website' | 'article' // default: 'website'
image?: SeoValue // absolute or relative URL (resolved automatically)
keywords?: SeoValue
}
const { data: post } = await useAsyncData(...)
usePageSeo('blog', {
title: () => post.value?.title || t('seo.pages.blog.title'),
description: () => post.value?.summary || t('seo.pages.blog.description'),
ogType: 'article',
image: () => post.value?.image,
keywords: () => post.value?.tags?.join(', '),
})
{
"seo": {
"siteName": "DDeras",
"twitterHandle": "daiv_09",
"defaults": {
"title": "Software Engineer",
"description": "...",
"keywords": ["Vue", "TypeScript", "..."],
"author": "David Deras",
"ogImage": "/punpun_OG.webp",
"ogImageAlt": "..."
},
"pages": {
"home": { "title": "...", "description": "...", "keywords": ["..."] },
"me": { "title": "...", "description": "...", "keywords": ["..."] },
"projects": { "title": "...", "description": "...", "keywords": ["..."] },
"blog": { "title": "...", "description": "...", "keywords": ["..."] },
"resources": { "title": "...", "description": "...", "keywords": ["..."] }
}
}
}
useSeoMeta() with: title, description, keywordsog:site_name, og:locale, og:type, og:url, og:title, og:description, og:image, og:image:alttwitter:card (summary_large_image), twitter:site, twitter:creator, twitter:title, twitter:description, twitter:imageseo.pages.[newKey] in app/locales/en.jsonseo.pages.[newKey] in app/locales/es.jsonusePageSeo('newKey') in the pageuseSiteSeoDefaults() only call in app/app.vue (once at startup)useSeoMeta() directly in pages; use usePageSeo()