Register global components in themes

[harryhorton]

Vue Press version: 0.8.4

In .vuepress/ components are automatically registered when they're placed in components/. As a developer, my assumption was that the theme/ folder would have a similar feature.

Components can be registered with a pattern like this:

//.vuepress/theme/enhanceApp.js

import PostList from './components/PostList'
import PostSnippet from './components/PostSnippet'

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData // site metadata
  }) => {
    Vue.component('PostList', PostList)
    Vue.component('PostSnippet', PostSnippet)
  }

But it would be nice if the theme could mirror functionality of .vuepress/ structures like components/

[meteorlxy]

Should be closed.

The requested feature themeEnhanceApp has already been implemented, which has not included in the docs yet.

vuepress/lib/app/app.js

Lines 80 to 81 in 31b8feb

	themeEnhanceApp({ Vue, options, router, siteData })
	enhanceApp({ Vue, options, router, siteData })

vuepress/lib/prepare.js

Lines 177 to 181 in 31b8feb

	const themeEnhanceAppPath = path.resolve(themeDir, 'enhanceApp.js')
	if (fs.existsSync(themeEnhanceAppPath)) {
	options.themeEnhanceAppPath = themeEnhanceAppPath
	}
	}

[ulivz]

If you read his requirement carefully, you will find that he just want to leverage the functionality that all components at theme/component/ are registered as global components.

[meteorlxy]

You are right, I misunderstood what he requests.

This feature may need some discussions.

[hmatalonga]

Hello everyone!

I have tried to come up with a simple solution for this scenario and I have drafted these changes on vuepress/lib/prepare.js:

async function genComponentRegistrationFile ({ sourceDir }) {
  function genImport (file, componentPath) {
    const name = fileToComponentName(file)
    const baseDir = path.resolve(sourceDir, componentPath)
    const absolutePath = path.resolve(baseDir, file)
    const code = `Vue.component(${JSON.stringify(name)}, () => import(${JSON.stringify(absolutePath)}))`
    return code
  }
  const components = (await resolveComponents(sourceDir, '.vuepress/components')) || []
  const customThemeComponents = (await resolveComponents(sourceDir, '.vuepress/theme/components')) || []
  const componentsStr = components.map(f => genImport(f, '.vuepress/components')).join('\n')
  const customThemeComponentsStr = customThemeComponents.map(f => genImport(f, '.vuepress/theme/components')).join('\n')

  return `import Vue from 'vue'\n${componentsStr}\n${customThemeComponentsStr}`
}

Adding the component path as a second parameter to both resolveComponents and genImport could be used to generate the string for .vuepress/theme/components too.

I did some testing locally and I believe it achieves what is intended 👍

What do you think of this approach could it be viable? If so I would be happy to open a PR 😄

[hmatalonga]

@ulivz, @meteorlxy can you give some feedback on this idea? 😉

[meteorlxy]

I suggest to use options.themePath instead of '.vuepress/theme'.

In fact, I'm waiting for the first plugin API draft these days 😅

[hmatalonga]

Hello again!

Thanks for the tip @meteorlxy, I made some changes to make use of options.themePath and opened a PR for review 😄