Footer

GitLab

Um componente de footer responsivo.

Uso

O componente Footer renderiza um elemento <footer>.

Use os slots left, default e right para personalizar o footer.

Neste exemplo, usamos o componente NavigationMenu para renderizar os links do footer ao centro.

Você pode usar o componente FooterColumns para exibir uma lista de links dentro do slot top.

Exemplos

Dentro de `app.vue`

Use o componente Footer no seu app.vue ou em um layout:

app.vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@nitro/ui'

const items: NavigationMenuItem[] = [{
  label: 'Figma Kit',
  to: 'https://go.nuxt.com/figma-ui',
  target: '_blank'
}, {
  label: 'Playground',
  to: 'https://stackblitz.com/edit/nuxt-ui',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]
</script>

<template>
  <NApp>
    <NHeader />

    <NMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </NMain>

    <NSeparator icon="i-simple-icons-nuxtdotjs" type="dashed" class="h-px" />

    <NFooter>
      <template #left>
        <p class="text-muted text-sm">
          Copyright © {{ new Date().getFullYear() }}
        </p>
      </template>

      <NNavigationMenu :items="items" variant="link" />

      <template #right>
        <NButton
          icon="i-simple-icons-discord"
          color="neutral"
          variant="ghost"
          to="https://go.nuxt.com/discord"
          target="_blank"
          aria-label="Discord"
        />
        <NButton
          icon="i-simple-icons-x"
          color="neutral"
          variant="ghost"
          to="https://go.nuxt.com/x"
          target="_blank"
          aria-label="X"
        />
        <NButton
          icon="i-simple-icons-github"
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/nuxt"
          target="_blank"
          aria-label="GitHub"
        />
      </template>
    </NFooter>
  </NApp>
</template>

Neste exemplo, usamos o componente Separator para adicionar uma borda acima do footer.

API

Props

Prop	Default	Type
`as`	`'footer'`	`any` The element or component this component should render as.
`ui`		`{ root?: SlotClass; top?: SlotClass; bottom?: SlotClass; container?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; }`

Slots

Slot	Type
`left`	`{}`
`default`	`{}`
`right`	`{}`
`top`	`{}`
`bottom`	`{}`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    footer: {
      slots: {
        root: '',
        top: 'py-8 lg:py-12',
        bottom: 'py-8 lg:py-12',
        container: 'py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3',
        left: 'flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1',
        center: 'mt-3 lg:mt-0 lg:order-2 flex items-center justify-center',
        right: 'lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        footer: {
          slots: {
            root: '',
            top: 'py-8 lg:py-12',
            bottom: 'py-8 lg:py-12',
            container: 'py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3',
            left: 'flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1',
            center: 'mt-3 lg:mt-0 lg:order-2 flex items-center justify-center',
            right: 'lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Error

Um componente de erro pronto para uso com suporte ao NuxtError.

Header

Um componente de header responsivo.