@nuxtify/pages 0.5.1 → 0.6.1

package/README.md

@@ -83,7 +83,7 @@ Nuxtify Pages builds on the functionality in [Nuxtify Core](https://github.com/n
 
 - Ready to use components, page templates, and layouts so you can _ship weirdly fast_
 - Easily override any component with [Vuetify global defaults](https://vuetifyjs.com/en/features/global-configuration/)
-- Icons powered by [Material Design Icons](https://pictogrammers.com/library/mdi/) via [Vuetify icon fonts](https://vuetifyjs.com/en/features/icon-fonts/)
+- Icons powered by [Material Design Icons](https://pictogrammers.com/library/mdi/)
 - Fully responsive and adapts to all modern browsers and devices
 - (coming soon) Light and dark mode toggle
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtify/pages",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "configKey": "nuxtifyPages",
   "compatibility": {
     "nuxt": ">=4.0.0"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, useLogger, addLayout, addComponentsDi
 import { defu } from 'defu';
 
 const name = "@nuxtify/pages";
-const version = "0.5.1";
+const version = "0.6.1";
 
 const module$1 = defineNuxtModule().with({
   meta: {
@@ -15,7 +15,7 @@ const module$1 = defineNuxtModule().with({
   },
   moduleDependencies: {
     "@nuxtify/core": {
-      version: ">=0.1.11"
+      version: ">=0.4.0"
     }
   },
   defaults: {
@@ -60,11 +60,6 @@ const module$1 = defineNuxtModule().with({
     addImportsDir(resolve("./runtime/composables"));
     addImportsDir(resolve("./runtime/utils"));
     extendPages((pages) => {
-      pages.unshift({
-        name: "index",
-        path: "/",
-        file: resolve("./runtime/pages/IndexPage.vue")
-      });
       pages.unshift({
         name: "slug",
         path: "/:slug",

package/dist/runtime/components/EmailSubscribeForm.vue

@@ -8,7 +8,6 @@ import {
   ref,
   submitFormData,
   useDisplay,
-  useId,
   useNuxtifyConfig
 } from "#imports";
 const props = defineProps({
@@ -53,7 +52,6 @@ const props = defineProps({
     default: ""
   }
 });
-const id = useId();
 const nuxtifyConfig = useNuxtifyConfig();
 const { xs } = useDisplay();
 const form = ref();
@@ -117,76 +115,78 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <!-- Form -->
-  <v-form
-    v-if="!isSubmitted"
-    ref="form"
-    validate-on="submit"
-    @submit.prevent="handleSubmit"
+  <v-card
+    flat
+    max-width="600"
+    width="100%"
   >
-    <div class="d-sm-flex justify-center">
-      <!-- Using useId prevents hydration mismatch warnings issue with Vuetify -->
-      <!-- See: https://github.com/vuetifyjs/vuetify/issues/19696 -->
-      <!-- Once the issue is resolved (and it's used internally in Vuetify), remove use of useId -->
-      <v-text-field
-        :id
-        v-model="formInput.email"
-        type="email"
-        color="secondary"
-        :placeholder="emailPlaceholder"
-        :rules="[formRules.required, formRules.validEmail]"
-        :rounded="xs ? 't-lg' : '0 ts-lg'"
-        hide-details="auto"
-        class="text-start"
-      >
-        <template #message="{ message }">
-          <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span>
-        </template>
-      </v-text-field>
-      <v-btn
-        type="submit"
-        variant="flat"
-        color="secondary"
-        size="x-large"
-        class="d-flex align-center py-7 mt-2 mt-sm-0"
-        :loading
-        :rounded="rounded()"
-        :append-icon="appendButtonIcon"
-        :prepend-icon="prependButtonIcon"
-        :block="xs"
+    <!-- Form -->
+    <v-form
+      v-if="!isSubmitted"
+      ref="form"
+      validate-on="submit"
+      @submit.prevent="handleSubmit"
+    >
+      <div class="d-flex flex-column flex-sm-row">
+        <v-text-field
+          v-model="formInput.email"
+          type="email"
+          variant="outlined"
+          color="secondary"
+          :placeholder="emailPlaceholder"
+          :rules="[formRules.required, formRules.validEmail]"
+          :rounded="xs ? 'lg' : '0 s-lg'"
+          hide-details="auto"
+          class="flex-grow-1 text-start"
+        >
+          <template #message="{ message }">
+            <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span>
+          </template>
+        </v-text-field>
+        <v-btn
+          type="submit"
+          color="secondary"
+          size="x-large"
+          class="d-flex align-center py-7 mt-2 mt-sm-0"
+          :loading
+          :rounded="rounded()"
+          :append-icon="appendButtonIcon"
+          :prepend-icon="prependButtonIcon"
+          :block="xs"
+        >
+          {{ buttonText }}
+        </v-btn>
+      </div>
+
+      <!-- Supporting Text -->
+      <div
+        v-if="showPrivacy || marketingConsentText"
+        :class="`text-body-2  ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'} mt-2`"
       >
-        {{ buttonText }}
-      </v-btn>
-    </div>
+        <span v-if="marketingConsentText">
+          {{ marketingConsentText }}
+        </span>
+        <span v-if="showPrivacy">
+          By signing up you agree to the
+          <NuxtLink
+            :to="nuxtifyConfig.policies?.privacyUrl"
+            :class="`text-decoration-none ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'}`"
+          >
+            Privacy Policy</NuxtLink>.
+        </span>
+      </div>
+    </v-form>
 
-    <!-- Supporting Text -->
+    <!-- Thank You -->
     <div
-      v-if="showPrivacy || marketingConsentText"
-      :class="`text-body-2  ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'} mt-2`"
+      v-else
+      class="text-body-1"
     >
-      <span v-if="marketingConsentText">
-        {{ marketingConsentText }}
-      </span>
-      <span v-if="showPrivacy">
-        By signing up you agree to the
-        <NuxtLink
-          :to="nuxtifyConfig.policies?.privacyUrl"
-          :class="`text-decoration-none ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'}`"
-        >
-          Privacy Policy</NuxtLink>.
-      </span>
+      {{ thankYouMessage }}
     </div>
-  </v-form>
-
-  <!-- Thank You -->
-  <div
-    v-else
-    class="text-body-1"
-  >
-    {{ thankYouMessage }}
-  </div>
+  </v-card>
 </template>
 
 <style scoped>
-:deep(.v-input__details){padding-inline:0}:deep(.v-text-field .v-input__details){padding-inline:0}a:hover{text-decoration:underline!important}
+:deep(.v-input__details){padding-inline:0}:deep(.v-text-field .v-input__details){padding-inline:0}a:hover{text-decoration:underline!important;text-underline-offset:4px}
 </style>

package/dist/runtime/components/app/AppFooter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, mdiArrowTopRight, useNuxtifyConfig } from "#imports";
+import { computed, useNuxtifyConfig } from "#imports";
 const nuxtifyConfig = useNuxtifyConfig();
 const footerPrimaryLinks = nuxtifyConfig.navigation?.altPrimary;
 const footerSecondaryLinks = nuxtifyConfig.navigation?.altSecondary;
@@ -14,113 +14,115 @@ const brandColWidth = computed(() => {
 </script>
 
 <template>
-  <v-row
-    class="px-sm-1 pt-12 pb-4 mb-1"
-    style="max-width: 1280px"
-  >
-    <v-col cols="12">
-      <FooterCallToAction v-if="nuxtifyConfig.footer?.cta?.show" />
+  <v-footer class="bg-primary justify-center mt-8 mt-md-16">
+    <v-row
+      class="px-sm-1 pt-12 pb-4 mb-1"
+      style="max-width: 1280px"
+    >
+      <v-col cols="12">
+        <FooterCallToAction v-if="nuxtifyConfig.footer?.cta?.show" />
 
-      <v-row class="mb-2">
-        <!-- Brand -->
-        <v-col
-          cols="12"
-          :lg="brandColWidth"
-        >
-          <!-- Logo -->
-          <NuxtLink to="/">
-            <AppLogo dark />
-          </NuxtLink>
+        <v-row class="mb-2">
+          <!-- Brand -->
+          <v-col
+            cols="12"
+            :lg="brandColWidth"
+          >
+            <!-- Logo -->
+            <NuxtLink to="/">
+              <AppLogo dark />
+            </NuxtLink>
 
-          <!-- Tagline -->
-          <p class="mt-2 clip-text">
-            {{ nuxtifyConfig.brand?.tagline }}
-          </p>
-        </v-col>
+            <!-- Tagline -->
+            <p class="mt-2 clip-text">
+              {{ nuxtifyConfig.brand?.tagline }}
+            </p>
+          </v-col>
 
-        <v-spacer />
+          <v-spacer />
 
-        <!-- Primary Links -->
-        <v-col :lg="12 - brandColWidth">
-          <v-row>
-            <v-col
-              v-for="group in footerPrimaryLinks"
-              :key="group.title"
-              cols="6"
-              md="3"
-              lg="3"
-            >
-              <p class="text-body-1 font-weight-bold mb-3">
-                {{ group.title }}
-              </p>
-              <div
-                v-for="link in group.links"
-                :key="link.text"
+          <!-- Primary Links -->
+          <v-col :lg="12 - brandColWidth">
+            <v-row>
+              <v-col
+                v-for="group in footerPrimaryLinks"
+                :key="group.title"
+                cols="6"
+                md="3"
+                lg="3"
               >
-                <v-btn
-                  :to="link.to"
-                  :href="link.href"
-                  variant="plain"
-                  :active="false"
-                  :ripple="false"
-                  :target="link.openInNew ? '_blank' : void 0"
-                  :rel="link.openInNew ? 'noopener nofollow' : void 0"
-                  class="px-0"
+                <p class="opacity-60 text-body-1 mb-3">
+                  {{ group.title }}
+                </p>
+                <div
+                  v-for="link in group.links"
+                  :key="link.text"
                 >
-                  {{ link.text }}
-                  <v-icon
-                    v-if="link.openInNew"
-                    :icon="mdiArrowTopRight"
-                    size="small"
-                    color="grey"
-                    class="ml-1"
-                  />
-                </v-btn>
-              </div>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                  <v-btn
+                    :to="link.to"
+                    :href="link.href"
+                    variant="text"
+                    :active="false"
+                    :ripple="false"
+                    :target="link.openInNew ? '_blank' : void 0"
+                    :rel="link.openInNew ? 'noopener nofollow' : void 0"
+                    class="px-0"
+                  >
+                    {{ link.text }}
+                    <v-icon
+                      v-if="link.openInNew"
+                      icon="mdi-arrow-top-right"
+                      size="small"
+                      color="grey"
+                      class="ml-1"
+                    />
+                  </v-btn>
+                </div>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
 
-      <v-row>
-        <v-col
-          cols="12"
-          sm="9"
-        >
-          <AppCredits class="opacity-60" />
+        <v-row>
+          <v-col
+            cols="12"
+            sm="9"
+          >
+            <AppCredits class="opacity-60" />
 
-          <v-divider
-            v-if="footerSecondaryLinks?.length"
-            class="my-4"
-            style="width: 50px"
-          />
+            <v-divider
+              v-if="footerSecondaryLinks?.length"
+              class="my-4"
+              style="width: 50px"
+            />
 
-          <!-- Secondary Links -->
-          <v-btn
-            v-for="link in footerSecondaryLinks"
-            :key="link.text"
-            :to="link.to"
-            :href="link.href"
-            variant="plain"
-            size="small"
-            :ripple="false"
-            :target="link.openInNew ? '_blank' : void 0"
-            :rel="link.openInNew ? 'noopener nofollow' : void 0"
-            class="text-capitalize pl-0 mb-2"
-          >
-            {{ link.text }}
-            <v-icon
-              v-if="link.openInNew"
-              :icon="mdiArrowTopRight"
+            <!-- Secondary Links -->
+            <v-btn
+              v-for="link in footerSecondaryLinks"
+              :key="link.text"
+              :to="link.to"
+              :href="link.href"
+              variant="plain"
               size="small"
-              color="grey"
-              class="ml-1"
-            />
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-col>
-  </v-row>
+              :ripple="false"
+              :target="link.openInNew ? '_blank' : void 0"
+              :rel="link.openInNew ? 'noopener nofollow' : void 0"
+              class="text-capitalize pl-0 mb-2"
+            >
+              {{ link.text }}
+              <v-icon
+                v-if="link.openInNew"
+                icon="mdi-arrow-top-right"
+                size="small"
+                color="grey"
+                class="ml-1"
+              />
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-footer>
 </template>
 
 <style scoped>

package/dist/runtime/components/app/{AppBar.vue → AppHeader.vue}

@@ -1,5 +1,5 @@
 <script setup>
-import { mdiArrowTopRight, mdiClose, mdiMenu, useDisplay, useDrawer, useNuxtifyConfig } from "#imports";
+import { useDisplay, useDrawer, useNuxtifyConfig } from "#imports";
 const { smAndDown } = useDisplay();
 const nuxtifyConfig = useNuxtifyConfig();
 const drawer = useDrawer();
@@ -46,7 +46,7 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
         {{ link.text }}
         <v-icon
           v-if="link.openInNew"
-          :icon="mdiArrowTopRight"
+          icon="mdi-arrow-top-right"
           size="x-small"
           color="grey"
           class="ml-1"
@@ -58,7 +58,7 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
       <!-- Mobile navigation -->
       <v-app-bar-nav-icon
         v-if="smAndDown"
-        :icon="drawer ? mdiClose : mdiMenu"
+        :icon="drawer ? 'mdi-close' : 'mdi-menu'"
         color="primary"
         aria-label="Navigation Menu"
         @click="drawer = !drawer"
@@ -86,7 +86,7 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
           {{ link.text }}
           <v-icon
             v-if="link.openInNew"
-            :icon="mdiArrowTopRight"
+            icon="mdi-arrow-top-right"
             size="x-small"
             color="grey"
             class="ml-1"
@@ -109,7 +109,7 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
           {{ featuredSecondaryLink.text }}
           <v-icon
             v-if="featuredSecondaryLink.openInNew"
-            :icon="mdiArrowTopRight"
+            icon="mdi-arrow-top-right"
             size="small"
             class="ml-1"
           />

package/dist/runtime/components/app/AppNavigationDrawer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { mdiArrowTopRight, useDisplay, useDrawer, useNuxtifyConfig } from "#imports";
+import { useDisplay, useDrawer, useNuxtifyConfig } from "#imports";
 const { smAndDown } = useDisplay();
 const nuxtifyConfig = useNuxtifyConfig();
 const drawer = useDrawer();
@@ -33,7 +33,7 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
             {{ link.text }}
             <v-icon
               v-if="link.openInNew"
-              :icon="mdiArrowTopRight"
+              icon="mdi-arrow-top-right"
               size="x-small"
               color="grey"
               class="ml-1"
@@ -57,7 +57,7 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
             {{ link.text }}
             <v-icon
               v-if="link.openInNew"
-              :icon="mdiArrowTopRight"
+              icon="mdi-arrow-top-right"
               size="x-small"
               color="grey"
               class="ml-1"
@@ -86,7 +86,7 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
           {{ featuredSecondaryLink.text }}
           <v-icon
             v-if="featuredSecondaryLink.openInNew"
-            :icon="mdiArrowTopRight"
+            icon="mdi-arrow-top-right"
             size="small"
             class="ml-1"
           />

package/dist/runtime/layouts/DefaultLayout.vue

@@ -10,7 +10,7 @@ useNuxtifySiteTitle();
     <!-- Accessibility -->
     <NuxtRouteAnnouncer />
 
-    <AppBar class="d-print-none" />
+    <AppHeader class="d-print-none" />
 
     <AppNavigationDrawer class="d-print-none" />
 
@@ -27,9 +27,7 @@ useNuxtifySiteTitle();
 
     <AppDialog class="d-print-none" />
 
-    <v-footer class="bg-primary justify-center mt-8">
-      <AppFooter />
-    </v-footer>
+    <AppFooter />
   </v-app>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtify/pages",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "Nuxtify pages module powered by Nuxt and Vuetify.",
   "license": "MIT",
   "homepage": "https://nuxtify.dev",
@@ -44,7 +44,7 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxtify/core": "^0.3.0",
+    "@nuxtify/core": "^0.4.1",
     "defu": "^6.1.4"
   },
   "devDependencies": {

package/dist/runtime/pages/IndexPage.vue

@@ -1,23 +0,0 @@
-<script setup>
-import { useNuxtifyConfig, useSeoMeta } from "#imports";
-const nuxtifyConfig = useNuxtifyConfig();
-useSeoMeta({
-  title: `${nuxtifyConfig.brand?.name}`,
-  description: `This is the ${nuxtifyConfig.brand?.name} home page.`
-});
-</script>
-
-<template>
-  <v-container class="text-center">
-    <v-row>
-      <v-col cols="12">
-        <ClientOnly>
-          <h1>{{ nuxtifyConfig.brand?.name }} Home</h1>
-          <template #fallback>
-            <AppLoading />
-          </template>
-        </ClientOnly>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>

package/dist/runtime/pages/IndexPage.vue.d.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/utils/icons.d.ts

@@ -1 +0,0 @@
-export { mdiArrowRight, mdiArrowTopRight, mdiClose, mdiMenu } from '@mdi/js';

package/dist/runtime/utils/icons.js

@@ -1 +0,0 @@
-export { mdiArrowRight, mdiArrowTopRight, mdiClose, mdiMenu } from "@mdi/js";