Components

• Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the components/ directory, and they will be automatically available across your application without having to explicitly import them.

Layout

• Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using components to display the page content. The layouts/default.vue file will be used by default. Custom layouts can be set as part of your page metadata.

For Example: Breadcrumbs are common throughout theme, so we have created a component for it and we call it wherever we need it. But now if you make any changes in the breadcrumbs component then all the breadcrumbs content will change as per you changes.

JSON Data

• To make code sorter and easily modifiable, we get the required data from a JSON file and loop through it. This process makes our code mode dynamic and more readable.

For Example: There are many links in our sidebar and if we write HTML code for individual link then, there will be hundreds of lines of code and it would be dificult to make any changes in all the links at once. So the solution is making a JSON file , in which we define an array and then loop through it. To add or remove links you can make modification in menu.json file.

• Navigate to theme > data folder to find all JSON files.