feat(app): create a module from @docus/app (#86)

src/app.ts

@@ -19,6 +19,85 @@ const glob = (pattern: string, options: GlobOptions = {}) =>
   )
 
 export const setupAppModule = (nuxt: Nuxt) => {
+  // Initialize meta
+  nuxt.options.meta = nuxt.options.meta || {}
+
+  // Initialize head
+  nuxt.options.head = nuxt.options.head || {}
+
+  // Initialize head meta
+  nuxt.options.head.meta = nuxt.options.head.meta || []
+
+  // Push meta to head meta
+  nuxt.options.head.meta.push(
+    { charset: 'utf-8' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  )
+
+  // Set bridge config
+  nuxt.options.bridge = nuxt.options.bridge || {}
+  nuxt.options.bridge.autoImports = false
+  nuxt.options.bridge.postcss8 = true
+
+  // Inject components
+  nuxt.options.components = Array.isArray(nuxt.options.components) ? nuxt.options.components : []
+  nuxt.options.components.push({
+    path: resolveAppDir('components'),
+    isAsync: false,
+    prefix: '',
+    level: 999
+  })
+
+  // Init color mode
+  // Docs: https://color-mode.nuxtjs.org
+  nuxt.options.colorMode = nuxt.options.colorMode || {}
+  nuxt.options.colorMode.classSuffix = ''
+
+  // Init image module
+  nuxt.options.image = nuxt.options.image || {}
+  nuxt.options.image.domains = nuxt.options.image.domains || []
+  nuxt.options.image.domains.push('https://i3.ytimg.com')
+
+  // Set server configuration
+  nuxt.options.target = 'server'
+  nuxt.options.server = nuxt.options.server || {}
+  nuxt.options.server.port = parseInt(process.env.PORT || '4000', 10)
+
+  // Set generate configuration
+  nuxt.options.generate = nuxt.options.generate || {}
+  nuxt.options.generate.fallback = '404.html'
+  nuxt.options.generate.routes.push('/')
+
+  // Set Nitro configuration
+  nuxt.options.nitro = nuxt.options.nitro || {}
+  nuxt.options.nitro.experiments = nuxt.options.nitro.experiments || {}
+  nuxt.options.nitro.experiments.wasm = true
+  nuxt.options.nitro.inlineDynamicImports = true
+  nuxt.options.nitro.externals =
+    process.env.NITRO_PRESET === 'cloudflare'
+      ? false
+      : {
+          inline: ['@docus/core', 'ohmyfetch', 'property-information', '@docus/mdc'],
+          external: [
+            'vue-docgen-api',
+            '@nuxt/kit',
+            '@nuxt/image',
+            '@nuxtjs/i18n',
+            'vue-meta',
+            'vue-router',
+            'vue-i18n',
+            'ufo',
+            'vue-client-only',
+            'vue-no-ssr',
+            'ohmyfetch'
+          ]
+        }
+
+  // Set build configuration
+  nuxt.options.build = nuxt.options.build || {}
+  nuxt.options.build.transpile = nuxt.options.build.transpile || []
+  nuxt.options.build.transpile.push('@docus/', 'ohmyfetch')
+
   // Setup default layout
   nuxt.options.layouts.default = resolveAppDir('layouts/default.vue')
 
@@ -108,7 +187,4 @@ export const setupAppModule = (nuxt: Nuxt) => {
       }
     }
   })
-
-  // Add Devtools integration (WIP)
-  // if (nuxt.options.dev) addPlugin(r('../devtools'), { append: true })
 }

src/config.ts

@@ -39,6 +39,7 @@ export const setupConfigModule = (nuxt: Nuxt) => {
 
   // @ts-ignore - Default title and description for pages
   nuxt.options.meta.name = config.title
+
   // @ts-ignore
   nuxt.options.meta.description = config.description
 

src/kit/withDocus.ts

@@ -2,7 +2,7 @@ import { NuxtConfig } from '@nuxt/kit'
 import jiti from 'jiti'
 import { distDir } from '../dirs'
 import type { DocusConfig } from '../../types'
-import _nuxtConfig from '../nuxt.config'
+import docusModule from '../module'
 import { mergeConfig } from './extend'
 import { loadTheme, checkDocusTheme } from './helpers'
 
@@ -27,13 +27,17 @@ export function withDocus(userConfig: NuxtConfig & { rootDir: string }): NuxtCon
   let _docusConfig: DocusConfig = {}
   try {
     _docusConfig = _require('./docus.config', userConfig.rootDir)
-    _nuxtConfig.hasDocusConfig = true
+    userConfig.hasDocusConfig = true
   } catch (e) {
-    _nuxtConfig.hasDocusConfig = false
+    userConfig.hasDocusConfig = false
   }
 
   // Set second level extend for theme config
-  let appConfig: NuxtConfig = _nuxtConfig as NuxtConfig
+  let appConfig: NuxtConfig = userConfig as NuxtConfig
+
+  // Add Docus modules
+  if (!appConfig.buildModules) appConfig.buildModules = []
+  appConfig.buildModules = ['@docus/core', docusModule, ...appConfig.buildModules]
 
   // Set hasThemeConfig default
   appConfig.hasThemeConfig = false
@@ -72,8 +76,5 @@ export function withDocus(userConfig: NuxtConfig & { rootDir: string }): NuxtCon
     appConfig.hasTheme = false
   }
 
-  // Merge previous config with user Nuxt config
-  appConfig = mergeConfig(userConfig, appConfig)
-
   return appConfig
 }

src/module.ts

@@ -1,5 +1,5 @@
 import type { Nuxt } from '@nuxt/kit'
-import { defineNuxtModule } from '@nuxt/kit'
+import { defineNuxtModule, installModule } from '@nuxt/kit'
 import { setupConfigModule } from './config'
 import { setupI18nModule } from './i18n'
 import { setupAppModule } from './app'
@@ -11,5 +11,9 @@ export default defineNuxtModule({
     setupConfigModule(nuxt)
 
     await setupI18nModule(nuxt)
+
+    await installModule(nuxt, {
+      src: '@nuxt/image'
+    })
   }
 })