Develop: bundle and lazy-loading

.gitignore

@@ -22,4 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-*.cache
+*.cache
+
+# Bundle Analyzer
+stats.html

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "browser-image-compression": "^2.0.2",
-    "dompurify": "^3.1.3",
     "dotenv": "^16.4.5",
     "firebase": "^10.12.0",
     "marked": "^12.0.2",
@@ -26,6 +25,7 @@
     "@types/node": "^20.12.12",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
+    "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.1",
     "typescript": "^5.4.5",
     "vite": "^5.2.0"

src/app.vue

@@ -1,73 +1,16 @@
 <template>
   <div class="app-wrapper">
-    <div class="app" v-if="postLoaded">
-      <navigation :user_login="user_login" :admin="admin" />
+    <div class="app">
       <router-view />
-      <footer-vue v-if="!user_login" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import Navigation from "./shared/components/navigation/navigation.vue";
-import Footer from "./shared/components/footer/footer.vue";
-import { usePostStore } from "./stores/posts";
-import { useUserStore } from "./stores/users";
-import { ref, computed, defineComponent, onBeforeMount } from "vue";
-import { auth } from "./shared/firebase/firebaseInit";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "app",
-  components: {
-    navigation: Navigation,
-    "footer-vue": Footer,
-  },
-  setup() {
-    const postStore = usePostStore();
-    const userStore = useUserStore();
-    const user_login = ref(false);
-    const admin = ref(false);
-
-    async function checkUserState() {
-      auth.onAuthStateChanged((currentUser) => {
-        if (currentUser) {
-          let email = currentUser.email;
-          //@ts-ignore
-          email === import.meta.env.VITE_APP_ADMINEMAIL
-            ? (admin.value = true)
-            : (admin.value = false);
-          admin.value = true;
-          userStore.setUser(currentUser);
-          user_login.value = true;
-        } else {
-          user_login.value = false;
-        }
-      });
-    }
-
-    onBeforeMount(async () => {
-      await checkUserState();
-      await postStore.getPost();
-    });
-
-    return {
-      profileEmail: computed(() => userStore.profileEmail),
-      postLoaded: computed(() => postStore.postLoaded),
-      user_login,
-      admin,
-    };
-  },
-  watch: {
-    user_login(val) {
-      // console.log(`The user_login value is changed to ${val}`);
-      this.user_login = val;
-    },
-    admin(val) {
-      // console.log(`The admin value is changed to ${val}`);
-      this.admin = val;
-    },
-  },
 });
 </script>
-
 <style lang="scss" src="./app.scss"></style>

src/main.ts

@@ -1,17 +1,24 @@
 import { createApp } from "vue";
 import App from "./app.vue";
 import router from "./routes";
-import { VueShowdownPlugin } from "vue-showdown";
 import { createPinia } from "pinia";
-import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
+const app = createApp(App);
 const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
 
-createApp(App)
-  .use(pinia)
-  .use(router)
-  .use(VueShowdownPlugin, {
+async function loadPlugins() {
+  // Dynamically import the VueShowdownPlugin
+  const { VueShowdownPlugin } = await import("vue-showdown");
+
+  // Dynamically import the piniaPluginPersistedstate
+  const { default: piniaPluginPersistedstate } = await import(
+    "pinia-plugin-persistedstate"
+  );
+
+  // Use the plugins
+  pinia.use(piniaPluginPersistedstate);
+
+  app.use(VueShowdownPlugin, {
     flavor: "github",
     options: {
       emoji: true,
@@ -28,5 +35,12 @@ createApp(App)
       requireSpaceBeforeHeadingText: true,
       ghMentions: true,
     },
-  })
-  .mount("#app");
+  });
+}
+
+// Load plugins conditionally or based on some user interaction
+loadPlugins().then(() => {
+  app.use(pinia);
+  app.use(router);
+  app.mount("#app");
+});

src/shared/components/navigation/navigation.vue

@@ -11,12 +11,12 @@
           <router-link class="link" :to="{ name: 'home' }">Home</router-link>
           <router-link class="link" :to="{ name: 'blogs' }">Blogs</router-link>
           <router-link
-            v-if="user_login && admin"
+            v-if="isUserLogin && isAdmin"
             class="link"
             :to="{ name: 'create-post' }"
             >Create Post
           </router-link>
-          <router-link v-if="!user_login" class="link" :to="{ name: 'login' }"
+          <router-link v-if="!isUserLogin" class="link" :to="{ name: 'login' }"
             >Login/Register
           </router-link>
         </ul>
@@ -75,12 +75,12 @@
         <router-link class="link" :to="{ name: 'home' }">Home</router-link>
         <router-link class="link" :to="{ name: 'blogs' }">Blogs</router-link>
         <router-link
-          v-if="user_login && admin"
+          v-if="isUserLogin && isAdmin"
           class="link"
           :to="{ name: 'create-post' }"
           >Create Post</router-link
         >
-        <router-link v-if="!user_login" class="link" :to="{ name: 'login' }"
+        <router-link v-if="!isUserLogin" class="link" :to="{ name: 'login' }"
           >Login/Register</router-link
         >
       </ul>
@@ -93,15 +93,15 @@ import { ref, computed, defineComponent, onMounted, onBeforeMount } from "vue";
 import { AuthService } from "../../services/auth.service";
 import { useUserStore } from "../../../stores/users";
 import { useRouter } from "vue-router";
-import { auth } from "../../firebase/firebaseInit";
+import { auth } from "../../firebase/firebase-auth";
 
 export default defineComponent({
   name: "navigation",
   props: {
-    user_login: {
+    isUserLogin: {
       type: Boolean,
     },
-    admin: {
+    isAdmin: {
       type: Boolean,
     },
   },

src/shared/firebase/firebase-app.ts

@@ -0,0 +1,5 @@
+import { initializeApp } from "firebase/app";
+import { firebaseConfig } from "./firebase-config";
+
+const firebaseApp = initializeApp(firebaseConfig);
+export { firebaseApp };

src/shared/firebase/firebase-auth.ts

@@ -0,0 +1,4 @@
+import { getAuth } from "firebase/auth";
+import { firebaseApp } from "./firebase-app";
+const auth = getAuth(firebaseApp);
+export { auth };

src/shared/firebase/firebase-bucket.ts

@@ -0,0 +1,4 @@
+import { getStorage } from "firebase/storage";
+import { firebaseApp } from "./firebase-app";
+const bucket = getStorage(firebaseApp);
+export { bucket };

src/shared/firebase/firebase-config.ts

@@ -0,0 +1,8 @@
+export const firebaseConfig = {
+  apiKey: "AIzaSyB9D51M_e4XkvBSoyFZPc8hTaKCTbgqBjk",
+  authDomain: "vuejs3-fireblog.firebaseapp.com",
+  projectId: "vuejs3-fireblog",
+  storageBucket: "vuejs3-fireblog.appspot.com",
+  messagingSenderId: "954680780309",
+  appId: "1:954680780309:web:147f187f86f99dc590901c",
+};

src/shared/firebase/firebase-firestore.ts

@@ -0,0 +1,5 @@
+import { firebaseApp } from "./firebase-app";
+import { getFirestore } from "firebase/firestore";
+
+const firestore = getFirestore(firebaseApp);
+export { firestore };

src/shared/services/auth.service.ts

@@ -4,7 +4,7 @@ import {
   signInWithEmailAndPassword,
   signOut,
 } from "firebase/auth";
-import { auth } from "../firebase/firebaseInit";
+import { auth } from "../firebase/firebase-auth";
 
 export class AuthService {
   constructor() {}