In this tutorial, we will study how to work with Vue nested component in Vue.js application development.
If you want to create a new project you can follow these steps. In your terminal, run the followng code
npm install -g vue-cli
This will install the vue-cli globally. Then you can create vue project by running following command
vue init webpack-simple myproject
In this totorial we will create component ProductRow
and we will add it to the ProductTable
I will create ProductRow.vue
file in the src folder. I will add following code to that file
{{product.name}} {{product.price}}
This is a table row and you have the prop name product
comming from the higher level component ProductTable
You can create new file under src folder and name it ProductTable.vue
and add the following code
Product Name Unit Price
Here, you have the product-row
which imported from the ProductRow.vue file
Finally, you can add the following code to App.vue
file
In this example, ProductRow
is the Vue nested component