Create routes for pages in Vue app

[blackgirlbytes]

Create routes for pages in Vue app

🚀 Goal

Implement Vue Router in our Vue.js application and set up the following routes, each rendering a specific word:

• / (Home page) - renders the word "Home"
• /about - renders the word "About"
• /settings - renders the word "Settings"

This will create the navigation structure for our Decentralized Web App (DWA) starter in Vue.

🤔 Background

We're expanding our DWA starter collection to include Vue.js. This task focuses on setting up the routing system, which is crucial for creating a multi-page application structure in our Vue.js DWA starter.

This is part of our larger project to create a Vue.js DWA starter. See our main issue here for the full context and list of all related tasks.

🔑 Tasks and Acceptance Criteria

• Install and set up Vue Router in the project
• Create placeholder components for Home, About, and Settings pages
• Implement the following routes:
  • / for the Home page, rendering the word "Home"
  • /about for the About page, rendering the word "About"
  • /settings for the Settings page, rendering the word "Settings"
• Create a navigation menu that allows users to switch between these routes
• Ensure that the correct component is rendered for each route, displaying the specified word
• Implement proper error handling for undefined routes (404 page)
• Ensure the routing system works without any console errors

🌟 Resources

• Vue Router Documentation
• Vue.js Documentation
• Vue.js Style Guide

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[Johnnyevans32]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!