Coding Challenge: Nuxt Layouts, Pages, and Components

Problem statement

In this challenge, create a working Nuxt project using components, pages, and layouts:

Some code files have been added to the example below. Two .vue files named contact.vue and default.vue have been added to the layouts directory. Also, two .vue files named contact.vue and index.vue have been added to the pages directory. A component has been created in the components directory named Section.vue file takes in a message prop and displays it in the template. Your task is to implement the following:

• Enable the default layout for the index.vue page.

• Enable the contact layout for the contact.vue page.

• Include the Section.vue component into the index.vue page and pass a message prop. 

• Include the Section.vue component into the contact.vue page and pass a message prop.

Try it yourself

You can implement your solution in the code widget provided below. Test your code by visiting the project in the browser and also adding “/contact” to the URL to view the contact.vue page.

If you’re unsure how to do this, click the “Show Hint” button.