Preparing for light and dark and plugins correct use

Author: BhJaipal

frontend/app.vue

@@ -1,5 +1,5 @@
 <template>
-	<nuxt-layout>
+	<nuxt-layout name="default">
 		<nuxt-page></nuxt-page>
 	</nuxt-layout>
 </template>

frontend/components/Navbar.vue

@@ -53,9 +53,7 @@
 let mode = ref(false);
 watch(mode, () => {
 	if (!mode.value) {
-		document.body.parentElement?.classList.add("dark");
 	} else {
-		document.body.parentElement?.classList.remove("dark");
 	}
 });
 let toggleUI = {

frontend/pages/about/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { definePageMeta } from "#imports";
 import highlightjs from "~/assets/highlightjs.png";
 import vue from "~/assets/vue.png";
 import nitro from "~/assets/nitro.svg";
@@ -24,9 +23,6 @@ useAsyncData(async () => {
 	myInfo.value = data2 ?? null;
 	console.log(data2);
 });
-definePageMeta({
-	layout: "default"
-});
 
 useHead({
 	title: "About Page"

frontend/pages/create/index.vue

@@ -33,9 +33,6 @@ let pairedVales: Record<string, string> = {
 	"<": ">",
 	"`": "`"
 };
-definePageMeta({
-	layout: "default"
-});
 
 useHead({
 	title: "Create Page"
@@ -200,7 +197,7 @@ function update(e = eKeyDefault) {
 			<UAccordion :items="snipAccordian" size="xl">
 				<template #default>
 					<UButton color="emerald">
-						<Icon :name="icons(langSelect)" />
+						<Icon :name="iconFn(langSelect)" />
 						{{ langLabels[langSelect] }}
 					</UButton>
 				</template>

frontend/pages/index.vue

@@ -30,10 +30,6 @@ function goto() {
 	navigateTo("/search/" + search.value);
 }
 
-definePageMeta({
-	layout: "default"
-});
-
 onMounted(async function () {
 	let search = document.querySelector<HTMLInputElement>("#search");
 	if (search == null) return;

frontend/pages/search/[title].vue

@@ -4,7 +4,8 @@ import "./../../app.css";
 import hljs from "highlight.js";
 import "highlight.js/styles/vs2015.css";
 
-import { useGQLFetch } from "~/plugins/gql-fetch";
+let langNamesPrint = useNuxtApp().$langNamesPrint as (lang: string) => string;
+let useGQLFetch = useNuxtApp().$useGQLFetch as UseGQLFetch;
 
 let route = useRoute();
 let title: string = route.params.title;
@@ -27,12 +28,12 @@ const nuxtApp = useNuxtApp();
 
 onMounted(async function () {
 	if (nuxtApp.$useGQLFetch == undefined) return;
-	({ data: titleFind.value, error: error.value } = await useGQLFetch<{
-		titleFind: {
+	({ data: titleFind.value, error: error.value } = await useGQLFetch<
+		{
 			langName: string;
 			codeBoxes: { title: string; code: string }[];
-		}[];
-	}>(
+		}[]
+	>(
 		"http://localhost:3300/",
 		`#graphql
 			{
@@ -93,9 +94,7 @@ onMounted(async function () {
 					>
 						<span class="truncate"
 							>{{ index + 1 }}.
-							{{
-								useNuxtApp().$langNamesPrint(item.langName)
-							}}</span
+							{{ langNamesPrint(item.langName) }}</span
 						>
 
 						<template #trailing>

frontend/pages/test/index.vue

@@ -39,7 +39,6 @@ onMounted(async function () {
 		"http://localhost:3300/",
 		query
 	));
-	console.log(data.value, loading.value);
 });
 </script>