Home » vue » Adding child Vue components inside of Vue components

Adding child Vue components inside of Vue components

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have a Nav.vue file which is rendering properly but I want to make it where Nav has a child component in it that I made called Intro.vue. How do I include that in Nav.vue?

App.js

window.Vue = require('vue');
window.axios = require('axios');


Vue.component('Topbar', 
    require('./components/Nav.vue').default);

new Vue({
    el: "#app"
})

blade template

<div id="app">
  <Nav></Nav>
</div>

Nav.vue

<template>
    <div> Test</div>
</template>
<script>
   export default {

   }
</script
Answers:

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’

###

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