List of Listings

Chapter 1. Introducing Vue.js

Listing 1.1. The JavaScript calculator: chapter-01/calculator.html

Listing 1.2. The Vue calculator: chapter-01/calculatorvue.html

Chapter 2. The Vue instance

Listing 2.1. Our first Vue application: chapter-02/first-vue.html

Listing 2.2. Adding data and a data binding: chapter-02/data-binding.html

Listing 2.3. Adding lifecycle hooks to our instance: chapter-02/life-cycle-hooks.js

Listing 2.4. Adding product data to our Vue instance: chapter-02/product-data.js

Listing 2.5. Adding product markup: chapter-02/product-markup.html

Listing 2.6. Adding product markup: chapter-02/product-markup-cont.html

Listing 2.7. Adding the formatPrice filter: chapter-02/format-price.js

Listing 2.8. Adding product markup: chapter-02/v-text-binding.html

Chapter 3. Adding interactivity

Listing 3.1. All we need is an array: chapter-03/add-array.js

Listing 3.2. The addToCart method: chapter-03/add-to-cart.js

Listing 3.3. A button to add products to the cart: chapter-03/button-product.js

Listing 3.4. Computing a user’s full name: chapter-03/computed.js

Listing 3.5. Computing the area of a rectangle: chapter-03/computed-rect.js

Listing 3.6. Computed properties and update event logging: chapter-03/area.html

Listing 3.7. The cartItemCount’s computed property: chapter-03/cart-item-count.js

Listing 3.8. Adding the cart indicator: chapter-03/cart-indicator.html

Listing 3.9. Adding availableInventory to our product: chapter-03/available-inventory.js

Listing 3.10. A computed property for remaining inventory: chapter-03/computed-remaining.js

Listing 3.11. Button with v-show directive: chapter-03/button-v-show.html

Listing 3.12. Wrapping content for v-show: chapter-03/wrap-content.html

Listing 3.13. Buttons with v-if and v-else directives: chapter-03/v-if-and-v-else.html

Listing 3.14. Single container elements for v-if and v-else chapter-03/single-container.html

Listing 3.15. Adding the cart button: chapter-03/cart-button.js

Listing 3.16. Adding the cart button: chapter-03/add-cart-button.html

Listing 3.17. Using v-if to display a checkout page: chapter-03/v-if-checkout.html

Chapter 4. Forms and inputs

Listing 4.1. A v-model directive with first and last name inputs: chapter-04/first-last.html

Listing 4.2. The Vue instance data object order property: chapter-04/data-property.js

Listing 4.3. Adding in our other text inputs and select box: chapter-04/text-input.html

Listing 4.4. Updating the Vue instance data object with new properties: chapter-04/data-new-properties.js

Listing 4.5. Adding check boxes and radio buttons: chapter-04/adding-buttons.html

Listing 4.6. Adding more properties to our Vue data object: chapter-04/more-props.js

Listing 4.7. Adding the v-on directive to the click event: chapter-04/adding-v-on.html

Listing 4.8. Creating the new submitForm method: chapter-04/submit.js

Listing 4.9. Binding true and false values to the gift check box: chapter-04/true-false.html

Listing 4.10. Adding the sendGift property to the order object: chapter-04/prop-gift.js

Listing 4.11. Binding values to our radio buttons: chapter-04/radio-bind.html

Listing 4.12. Updating the order object with business and home: chapter-04/update-order.html

Listing 4.13. Binding values to our select box: chapter-04/bind-select.html

Listing 4.14. Adding the states property to the Vue instance data object: chapter-04/states.html

Listing 4.15. Updating the select drop down with v-for: chapter-04/select-drop-down.html

Listing 4.16. HTML generated by the v-for directive: chapter-04/options.html

Listing 4.17. Updating the states object in data: chapter 04-/detour.html

Listing 4.18. The .number modifier on the ZIP form element: chapter-04/number-mod.html

Listing 4.19. Using the typeof operator on order.zip: chapter-04/type-of.html

