CODEWITHSUNDEEP
vue.jscomponentsvuepress
Dariusz Legizynski
Dariusz Legizynski

Reputation: 386

how to add a component in VuePress v.2.0.0?

I am using VuePress version:

"devDependencies": {
    "vuepress": "^2.0.0-beta.26"
}

and I can't add a simple .vue component to my .md page.

My Github LINK

Tried out the other solutions here, but nothing seems to help: Solution1 Solution2

I was following the guide from the official VuePress documentation about components. But all I get is a zero size component (no content shown)

enter image description here

Would really appreciate any solutions.

EDIT:

to make it a bit simpler than to check my github. The whole project contains anyway only 2 files.

So what I did, is to make a new component.vue file in .vuepress/components:

<template>
<h1>Hello from my test component</h1>
</template>

<script>
export default {}
</script>

<style></style>

and am trying to add it in my README.md file:

# Hello VuePress

### test component

<TestComponent />

<kebab-case-test-component />

Screenshot for my folder tree:

enter image description here

Upvotes: 1

Views: 2783

Answers (1)

tony19
tony19

Reputation: 138206

From the VuePress 1.x to 2.x migration docs:

.vuepress/components/

Files in this directory will not be registered as Vue components automatically.

You need to use @vuepress/plugin-register-components, or register your components manually in .vuepress/clientAppEnhance.{js,ts}.

To configure auto component registration:

  1. Install the @vuepress/plugin-register-components plugin:

    npm i -D @vuepress/plugin-register-components@next

  2. Add .vuepress/config.js with the following contents:

    const { path } = require('@vuepress/utils')

module.exports = {
  plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: path.resolve(__dirname, './components'),
      },
    ],
  ],
}

demo

Upvotes: 5

Related Questions