Appearance

Default Layout ​

File Information ​

  • Path: app/layouts/default.vue
  • Purpose: Minimal default layout with no additional structure
  • Used For: Pages that don't specify a layout or simple standalone pages

Overview ​

The default layout is the simplest layout in the application. It provides minimal structure with just a page content wrapper and basic SEO configuration. This layout is used as a fallback when pages don't specify a layout.

Structure ​

vue
<template>
  <NuxtPage />
</template>

Features ​

Minimal Structure ​

  • No header, sidebar, or navigation
  • No global components
  • Just page content wrapper
  • Perfect for simple pages

SEO Configuration ​

Basic SEO setup with default favicon:

typescript
useHead({
  link: computed(() => [
    {
      rel: "icon",
      type: "image/svg+xml",
      href: "/favicon.svg",
    },
  ]),
})

Usage ​

Automatic Selection ​

The default layout is used automatically when a page doesn't specify a layout:

vue
<!-- No layout specified - uses default -->
<script setup lang="ts">
// No definePageMeta needed
</script>

<template>
  <div>
    <!-- Page content -->
  </div>
</template>

Explicit Selection ​

You can also explicitly use the default layout:

vue
<script setup lang="ts">
definePageMeta({
  layout: 'default'
})
</script>

When to Use ​

Use the default layout for:

  • ✅ Simple standalone pages
  • ✅ Pages without navigation requirements
  • ✅ Pages that don't need header/sidebar
  • ✅ Minimal content pages
  • ✅ Fallback for unspecified layouts

Styling ​

No specific styling classes. Pages using this layout should handle their own styling.