Imported template from my nuxt-pwa-template repo

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

app.config.ts

@@ -0,0 +1,16 @@
+/*
+* Nuxt 3 Config File
+* https://nuxt.com/docs/getting-started/configuration#app-configuration
+*/
+export default defineAppConfig({
+    title: 'Hello Nuxt',
+    blog:{
+      enabled: true,
+    },
+    theme: {
+      dark: true,
+      colors: {
+        primary: '#ff0000'
+      }
+    }
+  })

app.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <SplashScreen :src="'/favicon.ico'" :time="1000" width="100px" />
+    <NuxtLoadingIndicator />
+    <AppHeader />
+    <NuxtPage />
+    <AppFooter />
+  </div>
+</template>
+
+<script>
+export default {
+
+  mounted(){
+    this.registerServiceWorker();
+  },
+
+  methods: {
+
+    /**
+     * * Register the service worker
+     * * Load the service worker file and set the scope.
+     * ? The scope is the path where the service worker will be active.
+     * ? The scope is relative to the domain.
+     * ! The scope is not the same as the path to the service worker file.
+     * TODO: Investigate if there is any usefull function to load in this function.
+     * TODO: Export this function to a separate file ?
+     */
+    async registerServiceWorker() {
+
+      // Define file and scope from root directory
+      const scope = ".";
+      const workerPath = "worker.js";
+
+      // Check if service worker is supported and register it
+      if ("serviceWorker" in navigator) {
+        try {
+
+          /**
+           * * Register the service worker
+           * .register() @returns a promise with a ServiceWorkerRegistration object
+           */  
+
+          const registration = await navigator.serviceWorker.register(workerPath, {
+            scope: scope,
+          }).then((registration) => {
+            console.log("Service worker registration successful with scope: ", registration.scope);
+            return registration;
+          });
+
+          if (registration.installing) {
+            console.log("Service worker installing");
+          } else if (registration.waiting) {
+            console.log("Service worker installed");
+          } else if (registration.active) {
+            console.log("Service worker active");
+          }
+        } catch (error) {
+          console.error(`Registration failed with ${error}`);
+        }
+      }
+    },
+
+  }
+}
+</script>

assets/README.md

@@ -0,0 +1,20 @@
+# `assets/` Directory
+
+Nuxt uses **Vite** or **webpack** to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through plugins (for Vite) or loaders (for webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation).
+
+By convention, Nuxt uses the `assets/` directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
+
+In your application's code, you can reference a file located in the `assets/` directory by using the `~/assets/ path`.
+
+## Example
+
+For example, referencing an image file that will be processed if a build tool is configured to handle this file extension:
+
+*app.vue*
+````html
+<template>
+  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
+</template>
+````
+
+>> Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the `public/` directory.

assets/tailwind.css

@@ -0,0 +1,53 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 
+ * Global styles
+ */
+
+body {
+    @apply dark:bg-gray-dark bg-gray-100 min-h-screen min-w-full;
+}
+
+h1, h2, h3, h4, h5, h6, span {
+    @apply dark:text-gray-100 text-gray-900 font-sf
+}
+
+p, li {
+    @apply dark:text-gray-200 text-gray-800
+}
+
+/* Transition Effect (All elements) */
+* {
+    transition: all 0.25s ease-out;
+}
+
+/* 
+ * Body sizes
+ */
+
+ body {
+    @apply max-w-5xl mx-auto;
+}
+
+/* Page transition effects */
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.3s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+
+@font-face {
+    font-family: "San Francisco";
+    src: url("./fonts/san-francisco-display/SFUIDisplay-Light.ttf") format('truetype');
+}
+
+@font-face {
+    font-family: "San Francisco Bold";
+    src: url("./fonts/san-francisco-display/SFUIDisplay-Bold.ttf") format('truetype');
+}

components/AppFooter.vue

