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.

    <h1>Landing page</h1>
    <p>Some copy</p>
    <portfolio />
import Portfolio from './Projects/Portfolio'

export default {
  name: 'Landing',
  components: {
    'portfolio-projects': Portfolio

Hi, I'm Renat 👋


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

Want to share this with your friends?

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

Incoming search terms:

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

Get now

Write a Comment