webpack & vuejs include component into component

Question

I'm use webpack & vuejs.

but when I try to add some component in other component I can't.

for example rounter/index.js :

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Tools from '@/components/Tools' 
//import toolsmenu from '@/components/toolsmenu' 


export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Tools',
      name: 'Tools',
      component: Tools
    }
  ]
})

then in component folder: HelloWorld,Tools,toolsmenu.

Tools.vue:

<template>
    <div>
       <toolsmenu></toolsmenu>
       my code
    </div>
</template>
<script>
    export default {
        name: 'Tools'
    }
</script>

toolsmenu.vue:

<template>
    <ul>
        <li> <a href="#"> index </a> </li>
    </ul>
</template>
<script>
    export default {
        name: 'toolsmenu'
    }
</script>

but in I cant include toolsmenu component in Tools component. Now how can I include toolsmenu into Tools.

dvnguyen · Accepted Answer · 2018-01-26 00:10:59Z

7

You need to register toolsmenu as a component of Tools:

<template>
    <div>
       <toolsmenu></toolsmenu>
       my code
    </div>
</template>
<script>
    import toolsmenu from '@/components/toolsmenu';
    export default {
        name: 'Tools',
        components: {
            toolsmenu
        }
    }
</script>

answered Jan 26, 2018 at 0:10

dvnguyen

3,0301 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 00:32:10Z

1

you have in register toolsmenu component in Tools component first

Tools.vue

<template>
    <div>
       <toolsmenu></toolsmenu>
       my code
    </div>
</template>
<script>
 import Vue from 'vue'
 import toolsmenu from './toolsmenu.vue'

 // register component
 Vue.component('toolsmenu', toolsmenu)
 export default {
  name: 'Tools'
 }
</script>

ref : https://v2.vuejs.org/v2/guide/components.html

edited Jul 15, 2022 at 0:32

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 26, 2018 at 4:18

yussan

2,3472 gold badges22 silver badges25 bronze badges

1 Comment

A1Gard Over a year ago

Thanks for guide and reference.

Collectives™ on Stack Overflow

webpack & vuejs include component into component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related