@@ -0,0 +1,26 @@
+<template>
+    <footer class="w-full fixed bottom-0 border-t border-1 border-dashed p-5 dark:border-gray-600">
+        <div class="flex max-w-7xl mx-auto justify-between items-center">
+
+            <p>© alexrueda 2022</p>
+
+            <div id="social" class="flex items-center dark:text-gray-200 text-gray-700">
+                <NuxtLink>
+                    <Icon name="uil:github-alt" class="w-5 h-5 m-2" />
+                </NuxtLink>
+                <NuxtLink>
+                    <Icon name="uil:twitter" class="w-6 h-6 m-2" />
+                </NuxtLink>
+                <NuxtLink>
+                    <Icon name="mingcute:discord-fill" class="w-6 h-6 m-2" />
+                </NuxtLink>
+                <NuxtLink>
+                    <Icon name="mingcute:tiktok-fill" class="w-6 h-6 m-2" />
+                </NuxtLink>
+                <NuxtLink>
+                    <Icon name="mingcute:linkedin-fill" class="w-6 h-6 m-2" />
+                </NuxtLink>
+            </div>
+        </div>
+    </footer>
+</template>

components/AppHeader.vue

@@ -0,0 +1,45 @@
+<template>
+    <header class="fixed w-full top-0 z-10 backdrop-blur-md">
+      <nav class="max-w-7xl mx-auto navigation justify-between">
+        <NuxtLink to="/">
+          <img src="/logo.png" alt="" class="w-10 h-10">
+        </NuxtLink>
+
+        <ul class="hidden lg:flex space-x-5 items-center">
+          <li><NuxtLink to="/about">About</NuxtLink></li>
+          <li><NuxtLink to="/blog">Blog</NuxtLink></li>
+        </ul>
+        <Switch class="hidden lg:flex"/>
+        <!-- Burger icon -->
+        <NuxtLink @click="toggleMobileMenu()" class="flex lg:hidden">
+          <Icon name="mingcute:menu-line" class="text-gray-200 w-6 h-6 m-2" />
+        </NuxtLink>
+
+      </nav>
+
+      <MobileMenu class="hidden mobile-menu fadeIn" />
+
+    </header>
+  </template>
+
+<script>
+
+  export default {
+
+    methods: {
+      toggleMobileMenu(){
+        // Toggle mobile menu
+        document.querySelector('.mobile-menu').classList.toggle('hidden')
+      }
+    }
+  }
+
+</script>
+
+<style>
+.navigation {
+    @apply flex;
+    @apply p-5;
+    @apply space-x-5;
+  }
+</style>

components/MobileMenu.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="w-full h-52 bg-slate-500">
+    <NuxtLink to="/">Home</NuxtLink>
+    <NuxtLink to="/about">About</NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

components/README.md

@@ -0,0 +1,24 @@
+# `components/` [Directory](https://nuxt.com/docs/getting-started/views#components)
+
+Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
+
+*app.vue*
+````html
+<template>
+  <div>
+    <h1>Welcome to the homepage</h1>
+    <AppAlert>
+      This is an auto-imported component.
+    </AppAlert>
+  </div>
+</template>
+````
+
+*components/AppAlert.vue*
+````html
+<template>
+  <span>
+    <slot />
+  </span>
+</template>
+````

components/SplashScreen.vue

@@ -0,0 +1,76 @@
+<!-- 
+    * This component is used to show a splash screen while the app is loading for first time.
+    * It is used in the 'app.vue' file
+    TODO: Add some transition effects, for example, fade in and out.
+    TODO: Make animate logo while loading and adjust time.
+ -->
+
+<template>
+    <div id="full-screen" v-if="loading == true">
+      <img class="center-component fadeIn" :src="src" :width="width"/>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SplashScreen',
+    props: {
+        src: {
+            type: String,
+            default: 'favicon.ico'
+        },
+        time: {
+            type: Number,
+            default: 2000
+        },
+        width: {
+            type: String,
+            default: '80px'
+        },
+    },
+    data(){
+        return {
+            loading: true,
+        }
+    }, 
+    mounted(){
+        setTimeout(() => {
+            this.loading = false
+        }, this.time)
+    }
+}
+</script>
+
+<style>
+/* 
+ * Positioning
+*/
+#full-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0);
+    z-index: 9999;
+}
+
+.center-component {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* 
+ * Effects
+*/
+.fadeIn{
+    animation: fadeInEffect 2s ease;
+}
+
+@keyframes fadeInEffect{
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+</style>