Vue nested component in single file component in Vue.js

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

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

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