6. Routing

Activity 6.01: Creating a Message SPA with Dynamic, Nested Routing, and Layouts

Solution:

Perform the following steps to complete the activity:

Note

To access the code files for this activity, refer to https://packt.live/2ISxml7.

1. Create a new MessageEditor.vue file in the src/views/ folder as the main component to interact with the user when writing a message. We use textarea as a message input field and attach the listener method onChange to the DOM event change to capture any input change regarding the message typed by the user. Also, we add ref to keep a pointer record to the rendered HTML textarea element for modifying our saved messages at a later stage.

   Besides this, we also attach another listener method, onSendClick, to the click event on the Submit button to capture the user's confirmation for sending the message. The actual logic implementation of both onChange and onSendClick is shown in Step 3.

2. The <template> section should...