Front-End Development Projects with Vue.js

Appendix

1. Starting Your First Vue Project

Activity 1.01: Building a Dynamic Shopping List App Using Vue.js

Solution:

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

1. Create a new Vue project using the Vue CLI by running the vue create new-activity-app command. Manually select the features via the command prompts for dart-sass, babel, and eslint.
2. Scaffold an input field with a placeholder, Press enter to add new item, which has a v-model bound to a data object called input and a ref attribute with the value of the input. Bind the Enter key to the addItem method, which will be created in the next step, by using @keyup.enter and referencing the addItem method:

   <template>

     <div class="container">

       <h2>Shopping ...