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

in Code Write a comment

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>

Hi, I'm Renat 👋

âžœ  


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.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment

2 Comments