Skip to content

Vue 2, use a component inside another component

Here's how to import a component inside another component in Vue.js

Say you have a Pixel component in src/components/Pixel.vue

In another component, Canvas, which is located in src/components/Canvas.vue, you can import that Pixel component by importing it inside the script tag of the Vue Single File Component:

<template>
  <p>Canvas</p>
  <Pixel />
</template>

<script>
import Pixel from './Pixel'

export default {
  name: 'App',
  components: {
    Pixel
  }
}
</script>

→ Here's my latest YouTube video

→ Get my Vue.js 2 Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list