feat(ui): add chip to announcement bar

Author: davidstackio

playground/app.config.ts

@@ -8,6 +8,7 @@ export default defineAppConfig({
     // Announcement
     announcement: {
       show: true,
+      chipText: 'News',
       message: 'This is a site wide announcement!',
       buttonText: 'Click me',
       buttonUrl: 'https://nuxtify.dev/',

src/module.ts

@@ -87,9 +87,11 @@ export default defineNuxtModule<ModuleOptions>().with({
     announcement: {
       show: false,
       message: '',
+      chipText: '',
+      chipColor: '',
       buttonText: '',
       buttonUrl: '',
-      exclude: [],
+      exclude: [] as string[],
     },
 
     // Navigation

src/runtime/components/app/AppAnnouncement.vue

@@ -11,10 +11,15 @@ const isExternalLink = computed(() =>
   isExternalUrl(nuxtifyConfig.announcement?.buttonUrl ?? '', nuxtifyConfig.brand?.domain ?? ''),
 )
 
+const chipText = computed(() => nuxtifyConfig.announcement?.chipText?.toUpperCase() ?? '')
+
 const shouldShow = computed(() => {
   if (!nuxtifyConfig.announcement?.show) return false
 
-  const hasContent = nuxtifyConfig.announcement?.message || (nuxtifyConfig.announcement?.buttonText && nuxtifyConfig.announcement?.buttonUrl)
+  const hasContent
+    = nuxtifyConfig.announcement?.message
+      || nuxtifyConfig.announcement?.chipText
+      || (nuxtifyConfig.announcement?.buttonText && nuxtifyConfig.announcement?.buttonUrl)
   if (!hasContent) return false
 
   // Exclude routes
@@ -30,6 +35,14 @@ const shouldShow = computed(() => {
     :order="-100"
     class="app-announcement justify-center text-start d-print-none"
   >
+    <v-chip
+      v-if="chipText"
+      :color="nuxtifyConfig.announcement?.chipColor || 'secondary'"
+      size="small"
+      class="mr-2 font-weight-bold"
+    >
+      {{ chipText }}
+    </v-chip>
     <div
       v-if="nuxtifyConfig.announcement?.message"
       :class="`${xs ? 'text-subtitle-2' : 'text-subtitle-1'} mr-4`"

src/types.ts

@@ -106,6 +106,16 @@ export interface ModuleOptions {
   announcement?: {
     show?: boolean
     message?: string
+    /**
+     * Text for the announcement chip.
+     */
+    chipText?: string
+    /**
+     * Color for the announcement chip.
+     *
+     * @default "secondary"
+     */
+    chipColor?: string
     buttonText?: string
     buttonUrl?: string
     exclude?: string[]

test/basic.test.ts

@@ -11,5 +11,7 @@ describe('ssr', async () => {
     // Get response to a server-rendered page with `$fetch`.
     const html = await $fetch('/')
     expect(html).toContain('<div>basic</div>')
+    expect(html).toContain('NEWS')
+    expect(html).toContain('This is a test announcement!')
   })
 })

test/fixtures/basic/app.vue

@@ -1,5 +1,10 @@
 <template>
-  <div>basic</div>
+  <v-app>
+    <AppAnnouncement />
+    <v-main>
+      <div>basic</div>
+    </v-main>
+  </v-app>
 </template>
 
 <script setup>

test/fixtures/basic/nuxt.config.ts

@@ -4,4 +4,11 @@ export default defineNuxtConfig({
   modules: [
     nuxtifyCore,
   ],
+  nuxtifyCore: {
+    announcement: {
+      show: true,
+      chipText: 'News',
+      message: 'This is a test announcement!',
+    },
+  },
 })