메뉴
Pages, routes, definePageMeta, localized navigation, prerender. Use when creating pages or changing navigation/routing.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | pages-and-routing |
| description | Pages, routes, definePageMeta, localized navigation, prerender. Use when creating pages or changing navigation/routing. |
Page structure, available routes and navigation patterns.
app/pages/index.vue - /app/pages/about.vue - /aboutapp/pages/projects.vue - /projectsapp/pages/resources.vue - /resourcesapp/pages/blog/index.vue - /blogapp/pages/blog/[slug].vue - /blog/[slug]app/router.options.ts - custom scroll behaviorapp/data/sidebar-items.ts - menu items (see the data-files skill)| Route | Layout | Description |
|---|---|---|
/ | default | Landing with hero and overview |
/about | default | Profile and experience |
/projects | default | Project portfolio |
/resources | default | Resources and material |
/blog | blog | Article listing (6/page) |
/blog/[slug] | blog | Individual article |
All routes have an equivalent in /es/*.
<!-- app/pages/new.vue -->
<script setup lang="ts">
definePageMeta({ layout: 'default' })
usePageSeo('new') // must exist in seo.pages.new in both locales
</script>
<template>
<!-- content -->
</template>
Additional steps:
seo.pages.new in app/locales/en.json and es.jsonapp/data/sidebar-items.ts (if it goes in the menu)navigation.items.new in both locales<!-- Template -->
<NuxtLink :to="localePath('/blog')">Blog</NuxtLink>
<NuxtLink :to="localePath(`/blog/${post.slug}`)">{{ post.title }}</NuxtLink>
// Script
const localePath = useLocalePath()
navigateTo(localePath('/about'))
navigateTo(localePath('/blog/my-slug'), { replace: true })
// New tab
const router = useRouter()
const url = router.resolve(localePath('/blog')).href
globalThis.open(url, '_blank')
.shell-main (default) and .blog-main (blog)#heading) smooth-scroll to the heading/tools → /
/es/tools → /es
nitro.prerender.crawlLinks: true - prerenders all linked routes/sitemap.xml, /robots.txt// To display email, socials, etc. in pages
import { contactInfo } from '~/data/contact'
// Do not hardcode email or social network URLs
definePageMeta({ layout: '...' }) in each page (there is no default layout)usePageSeo('pageKey') in each page (SEO critical for prerender)$router.push() without localePath()plugins/gsap.ts (depends on .shell-main/.blog-main)/blog/[slug].vue is route.params.slugGlobal 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.