Listing 4.20. The .trim modifier on first and last name: chapter-04/trim-mod.html

Listing 4.21. The .trim modifier on the address and city: chapter-04/trim-mod-add.html

Chapter 5. Conditionals, looping, and lists

Listing 5.1. Updating the inventory: chapter-05/update-inventory.js

Listing 5.2. Adding a new message based on inventory: chapter-05/add-message.html

Listing 5.3. Adding multiple inventory messages: chapter 05/multiple-inventory.html

Listing 5.4. Adding star symbol using v-for: chapter 05/star-symbol.html

Listing 5.5. Adding to the product property: chapter 05/add-product.js

Listing 5.6. Adding a method to check if class should be added: chapter 05/check.js

Listing 5.7. Adding class binding: chapter 05/add-class-bind.html

Listing 5.8. Products in the products.json file: chapter 05/products.json

Listing 5.9. Adding Axios script tag: chapter 05/script-tags.html

Listing 5.10. Adding Axios tag to create a lifecycle hook: chapter 05/axios-lifecycle.js

Listing 5.11. product property, add products: chapter 05/product-delete.js

Listing 5.12. Fixing CSS for Bootstrap: chapter 05/bootstrap-fix.html

Listing 5.13. Fixing CSS for bootstrap: chapter 05/bootstrap-fix-v-if.html

Listing 5.14. Adding the v-for directive for products: chapter 05/v-for-product.html

Listing 5.15. Updating checkRating with product info: chapter 05/check-rating.js

Listing 5.16. Updating template for ratings: chapter 05/update-template.html

Listing 5.17. Updating canAddToCart and adding cartCount method: chapter 05/update-carts.js

Listing 5.18. Updating canAddToCart template: chapter 05/update-can-add-cart.html

Listing 5.19. Updating addToCart method: chapter 05/update-add-to-cart.js

Listing 5.20. Updating the inventory message: chapter 05/update-inventory.html

Listing 5.21. Adding sorting to the template: chapter 05/add-in-sort.html

Listing 5.22. sortedProducts computed property: chapter 05/sort-products-comp.js

Chapter 6. Working with components

Listing 6.1. Creating our first global component chapter-06/global-component-example.html

Listing 6.2. Registering a local component: chapter-06/local-component-example.html

Listing 6.3. Using literal props in our component: chapter 06/literal-props.html

Listing 6.4. Using dynamic props: chapter 06/dynamic-props.html

Listing 6.5. Dynamic props with global counter: chapter 06/dynamic-props-counter.html

Listing 6.6. Updating counters with correct return object: chapter 06/dynamic-props-counter-correct.html

Listing 6.7. Validating props: chapter 06/props-example.html

Listing 6.8. Using templates inline: chapter 06/inline-component-example.html

Listing 6.9. Working with text/x-templates: chapter 06/x-template-example.html

Listing 6.10. Single-file components: chapter 06/single-file-component.vue

Listing 6.11. Incrementing a parent counter using $emit: chapter 06/event-listen.html

Listing 6.12. Working with .sync to modify props from child chapter 06/event-listen-sync.html

Chapter 7. Advanced components and routing

Listing 7.1. Creating a normal parent/child component with props: chapter-07/parent-child.html

Listing 7.2. Adding in the slot element: chapter-07/parent-child-slots-extract.html

Listing 7.3. Using named slots: chapter-07/named-slots.html

Listing 7.4. Scoped slots: chapter-07/name-scoped-slots.html

Listing 7.5. Dynamic components: chapter-07/dynamic-components.html

Listing 7.6. Async components; chapter-07/async-components.html

Listing 7.7. Terminal commands

Listing 7.8. Adding routes: chapter-07/petstore/src/router/index.js

Listing 7.9. Adding Axios and Bootstrap: chapter-07/petstore/index.html

Listing 7.10. Adding CSS: chapter-07/petstore/src/main.js

Listing 7.11. Header template: chapter-07/petstore/src/components/Header.vue

Listing 7.12. Adding the script and CSS: chapter-07/petstore/src/components/Header.vue

