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 list</h2>
       <div class="user-input">
         <input
           ...

2. Working with Data

Activity 2.01: Creating a Blog List Using the Contentful API

Solution:

Perform the following steps to complete the activity.

Note

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

1. Create a new Vue project using the Vue CLI vue create activity command and select the following presets: Babel, SCSS pre-processor (you can choose either of the pre-processor), and the prettier formatter.
2. Add a contentful dependency:

   yarn add contentful

3. In App.vue, remove the default content and import contentful into the component:

   <template>
     <div id=»app»>
     </div>
   </template>
   <script>
   import { createClient } from 'contentful'
   const client = createClient({
     space: ‹hpr0uushokd4›,
     accessToken: ‹jwEHepvQx-kMtO7_2ldjhE4WMAsiDp3t1xxBT8aDp7U›,
   })
   </script>
   <style lang="scss">
   #app {...

3. Vue CLI

Activity 3.01: Building a Vue Application Using the Vue-UI and the Vuetify Component Library

Solution:

Perform the following steps to complete the activity.

Note

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

1. Open a command line, and run vue create activity-app.
2. Choose the last selection, Manually select features, by pressing the Down arrow key once and pressing Enter:

   ? Please pick a preset: (Use arrow keys)
     default (babel, eslint)
    > Manually select features

3. Choose Babel, CSS Pre-processors, and Linter / Formatter:

   ? Check the features needed for your project:
    (*) Babel
    ( ) TypeScript
    ( ) Progressive Web App (PWA) Support
    ( ) Router
    ( ) Vuex
    (*) CSS Pre-processors
   >(*) Linter / Formatter
    ( ) Unit Testing
    ( ) E2E Testing

4. Choose Sass/SCSS (with dart-sass):

   ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default...

4. Nesting Components (Modularity)

Activity 4.01: A Local Message View with Reusable Components

Solution:

Perform the following steps to complete the activity.

Note

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

First, we need a way to capture messages from the user:

1. Create a MessageEditor component that displays a textarea:

   <template>
     <div>
       <textarea></textarea>
     </div>
   </template>

2. Adding a reactive instance property can be done using the data component method:

   <script>
   export default {
     data() {
       return {
         message: ''
       }
     }
   }
   </script>

3. On change of textarea, we will store the state in a message reactive instance variable that we have set to null in the data component method:

   <template>
     <!...

5. Global Component Composition

Activity 5.01: Building a Vue.js Application with Plugins and Reusable Components

Solution:

Perform the following steps to complete the activity:

Note

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

1. Install axios into the project:

   npm install --save axios

2. To inject axios as a property on this component instances, create a src/plugins/axios.js plugin file that, on install, will mean component instances have an axios property:

   import axios from 'axios'
   export default {
     install(Vue) {
       Vue.prototype.axios = axios
     }
   }

3. For the plugin to work, import and register it in src/main.js:

   // other imports
   import axiosPlugin from './plugins/axios.js'
   Vue.use(axiosPlugin)
   // other initialisation code

4. We also want to inject our API's baseUrl into all our components. We will create a plugin inline of the src/main.js file to do this:

   const...

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...

7. Animations and Transitions

Activity 7.01: Building a Messages App with Transition and GSAP

Solution:

Perform the following steps to complete the activity:

Note

To access the code files for this activity, visit https://packt.live/399tZ3Y.

1. We will reuse the code created in Chapter 6, Routing for the Message app so we have all the routing setup accordingly.

   The template section of src/views/MessageEditor.vue will be as follows:

   <template>
     <div>
       <textarea
         ref="textArea"
         @change="onChange($event)"
       >
       </textarea>
       <button @click="onSendClick()">Submit</button>
     </div>
   </template>

2. Next, the script section of src/views/MessageEditor.vue should contain logic for both clicking on and leaving the route...

8. The State of Vue.js State Management

Activity 8.01: Adding Email and Phone Number to a Profile Card Generator

Solution:

Perform the following steps to compete the activity:

Note

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

1. We can start by adding a new email input field and label to src/components/AppProfileForm for the Email field:

   <template>
     <!-- rest of template -->
       <div class="flex flex-col mt-2">
         <label class="flex text-gray-800 mb-2" for="email">Email
         </label>
         <input
           id="email"
           type="email"
           name="email"
          ...

