feat: add logo component

Author: davidstackio

playground/app.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-const nuxtifyConfig = useAppConfig().nuxtify
+const nuxtifyConfig = useNuxtifyConfig()
 </script>
 
 <template>
-  <div>
+  <h1>
     nuxtify-pages module playground!
-    <v-btn>
-      Test
-    </v-btn>
+  </h1>
+
+  <v-btn>
+    Test Button
+  </v-btn>
+
+  <div>
+    <AppLogo />
   </div>
 
   <h2>nuxtifyConfig</h2>

src/module.ts

@@ -1,5 +1,7 @@
 import {
   defineNuxtModule,
+  addComponentsDir,
+  addImportsDir,
   addPlugin,
   createResolver,
   installModule,
@@ -44,6 +46,12 @@ export default defineNuxtModule<ModuleOptions>({
       ..._options,
     })
 
+    // Add auto-imports
+    addComponentsDir({
+      path: resolver.resolve('runtime/components'),
+    })
+    addImportsDir(resolver.resolve('runtime/composables'))
+
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     addPlugin(resolver.resolve('./runtime/plugin'))
   },

src/runtime/components/app/AppLogo.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useAppConfig } from '#app'
+import { useDisplay, computed } from '#imports'
+
+// Props
+const props = defineProps({
+  dark: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: Number,
+    default: undefined,
+  },
+})
+
+// App state
+const nuxtifyConfig = useAppConfig().nuxtify
+const { smAndDown } = useDisplay()
+
+// Image URL logic
+// Set default to the light image url
+let imageUrl = nuxtifyConfig.brand.logo.lightUrl
+
+// If it's dark theme logo and there's a dark image url, use that
+if (props.dark && nuxtifyConfig.brand.logo.darkUrl) {
+  imageUrl = nuxtifyConfig.brand.logo.darkUrl
+}
+
+// Image width logic
+const width = computed(() => {
+  if (props.width) {
+    return props.width
+  }
+  else {
+    return smAndDown.value
+      ? nuxtifyConfig.brand.logo.mobileWidth
+      : nuxtifyConfig.brand.logo.width
+  }
+})
+</script>
+
+<template>
+  <v-img
+    v-if="imageUrl"
+    :width
+    :src="imageUrl"
+    :alt="`${nuxtifyConfig.brand.name} logo`"
+  />
+  <span
+    v-else
+    :class="`text-subtitle-1 text-sm-h6 ${dark ? '' : 'text-primary'}`"
+  >
+    {{ nuxtifyConfig.brand.name }}
+  </span>
+</template>

src/runtime/composables/nuxtify.ts

@@ -0,0 +1,3 @@
+import { useAppConfig } from '#app'
+
+export const useNuxtifyConfig = () => useAppConfig().nuxtify