Listing 7.13. Creating the form component: chapter-07/petstore/src/components/Form.vue

Listing 7.14. Adding the script tag: chapter-07/petstore/src/components/Form.vue

Listing 7.15. Creating the main template: chapter-07/petstore/src/components/Main.vue

Listing 7.16. Creating the script for Main.vue: chapter-07/petstore/src/components/Main.vue

Listing 7.17. Editing the router file: chapter-07/route-product.js

Listing 7.18. Adding the product template: chapter-07/product-template.vue

Listing 7.19. Product script: chapter-07/product-script.js

Listing 7.20. Updating router-link in main: chapter-07/route-link-example.html

Listing 7.21. Updating header links when route is active: chapter-07/header-link.html

Listing 7.22. Router-link-exact-active: chapter-07/route-link.css

Listing 7.23. Adding the EditProduct component: chapter-07/edit-comp.vue

Listing 7.24. Adding the Edit Product button: chapter-07/edit-button.vue

Listing 7.25. Updating the router with the new child route: chapter-07/child-route.js

Listing 7.26. Adding wildcard for route: chapter-07/wildcard-route.js

Listing 7.27. Full router file: chapter-07/petstore/src/router/index.js

Chapter 8. Transitions and animations

Listing 8.1. Creating a description transition: chapter-08/transition-book-1.html

Listing 8.2. Description transition with fade: chapter-08/transition-book.html

Listing 8.3. Animation with scale: chapter-08/animation-book-1.html

Listing 8.4. Animation with scale full: chapter-08/animation-book.html

Listing 8.5. JavaScript hooks transition: chapter-08/jshooks-1.html

Listing 8.6. JavaScript hooks event listener: chapter-08/jshook-2.html

Listing 8.7. JavaScript hooks methods: chapter-08/jshooks.html

Listing 8.8. Transitioning dynamic components: chapter-08/component-transition.html

Listing 8.9. Adding transition to pet store: chapter-08/petstore/src/App.vue

Listing 8.10. Add animation to pet store: chapter-08/petstore/src/components/Main.vue

Listing 8.11. Add animation to pet store transition element: chapter-08/petstore/src/components/Main.vue

Chapter 9. Extending Vue

Listing 9.1. Adding our mixin HTML/CSS: chapter-09/mixin-html.html

Listing 9.2. Adding the Vue.js instance: chapter-09/mixins-vue.html

Listing 9.3. Adding the mixin: chapter-09/my-mixin.html

Listing 9.4. Adding in the components: chapter-09/comp1comp2.html

Listing 9.5. Global mixin: chapter-09/global-mixin.html

Listing 9.6. Vue.js local custom directive: chapter-09/directive-html.html

Listing 9.7. Local directive Vue instance: chapter-09/directive-vue.html

Listing 9.8. Completed Vue global directive: chapter-09/directive-global-example.html

Listing 9.9. Render basics html: chapter-09/render-html.html

Listing 9.10. Adding the render function: chapter-09/render-js.html

Listing 9.11. Terminal commands to create jsx project

Listing 9.12. Terminal commands to install plugin

Listing 9.13. Update .babelrc: chapter-09/jsx-example/.babelrc

Listing 9.14. Update App.vue: chapter-09/jsx-example/src/App.vue

Listing 9.15. Update the index.html file: chapter-09/jsx-example/index.html

Listing 9.16. Update HelloWorld.vue: chapter-09/jsx-example/HelloWorld.vue

Chapter 10. Vuex

Listing 10.1. Adding HTML to our Vuex app: chapter-10/vuex-html.html

Listing 10.2. Add our Vuex state and mutations: chapter-10/vuex-state-mut.html

Listing 10.3. Adding our Vue.js instance: chapter-10/vuex-instance.html

Listing 10.4. Passing payload into a mutation: chapter-10/vuex-state-pass-1.html

Listing 10.5. Adding new getters: chapter-10/vuex-state-getter-action1.html

Listing 10.6. Adding actions: chapter-10/vuex-state-getter-action2.html

