Vuepress: Adding a Vue component to Vuepress

[angeliski]

• [x] I confirm that this is a issue rather than a question.

Bug report

Add vue component from local project doesn't work.

Version

I have tried with the version 0.14.9 and 1.0.0-alpha.39

Steps to reproduce

1 - Using vue-cli to create a project
2 - Add vuepress like the indicate in docs.
3 - Use the enhanceApp.js to import the local component created (e.g. HelloWorld.vue)
4 - Use that component in the markdown
You can see the project who I was using here https://github.com/angeliski/vuepress-docs-example

What is expected?

Just render the component.

What is actually happening?

I add a component in the components folder to test if works and everthing is fine, but the other component crash with message:
_Failed to mount component: template or render function not defined._

Other relevant information

I have tried find some examples in the documentation how I can do that, but I didn't find.
I can do something wrong there, in that case I will happy in provide a PR with update the docs.
Maybe some cookbook section
Cheers
Environment Info:

System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
Yarn: 1.13.0 - ~/.nvm/versions/node/v10.15.1/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
Browsers:
Chrome: 71.0.3578.98
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0-beta.2
@vue/babel-plugin-transform-vue-jsx: 1.0.0-beta.2
@vue/babel-preset-app: 3.4.1
@vue/babel-preset-jsx: 1.0.0-beta.2
@vue/babel-sugar-functional-vue: 1.0.0-beta.2
@vue/babel-sugar-inject-h: 1.0.0-beta.2
@vue/babel-sugar-v-model: 1.0.0-beta.2
@vue/babel-sugar-v-on: 1.0.0-beta.2
@vue/cli-overlay: 3.4.1
@vue/cli-plugin-babel: ^3.4.0 => 3.4.1
@vue/cli-plugin-eslint: ^3.4.0 => 3.4.1
@vue/cli-service: ^3.4.0 => 3.4.1
@vue/cli-shared-utils: 3.4.1
@vue/component-compiler-utils: 2.6.0
@vue/eslint-config-prettier: ^4.0.1 => 4.0.1
@vue/preload-webpack-plugin: 1.1.0
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^5.0.0 => 5.2.2
vue: ^2.6.6 => 2.6.7
vue-eslint-parser: 5.0.0
vue-hot-reload-api: 2.3.3
vue-loader: 15.6.4
vue-router: 3.0.2
vue-server-renderer: 2.6.7
vue-style-loader: 4.1.2
vue-template-compiler: ^2.5.21 => 2.6.7
vue-template-es2015-compiler: 1.9.1
vuepress: ^1.0.0-alpha.39 => 1.0.0-alpha.39
npmGlobalPackages:
@vue/cli: 3.4.1

• Is this a global or local install? Local
• Which package manager did you use for the install? Npm and Yarn (I have tried both)
• Does this issue occur when all plugins are disabled? I doesn't have plugins

[ulivz]

Please create a minimal reproduction - removing all your other unrelated deps.

[angeliski]

Sure.
Code in branch minimal:
https://github.com/angeliski/vuepress-docs-example/tree/minimal

[gmoralesc]

@angeliski looking into your branch to use the components globally into the pages you must create the components directory inside the .vuepress directory as move the .vue files. Like this:

.vuepress/components/MyComponent.vue

And later you can use it in a md page like this:

<MyComponent />

[angeliski]

Hey @gmoralesc Thank you for your response.
Maybe I have misuderstand, but that behavior is to automatic global registration.
The app level enhancements provide the Vue instance used by vuepress, so if I like to import a local component, I can do in that file.
I don't see anything in the docs about a limitation in import from that way.
So I think is a bug... If is a Vuepress limitation we can improving the docs putting that information.

[meteorlxy]

@angeliski

It's not a bug.

Do not use require() here:

https://github.com/angeliski/vuepress-docs-example/blob/d8b4e8a5954f38fc00fea87a474db99b26e2a8a6/docs/.vuepress/enhanceApp.js#L7

Use import HelloWorld from '../../src/HelloWorld.vue'

commonjs is not a good friend with es module.

[Shigma]

@meteorlxy Thanks a lot!

[angeliski]

Thank's a lot @meteorlxy
Maybe we can document that? We can put a FAQ or cookbook section

[xxholly32]

or，you can user plugin register-components plugin