AI Features
Home
Courses
Mastering TypeScript

Component Structure and Child Components with Props

Learn about the component structure in Vue, including the usage of child components and props.

We'll cover the following...

Component structure

If we explore the files and directory structure that the Vue CLI has generated for our application, we will notice three top-level directories named node_modules, public, and src.

Outside of the node_modules directory, which contains the modules required to generate the application, the public directory contains the index.html file, and all other Vue files are housed in the src directory. If we examine the src directory, we will notice a main.ts file with the following contents:

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Here, we can see that the main.ts file is importing the App class from the App.vue file and calling the createApp function with the App class as its only argument. It then calls the mount function with the string '#app', which tells Vue to mount the generated HTML from the App class to a DOM element with an id of app or ...