File Naming Conventions

Proper file naming conventions ensure consistency, maintainability, and prevent conflicts in your Nuxt projects.

General Principles

  • Use lowercase letters for all file names
  • Use hyphens (-) to separate words, not underscores or spaces
  • Be descriptive but concise
  • Include relevant context in the name

Asset-Specific Conventions

Images

Format: {context}-{description}-{variant}.{ext}

Examples:

hero-background-dark.jpg
logo-company-small.svg
icon-user-profile.png
product-thumbnail-large.webp

Icons

Format: icon-{name}-{size}.{ext}

Examples:

icon-home-24.svg
icon-search-32.svg
icon-close-16.svg

Fonts

Format: {font-family}-{weight}-{style}.{ext}

Examples:

roboto-400-regular.woff2
open-sans-700-bold.woff2
inter-400-italic.woff2

Videos

Format: {context}-{description}-{quality}.{ext}

Examples:

hero-animation-1080p.mp4
tutorial-intro-720p.webm
background-loop-4k.mp4

Nuxt-Specific Considerations

Public Directory Assets

Assets in /public/ are served at the root:

/public/images/logo-company.svg
→ Accessible at: /images/logo-company.svg

Assets Directory

Assets in /assets/ are processed by Vite:

/assets/images/hero-background.jpg
→ Import in component: ~/assets/images/hero-background.jpg

Anti-Patterns to Avoid

  • IMG_1234.jpg - Non-descriptive names
  • myImage (1).png - Spaces and parentheses
  • LOGO.SVG - All uppercase
  • user_profile.png - Underscores instead of hyphens

Version Control Considerations

For assets that may have versions:

logo-company-v2.svg
brand-guidelines-2024.pdf

Next Steps

Table of Contents