Listing 10.7. Updating the Vue.js instance: chapter-10/vuex-state-getter-action3.html

Listing 10.8. Updating the main.js file: chapter-10/petstore/src/main.js

Listing 10.9. Creating the main.js file: chapter-10/store-part1.html

Listing 10.10. Adding actions and getters to store.js: chapter-10/store-part2.html

Listing 10.11. Adding product’s computed property: chapter-10/computed-petstore.html

Listing 10.12. Updating created hook: chapter-10/created-petstore.html

Listing 10.13. Adding mapGetters: chapter-10/map-getter.html

Listing 10.14. Adding mapGetters to computed properties: chapter-10/map-getter2.html

Listing 10.15. mapState example: chapter-10/map-state.html

Listing 10.16. mapMutations example: chapter-10/map-mut.html

Listing 10.17. mapActions example: chapter-10/map-actions.html

Listing 10.18. Adding products modules: chapter-10/products-mod.js

Listing 10.19. Adding the export: chapter-10/products-export.js

Listing 10.20. New store.js file: chapter-10/store-update.js

Chapter 11. Communicating with a server

Listing 11.1. Removing ESLint from nuxt.config.js: chapter-11/itunes-search/nuxt.config.js

Listing 11.2. Adding the Vuetify plugin: chapter-11/itunes-search/plugins/vuetify.js

Listing 11.3. Adding plugins reference: chapter-11/itunes-search/nuxt.config.js

Listing 11.4. Adding CSS and fonts: chapter-11/itunes-search/nuxt.config.js

Listing 11.5. Adding CSS stylus: chapter-11/itunes-search/assets/app.styl

Listing 11.6. Adding the Toolbar component: chapter-11/itunes-search/components/Toolbar.vue

Listing 11.7. Adding the Card component: chapter-11/itunes-search/components/Card.vue

Listing 11.8. Updating the default layout: chapter-11/itunes-search/layouts/default.vue

Listing 11.9. Adding a Vuex store: chapter-11/itunes-search/store/index.js

Listing 11.10. Setting up middleware: chapter-11/itunes-search/middleware/search.js

Listing 11.11. Automatically generated route structure

Listing 11.12. Creating the index page: chapter-11/itunes-search/pages/index.vue

Listing 11.13. Creating our dynamic route: chapter-11/itunes-search/pages/results/_id.vue

Listing 11.14. The asyncData example: chapter-11/itunes-search/pages/results/_id.vue

Listing 11.15. Setting up Firebase and initializing files: chapter-11/petstore/src/firebase.js

Listing 11.16. Setting up main file: chapter-11/petstore/src/main.js

Listing 11.17. Updating Vuex: chapter-11/petstore/store/modules/products.js

Listing 11.18. Updating header component: chapter-11/header-temp.html

Listing 11.19. Updating header component 2: chapter-11/header-script.js

Listing 11.20. Updating header styles: chapter-11/header-style.html

Listing 11.21. Updating Main.vue file: chapter-11/update-main.js

Chapter 12. Testing

Listing 12.1. A basic unit test: chapter-12/unit.js

Listing 12.2. Setting up source map and node externals: chapter-12/setup.js

Listing 12.3. Setting up tests: chapter-12/petstore/setup.js

Listing 12.4. Updating package.json: chapter-12/testscript.js

Listing 12.5. Update to the Form component: chapter-12/form-update.js

Listing 12.6. Our first test case: chapter-12/petstore/test/Form.spec.js

Listing 12.7. Testing a prop: chapter-12/header-prop-test.js

Listing 12.8. Testing text: chapter-12/header-text-test.js

Listing 12.9. Testing classes: chapter-12/header-classes-test.js

Listing 12.10. Mocking Vuex: chapter-12/header-vuex-mock.js

Listing 12.11. Testing Sign In: chapter-12/header-signin-test.js

Listing 12.12. Testing Sign Out: chapter-12/header-signout-test.js

Listing 12.13. Adding inspect to the package.json file: chapter-12/petstore/package.json