basicBrogrammer · basicBrogrammer · Jan 7, 2026 · Jan 7, 2026
diff --git a/.gitignore b/.gitignore
@@ -67,6 +67,7 @@ typings/
 
 # nuxt.js build output
 .nuxt
+.output
 
 # Nuxt generate
 dist

diff --git a/components/ArticleCard.vue b/components/ArticleCard.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="my-4 border-2 rounded-lg border-primary">
-    <nuxt-link :to="{ name: 'blog-slug', params: { slug: article.slug } }">
+    <NuxtLink :to="`/blog/${article.slug}`">
       <div
         class="cover-img"
         :style="{ backgroundImage: `url(${article.cover_image})` }"
       ></div>
-    </nuxt-link>
+    </NuxtLink>
     <div class="p-3">
-      <nuxt-link :to="{ name: 'blog-slug', params: { slug: article.slug } }">
+      <NuxtLink :to="`/blog/${article.slug}`">
         <h3 class="font-bold tracking-wider text-center color-secondary">
           {{ article.title }}
         </h3>
-      </nuxt-link>
+      </NuxtLink>
       <p class="py-1 my-2 font-medium border-t-2">
         {{ article.description }}
       </p>
@@ -20,23 +20,17 @@
   </div>
 </template>
 
-<script>
-import ArticleTag from '@/components/ArticleTag'
-
-export default {
-  components: { ArticleTag },
-  props: {
-    article: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    tags() {
-      return this.article.tags.split(',').map((tag) => tag.trim())
-    },
+<script setup>
+const props = defineProps({
+  article: {
+    type: Object,
+    required: true,
   },
-}
+})
+
+const tags = computed(() => {
+  return props.article.tags.split(',').map((tag) => tag.trim())
+})
 </script>
 
 <style scoped>

diff --git a/components/ArticleTag.vue b/components/ArticleTag.vue
@@ -1,18 +1,16 @@
 <template>
-  <nuxt-link :class="tag" :to="{ name: 'index', query: { tag } }">{{
+  <NuxtLink :class="tag" :to="{ path: '/', query: { tag } }">{{
     tag
-  }}</nuxt-link>
+  }}</NuxtLink>
 </template>
 
-<script>
-export default {
-  props: {
-    tag: {
-      type: String,
-      required: true,
-    },
+<script setup>
+defineProps({
+  tag: {
+    type: String,
+    required: true,
   },
-}
+})
 </script>
 
 <style scoped>

diff --git a/components/SideBar.vue b/components/SideBar.vue
@@ -4,24 +4,24 @@
   >
     <ul class="flex flex-col items-start font-semibold tracking-wider">
       <li class="self-center">
-        <nuxt-link :to="{ name: 'index' }">
+        <NuxtLink to="/">
           <img
             class="w-24 h-24 border-4 border-double rounded-full border-primary"
             src="~/assets/images/prof-pic.jpg"
             alt="Jeremy Ward"
           />
-        </nuxt-link>
+        </NuxtLink>
       </li>
       <li>
-        <nuxt-link to="/about" @click="console.log('hey there')">
+        <NuxtLink to="/about">
           About
-        </nuxt-link>
+        </NuxtLink>
       </li>
       <li>
-        <nuxt-link to="/"> Blog </nuxt-link>
+        <NuxtLink to="/"> Blog </NuxtLink>
       </li>
       <!-- <li> -->
-      <!-- <nuxt-link to="/portfolio"> /Works </nuxt-link> -->
+      <!-- <NuxtLink to="/portfolio"> /Works </NuxtLink> -->
       <!-- </li> -->
       <li v-for="social in socials" :key="social.id" class="md:hidden">
         <a :href="social.href" target="_blank">
@@ -42,33 +42,24 @@
   </aside>
 </template>
 
-<script>
-import SocialIcon from '@/components/SocialIcon'
-
-export default {
-  components: { SocialIcon },
-  data() {
-    return {
-      socials: [
-        {
-          id: 'github',
-          text: 'GitHub',
-          href: 'https://github.com/basicbrogrammer',
-        },
-        {
-          id: 'twitter',
-          text: 'Twitter',
-          href: 'https://twitter.com/basicbrogrammer',
-        },
-        {
-          id: 'instagram',
-          text: 'Instagram',
-          href: 'https://instagram.com/basicbrogrammer',
-        },
-      ],
-    }
+<script setup>
+const socials = [
+  {
+    id: 'github',
+    text: 'GitHub',
+    href: 'https://github.com/basicbrogrammer',
   },
-}
+  {
+    id: 'twitter',
+    text: 'Twitter',
+    href: 'https://twitter.com/basicbrogrammer',
+  },
+  {
+    id: 'instagram',
+    text: 'Instagram',
+    href: 'https://instagram.com/basicbrogrammer',
+  },
+]
 </script>
 
 <style scoped>

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,74 @@
+import eslintConfigPrettier from 'eslint-config-prettier'
+import pluginVue from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+
+export default [
+  {
+    ignores: [
+      '.nuxt',
+      '.output',
+      'dist',
+      'node_modules',
+    ],
+  },
+  ...pluginVue.configs['flat/recommended'],
+  {
+    files: ['**/*.{js,mjs,cjs}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        // Browser globals
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        console: 'readonly',
+        // Node globals
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        // Nuxt globals
+        defineNuxtConfig: 'readonly',
+      },
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        // Browser globals
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        console: 'readonly',
+        // Node globals
+        process: 'readonly',
+        // Nuxt globals
+        defineNuxtConfig: 'readonly',
+        defineProps: 'readonly',
+        defineEmits: 'readonly',
+        defineExpose: 'readonly',
+        withDefaults: 'readonly',
+        useRoute: 'readonly',
+        useRouter: 'readonly',
+        useAsyncData: 'readonly',
+        queryContent: 'readonly',
+        ref: 'readonly',
+        computed: 'readonly',
+        watch: 'readonly',
+        onMounted: 'readonly',
+        onUnmounted: 'readonly',
+      },
+    },
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'off',
+    },
+  },
+  eslintConfigPrettier,
+]
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -16,56 +16,52 @@
         </svg>
       </button>
 
