vuepress vue tip and folder structure

Question

I want to show folder structure in my vuepress docs like this one https://vuepress.vuejs.org/guide/directory-structure.html#default-page-routing

From the github code here https://raw.githubusercontent.com/vuejs/vuepress/master/packages/docs/docs/guide/directory-structure.md, I tried the same in my md file

::: vue
.
├── docs
│   ├── .vuepress _(**Optional**)_
│   │   ├── `components` _(**Optional**)_
│   │   ├── `theme` _(**Optional**)_
│   │   │   └── Layout.vue
│   │   ├── `public` _(**Optional**)_
│   │   ├── `styles` _(**Optional**)_
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── `templates` _(**Optional, Danger Zone**)_
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── `config.js` _(**Optional**)_
│   │   └── `enhanceApp.js` _(**Optional**)_
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
:::

but it looks like this

Answer 1

If you are using VuePress 1.x you can use a MarkDown Slot and a Vue component to mimic the directory structure you referenced. It gets tricky because the VuePress style theme overwrites some of the css, so you need to get hacky with it in the mounted() Vue lifecycle hook. To get this working first create the Directory.vue component and second create a MarkDown Slot in a .md file and consume it with the <Directory slotKey='slot-name' /> component.

docs
?? src
   ?? .vueress
   |   ?? components
   |   |  ?? Directory.vue
   |   |
   |   ?? config.js
   |
   ?? consumer
      ?? README.md

1. Directory.vue

<template>
    <div ref="directory" class="directory">
        <Content v-bind:slot-key="slotKey" />
    </div>
</template>

<script>
export default {
    props: {
        slotKey: String,
        codeColor: {
            type: String,
            default: 'azure'
        },
        codeBackground: {
            type: String,
            default: 'rgb(87, 87, 87)' 
        }
    },

    mounted() {
        // Get the div ref named directory
        const directory = this.$refs.directory

        // Remove all the <br> tags that get added
        directory.innerHTML =  directory.innerHTML.replace(/<br>/g, '')

        const first = directory.firstChild // <div class="content__vue">
        const second = first.firstChild // <p>
        const codes = second.getElementsByTagName('code') // all the <code> tags

        // Change style here to overwrite the theme
        Array.from(codes).forEach((el) => {
            el.style.color = this.codeColor
            el.style.backgroundColor = this.codeBackground
        })
    }

}
</script>

<style scoped>
    .directory {
        padding: 10px;
        border-radius: 10px;
        font-family: monospace;
        white-space: pre;
        background-color: rgb(48, 48, 48);
        color: rgb(184, 184, 184);
    }
</style>

2. README.md

<!-- Here we consume the MarkDown Slot in the Directory Vue component -->
<Directory slotKey="my-dir" />

<!-- Here is the MarkDown Slot -->
::: slot my-dir
.  
??? docs
    ??? .vuepress _(**Optional**)_
        ??? `components` _(**Optional**)_
        ??? `theme` _(**Optional**)_
:::

Note that the MarkDown Slot needs to be in the same file that it is being consumed in. The Slot will not be rendered unless you consume it with the native VuePress component Content.

By the way I think you meant to use the ::: v-pre referenced VuePress/Escaping