refactor: move blog configuration into module

Author: danielroe

modules/blog.ts

@@ -0,0 +1,36 @@
+import Markdown from 'unplugin-vue-markdown/vite'
+import { addVitePlugin, defineNuxtModule, useNuxt } from 'nuxt/kit'
+import shiki from '@shikijs/markdown-it'
+import { defu } from 'defu'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'blog',
+  },
+  setup() {
+    const nuxt = useNuxt()
+
+    nuxt.options.extensions.push('.md')
+    nuxt.options.vite.vue = defu(nuxt.options.vite.vue, {
+      include: [/\.vue($|\?)/, /\.(md|markdown)($|\?)/],
+    })
+
+    addVitePlugin(() =>
+      Markdown({
+        include: [/\.(md|markdown)($|\?)/],
+        wrapperComponent: 'BlogPostWrapper',
+        wrapperClasses: 'text-fg-muted leading-relaxed',
+        async markdownItSetup(md) {
+          md.use(
+            await shiki({
+              themes: {
+                dark: 'github-dark',
+                light: 'github-light',
+              },
+            }),
+          )
+        },
+      }),
+    )
+  },
+})

nuxt.config.ts

@@ -1,13 +1,10 @@
 import process from 'node:process'
 import { currentLocales } from './config/i18n'
-import Markdown from 'unplugin-vue-markdown/vite'
 import { isCI, isTest, provider } from 'std-env'
-import type { ViteOptions } from 'nuxt/schema'
 
 const isStorybook = process.env.STORYBOOK === 'true' || process.env.VITEST_STORYBOOK === 'true'
 
 export default defineNuxtConfig({
-  extensions: ['.md'],
   modules: [
     '@unocss/nuxt',
     '@nuxtjs/html-validator',
@@ -351,29 +348,6 @@ export default defineNuxtConfig({
   },
 
   vite: {
-    vue: {
-      include: [/\.vue($|\?)/, /\.(md|markdown)($|\?)/],
-    },
-    plugins: [
-      Markdown({
-        include: [/\.(md|markdown)($|\?)/],
-        wrapperComponent: 'BlogPostWrapper',
-        wrapperClasses: 'text-fg-muted leading-relaxed',
-        async markdownItSetup(md) {
-          const shiki = await import('@shikijs/markdown-it')
-          md.use(
-            await shiki.default({
-              themes: {
-                dark: 'github-dark',
-                light: 'github-light',
-              },
-            }),
-          )
-        },
-        // important for types compatibility
-      }) as Exclude<ViteOptions['plugins'], undefined>[number],
-    ],
-
     optimizeDeps: {
       include: [
         '@vueuse/core',