Vuepress - Add component to each page

0
votes

The documentation in regards to this is quite short. I want to add a Vue component to each page in the app, without having to manually declare it in each template.

I managed to add a enhanceApp.js file and add this to it:

import MyComponent from './components/my-component'

export default ({
  Vue,
  options,
  router,
  siteData
}) => {
  Vue.component('MyComponent', MyComponent)
}

The app runs but I don't see the component anywhere. Any tips or other ways I can achieve this? Thanks!

2
vue.jsvuepress

2 Answers

1
votes

You do not need to put it in enhanceApp.js, just having the component in /.vuepress/components is sufficient.

Although, if you want to keep them outside that folder, that might be the way to get Vuepress to know about them.

Use it in an md file as you would do in a Vue template, 

<MyComponent></MyComponent>
1
votes

This is an old question and might only apply to V1 but this is simple to accomplish.

  1. Add your Vue component to .vuepress/components as usual
  2. In .vuepress/config.js add the following: 
    module.exports = {

  // rest of config...

  globalUIComponents: [
    'YourComponent'
  ]
}
    Don't even need to import your component.

See docs for more info.