How to import a component inside another component in Vue.js

Learn how to import a Vue.js component inside another component.

Suppose you have a landing page component src/components/Landing.vue, which has general information about your product/service.

Now you want to extend your landing page by adding a portfolio, which features the most recent projects.

You need to create your portfolio component first e.g. in src/components/Projects/Portfolio.vue and then import it inside the script tag within your Landing.vue component.

<template>
  <div>
    <h1>Landing page</h1>
    <p>Some copy</p>
    <portfolio />
  </div>
</template>

<script>
import Portfolio from './Projects/Portfolio'

export default {
  name: 'Landing',
  components: {
    'portfolio-projects': Portfolio
  }
}
</script>

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-import-component

PS: Make sure you check other Vue.js tutorials, e.g. how to prevent multiple form submissions in Vue.js.