Vue 2, use a component inside another component
New Courses Coming Soon
Join the waiting lists
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>
→ Get my Vue.js 2 Handbook
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X