[Vuejs]-Adding child Vue components inside of Vue components

by

2👍

✅

You can do it as follows,

Nav.vue

<template>
    <intro></intro>
</template>
<script>

   import Intro from 'path/to/your/component/from/nav'
   export default {

       components:{
           'intro':Intro
       }
   }
</script>

Let’s say if your Intro.vue is at the same directory as Nav.vue then the import statement should be like

import Intro from ‘./Intro’

👤user3581438

1👍

You can import the Vue file under your script heading in your parent vue component and reference it:

<template>
    <div> Test</div>
    <nav-component></nav-component>
</template>

<script>
  import NavComp from './Nav.vue'; //specify correct file location

  export default {
    components:{
        'nav-component': NavComp
    }
  }
</script
👤ryeMoss

Leave a comment