isy/vue-toc

How To Use Documentation

Closed this issue · 2 comments

mschneekluth commented

Hi, I struggle to use your plugin. Could you explain me how to use it in a component?
I use Gridsome.
What I did:

  1. Installed plugin: npm install vue-toc
  2. Import and register plugin in component
    `<script>
    import VueToc from "vue-toc";

export default {
components: {
VueToc
},
</script>`

  1. <VueToc target="toc"></VueToc> <div class="toc" id="toc" v-html="$page.blog.content"></div>

VueToc shows up in Vue Devtools but the table is not generated. What did I do wrong? Sorry, I am new to Vue.
Thanks and regards
Marco

furqan-yousuf commented

Hello,
as per by the provided example at https://github.com/isy/vue-toc/blob/master/example/src/App.vue, I believe your code should be like below. You have to use article html element.

<article class="article-area" v-html="$page.blog.content">
</article>
<vue-toc target=".article-area"/>
mschneekluth commented

Thanks for your reply. It did help me. Addionally, another important part I missed out was that I did not include and register Toc.vue as a component seen here in main.js. It was not so obvious for me I thought importing it from node modules is enough.

So main.js looks like this:
...
import VueToc from './components/Toc'
...
Vue.component('vue-toc', VueToc)

Maybe this can help someone with the same struggle.