feat: add AppCredits component

Author: davidstackio

playground/app.vue

@@ -86,6 +86,16 @@ const clickToast = () => {
           </v-col>
         </v-row>
 
+        <!-- App credits -->
+        <v-row>
+          <v-col cols="12">
+            <v-card class="pa-4">
+              <h2>AppCredits</h2>
+              <AppCredits :brand-opacity="0.8" />
+            </v-card>
+          </v-col>
+        </v-row>
+
         <!-- App loading -->
         <v-row>
           <v-col cols="12">

playground/nuxt.config.ts

@@ -3,15 +3,30 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   compatibilityDate: '2025-05-13',
   nuxtifyCore: {
+    // Logs
     verboseLogs: true,
+
+    // Brand
     brand: {
       tagline: 'Catchy tagline',
     },
+
+    // Announcement
     announcement: {
       show: true,
       message: 'This is the announcement bar for the @nuxtify/core playground!',
       buttonText: 'Click me',
       buttonUrl: 'https://nuxtify.dev/',
     },
+
+    // Credits
+    credits: {
+      creator: {
+        name: 'Nuxtify',
+        domain: 'nuxtify.dev',
+      },
+      prependText: 'Made with love by',
+      appendText: ' Ship weirdly fast.',
+    },
   },
 })

src/runtime/components/app/AppCredits.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useNuxtifyConfig } from '#imports'
+
+// Props
+defineProps({
+  brandOpacity: {
+    type: Number,
+    default: 1,
+  },
+})
+
+// App state
+const nuxtifyConfig = useNuxtifyConfig()
+</script>
+
+<template>
+  <div v-if="nuxtifyConfig.credits?.prependText || nuxtifyConfig.credits?.creator?.name || nuxtifyConfig.credits?.appendText || nuxtifyConfig.credits?.showPoweredBy">
+    <small>
+      <!-- Prepend text -->
+      <span
+        v-if="nuxtifyConfig.credits.prependText"
+      >
+        {{ nuxtifyConfig.credits.prependText + ' ' }}
+      </span>
+
+      <!-- Creator name -->
+      <span v-if="nuxtifyConfig.credits.creator?.name">
+        <a
+          v-if="nuxtifyConfig.credits.creator.domain"
+          id="brand-name"
+          :href="`https://${nuxtifyConfig.credits.creator.domain}/?utm_source=${nuxtifyConfig.brand?.domain}&utm_medium=referral`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="font-weight-bold"
+        >{{ nuxtifyConfig.credits.creator.name }}</a><span v-else>{{ nuxtifyConfig.credits.creator.name }}</span>.
+      </span>
+
+      <!-- Append text -->
+      <span
+        v-if="nuxtifyConfig.credits.appendText"
+      >
+        {{ nuxtifyConfig.credits.appendText + ' ' }}
+      </span>
+
+      <!-- Powered by -->
+      <span v-if="nuxtifyConfig.credits.showPoweredBy">
+        <a
+          :href="`https://nuxtify.dev/?utm_source=${nuxtifyConfig.brand?.domain}&utm_medium=referral&utm_campaign=poweredby`"
+          target="_blank"
+          rel="noopener nofollow"
+        >Powered by Nuxtify</a>.
+      </span>
+    </small>
+  </div>
+</template>
+
+<style scoped>
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+  justify-content: start;
+}
+.v-btn:hover,
+a:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+/* Brand name */
+#brand-name {
+  opacity: v-bind(brandOpacity);
+}
+#brand-name:hover {
+  opacity: 1;
+}
+</style>