Footer

There are two footer components, matching the header split:

• app/components/footer/AppFooter.vue — used in authenticated app contexts (default layout). Includes auth-gated "Report a bug" and "Request a feature" buttons inline with the link row.
• app/components/footer/PublicFooter.vue — used on public marketing pages (public, wide, auth layouts). No auth state, no dialogs.

What's included

Both footers share the same three-row layout:

1. Brand row — AppLogo and the tagline (seo.tagline i18n key) on the left; social icons (TikTok, Instagram, YouTube, X) on the right. Social URLs are hardcoded constants near the top of each file — edit them to point at your own brand's accounts.
2. Link row — Blog · Docs · Changelog · Support · Terms · Privacy. In AppFooter, "Report a bug" and "Request a feature" are inserted between Support and Terms when the user is authenticated.
3. Credit row — {siteName} is made by Squared Sums. (where "Squared Sums" links to https://squaredsums.com). Driven by the footer.madeBy i18n key with siteName and company slots.

i18n keys used:

• seo.tagline — short tagline shown under the logo.
• footer.madeBy — credit line with {siteName} and {company} placeholders.
• footer.socials.{tiktok,instagram,youtube,x} — aria-label strings for social icons.
• header.navigation.blog, header.navigation.docs, header.navigation.changelog, header.navigation.support, common.terms, common.privacy — reused for the link row.
• reportBug.button, requestFeature.button — auth-only buttons in AppFooter.

Quick tweaks

Changing the social links

Edit the socials array at the top of AppFooter.vue and PublicFooter.vue. Add or remove entries — each item needs a name, icon (an Iconify name, e.g. simple-icons:github), and href.

Changing the tagline

Edit the seo.tagline value in i18n/locales/en.json (and other locales as needed).

Changing the "made by" credit

Edit the footer.madeBy value in i18n/locales/en.json if you want a different sentence shape. The {siteName} and {company} placeholders are populated from runtime config and a hardcoded link respectively — change the link target in the <a href="https://squaredsums.com"> block inside each footer.

Removing the feedback buttons from AppFooter

If you don't need the feedback system, edit AppFooter.vue:

1. Remove the imports for ReportBugForm and RequestFeatureForm.
2. Remove the showRequestFeatureForm / showReportBugForm refs.
3. Remove the <template v-if="isAuthenticated"> block inside the link <nav>.
4. Remove the two dialog components at the bottom of the <footer>.

At that point AppFooter.vue and PublicFooter.vue are functionally identical and you can collapse them if you'd like.

Pages without a footer

Create a custom layout without a footer (e.g., app/layouts/minimal.vue):

<script setup lang="ts">
import AppHeader from '@/components/header/AppHeader.vue'
</script>

<template>
  <div>
    <AppHeader />
    <div class="base-container min-h-[calc(100vh-10rem)]">
      <slot />
    </div>
  </div>
</template>

Then use it on your page:

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

Related

• Feedback system - How feedback buttons work
• Internationalization - Add translations for footer text
• Iconify icon sets - Browse available icons (the project ships simple-icons and lucide icon sets)
• Tailwind CSS - Styling utilities and customization