9. Working with Vuex – State, Getters, Actions, and Mutations

Activity 9.01: Creating a Simple Shopping Cart and Price Calculator

Solution:

Perform the following steps to complete the activity:

Note

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

1. Create a new Vue application with Vuex support via the CLI.
2. Add the products and empty cart to the store located in store/index.js. Note that the product names and prices are arbitrary:

     state: {
       products: [
         { name: "Widgets", price: 10 },
         { name: "Doodads", price: 8 },
         { name: "Roundtuits", price: 12 },
         { name: "Fluff", price: 4 },
         { name: "Goobers", price: 7 }
       ],
       cart...

10. Working with Vuex – Fetching Remote Data

Activity 10.01: Using Axios and Vuex with Authentication

Solution:

Perform the following steps to complete the activity.

Note

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

1. Use the CLI to scaffold a new application and be sure to enable both Vuex and Vue Router. When done, then use npm to install Axios. Now that you have got the app scaffolded, let's begin building it. First, open App.vue, the core component in the application, and modify it so that the entire template is the view:

   <template>
     <div id="app">
       <router-view/>
     </div>
   </template>

2. By default, the CLI will scaffold two views: Home and About. We are going to change About to be the view that displays cats, but for now, open Home.vue and add the login form. Use a button to run a method to perform the (fake) login:

   <...

11. Working with Vuex – Organizing Larger Stores

Activity 11.01: Simplifying a Vuex Store

Solution:

Perform the following steps to complete the activity.

Note

To access the initial code file for this activity, visit https://packt.live/3kaqBHH.

1. Begin by creating a new file, src/store/state.js, that will store the state values for everything but the cat object:

   export default {
       name:'Lindy',
       job:'tank',
       favoriteColor:'blue',
       favoriteAnimal:'cat'
   }

2. Make a new file, src/store/getters.js, and move the getter for desiredPet into it:

   export default {
       desiredPet(state) {
           return state.favoriteColor + ' ' + state.favoriteAnimal;
       }
   }

3. Next, make src/store/mutations.js and copy over the mutations not related to the cat name...

12. Unit Testing

Activity 12.01: Adding a Simple Search by Title Page with Tests

Solution:

Perform the following steps to complete the activity:

Note

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

1. Create the search form with an input and a button in a new file in src/components/SearchForm.vue:

   <template>
     <form class="flex flex-row m-auto mb-10">
       <input
         placholder="Search"
         class="bg-white focus:outline-none focus:shadow-outline         border
         border-gray-300 rounded py-2 px-4 flex
         appearance-none leading-normal"
         type="text"
       />
       <button
         type="submit"
      ...

13. End-to-End Testing

Activity 13.01: Adding the Ability to Set a User's Email and Tests

Solution:

Perform the following steps to complete the activity:

Note

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

1. In order to keep track of the email, we'll set it as a piece of reactive state in data() and add an email type input to the page, which will be two-way bound to email using v-model. We also add a label and the corresponding markup. Note that we'll have a data-test-id attribute on the email input set to "email-input":

   <template>
     <div id="app" class="p-10">
       <div class="flex flex-col">
         <!-- rest of template -->
         <div class="flex flex-col mx-auto mb-4">
           <label
       ...

14. Deploying Your Code to the Web

Activity 14.01: Adding CI/CD with GitLab to a Book Search App and Deploying to Amazon S3 and CloudFront

Solution

Perform the following steps to complete the activity:

Note

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

1. To start, we'll want to run a production build locally. We can use the regular command used to build all Vue CLI projects for production. We'll also want to check that the relevant assets (JavaScript, CSS, and HTML) are generated correctly.

   The production build command is npm run build, as seen in the following screenshot:

   Figure 14.65: The npm run build output for the initial book-search Vue CLI project

   The npm run build command builds a dist directory with contents as in the following screenshot. It contains CSS, JavaScript, and HTML assets, as well as sourcemaps (.js.map files) and favicon:

   Figure 14.66: Sample contents of the dist folder (generated using the tree...