-      <nuxt-link
+      <NuxtLink
         to="/"
         class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"
-        >BasicBrogrammer</nuxt-link
+        >BasicBrogrammer</NuxtLink
       >
     </div>
     <div class="main-body">
-      <transition name="sidebar-slide">
+      <Transition name="sidebar-slide">
         <SideBar v-if="showSideBar" />
-      </transition>
+      </Transition>
       <article class="w-screen p-4 md:w-3/4">
         <div class="mx-auto w-full md:w-3/4">
-          <Nuxt />
+          <slot />
         </div>
       </article>
     </div>
   </main>
 </template>
-<script>
-import SideBar from '@/components/SideBar'
 
-export default {
-  components: { SideBar },
-  data() {
-    return {
-      sideNavOpen: false,
-      windowWidth: window.innerWidth,
-    }
-  },
-  computed: {
-    showSideBar() {
-      return this.windowWidth > 767 || this.sideNavOpen
-    },
-    sidebarToggleIcon() {
-      return this.sideNavOpen
-        ? 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
-        : 'M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z'
-    },
-  },
-  watch: {
-    $route() {
-      this.sideNavOpen = false
-    },
-  },
-  mounted() {
+<script setup>
+const route = useRoute()
+const sideNavOpen = ref(false)
+const windowWidth = ref(768)
+
+const showSideBar = computed(() => {
+  return windowWidth.value > 767 || sideNavOpen.value
+})
+
+const sidebarToggleIcon = computed(() => {
+  return sideNavOpen.value
+    ? 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
+    : 'M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z'
+})
+
+watch(() => route.path, () => {
+  sideNavOpen.value = false
+})
+
+onMounted(() => {
+  if (process.client) {
+    windowWidth.value = window.innerWidth
     window.addEventListener('resize', () => {
-      this.windowWidth = window.innerWidth
+      windowWidth.value = window.innerWidth
     })
-  },
-}
+  }
+})
 </script>
 
 <style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,6 +67,7 @@ typings/ @@
     # nuxt.js build output
     .nuxt
+    .output
     # Nuxt generate
     dist
@@ Expand Down @@