feat: Import custom components.[#729]

lib/prepare/codegen.js

@@ -59,16 +59,25 @@ exports.genRoutesFile = async function ({
   )
 }
 
-exports.genComponentRegistrationFile = async function ({ sourceDir }) {
-  function genImport (file) {
+exports.genComponentRegistrationFile = async function ({ sourceDir, components, componentsDir }) {
+  function genFileImport (file) {
     const name = fileToComponentName(file)
-    const baseDir = path.resolve(sourceDir, '.vuepress/components')
+    return genImport(name, file)
+  }
+
+  function genCustomImport (component) {
+    const { name, file } = component
+    return genImport(name, file, true)
+  }
+
+  function genImport (name, file, isCustomComponent = false) {
+    const baseDir = isCustomComponent ? path.resolve(sourceDir) : path.resolve(sourceDir, componentsDir)
     const absolutePath = path.resolve(baseDir, file)
     const code = `Vue.component(${JSON.stringify(name)}, () => import(${JSON.stringify(absolutePath)}))`
     return code
   }
 
-  const components = (await resolveComponents(sourceDir)) || []
-  return `import Vue from 'vue'\n` + components.map(genImport).join('\n')
+  const componentsFromFolder = (await resolveComponents(sourceDir, componentsDir)) || []
+  return `import Vue from 'vue'\n` + componentsFromFolder.map(genFileImport).join('\n') + components.map(genCustomImport).join('\n')
 }
 

lib/prepare/resolveOptions.js

@@ -173,12 +173,20 @@ module.exports = async function resolveOptions (sourceDir) {
     locales: siteConfig.locales
   }
 
+  // resolve components dir
+  const componentsDir = siteConfig.componentsDir || '.vuepress/components'
+
+  // resolve custom components
+  const components = siteConfig.components || []
+
   const options = {
     siteConfig,
     siteData,
     sourceDir,
     outDir,
+    componentsDir,
     publicPath: base,
+    components,
     pageFiles,
     pagesData,
     themePath,

lib/prepare/util.js

@@ -55,8 +55,8 @@ exports.isIndexFile = function (file) {
   return indexRE.test(file)
 }
 
-exports.resolveComponents = async function (sourceDir) {
-  const componentDir = path.resolve(sourceDir, '.vuepress/components')
+exports.resolveComponents = async function (sourceDir, componentsDir) {
+  const componentDir = path.resolve(sourceDir, componentsDir)
   if (!fs.existsSync(componentDir)) {
     return
   }