packtpublishing/vue-js-2-web-development-projects

Vue js 2 Web Development Projects, published by Packt

Vue.js 2 Web Development Projects

This is the code repository for Vue.js 2 Web Development Projects, published by Packt. It contains all the supporting project files necessary to work through the book from start to finish.

About the Book

Do you want to make your web application amazingly responsive? Are you unhappy with your app's performance and looking forward to trying out ways to make your app more powerful? Then Vue.js, a framework for building user interfaces, is a great choice, and this book is the ideal way to put it through its paces.

This book's project-based approach will get you to build six stunning applications from scratch and gain valuable insights in Vue.js 2.5. You'll start by learning the basics of Vue.js and create your first web app using directives along with rich and attractive user experiences. You will learn about animations and interactivity by creating a browser-based game. Using the available tools and preprocessor, you will learn how to create multi-page apps with plugins. You will create highly efficient and performant functional components for your app. Next, you will create your own online store and optimize it. Finally, you will integrate Vue.js with the real-time Meteor library and create a dashboard showing real-time data.

By the end of this book you will have enough skills and will have worked through enough examples of real Vue.js projects to create interactive professional web applications with Vue.js 2.5.

Instructions and Navigation

All of the code is organized into folders. Each folder starts with a number followed by the application name. For example, Chapter02.

The code will look like the following:

<top-bar :turn="turn" :current-player-index="currentPlayerIndex"         
      :players="players" />

To follow this book, you will only need a text or code editor (Visual Studio Code and Atom are recommended) and a web browser (preferably the latest version of Firefox or Chrome for the development tools).

Related Products

• Vue.js 2 and Bootstrap 4 Web Development

• Web development with Vue.js 2 [Video]

• The Ultimate Vue JS 2 Developers Course [Video]

Download a free PDF

If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF.

https://packt.link/free-ebook/9781787127463

vue-js-2-web-development-projects's Issues

Chapter 3 page 74 - getting error `handlePlay is not a function`

I've been stuck near the beginning of chapter 3 page 75- 76 for some time now.

I've been following the steps, but cant seem to get the handlePlay method to work when assigning a vue click event to the card component.

I'm seeing the following error in Chrome

proxyConsole.js:72 [Vue warn]: Property or method "play" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Card>
       <Root>
function.console.(anonymous function) @ proxyConsole.js:72

and

[Vue warn]: Invalid handler for event "click": got undefined

found in

---> <Card>
       <Root>

I've ported the current state of my app to code sandbox - https://codesandbox.io/s/9ov72w3pxo?module=%2Fmain.js

hopefully someone can help!

Project 4. Google+ API doesn't work anymore

When I try to login using google, I am getting the following response

GooglePlusAPIError: Legacy People API has not been used in project *** before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/legacypeople.googleapis.com/overview?project=*** then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

It seems that Google+ API has been shot down

Chapter02 style.css not imperfect

Chapter02 style.css not imperfect, especially textarea height.

Chapter 5 page 169

await fetch(${baseUrl}${url}) should be await fetch(${baseUrl}/${url})

chapter_05 error

The fifth chapter server login request has been unsuccessful, prompting Failed to fetch, please help me answer.

server/src/router.js

app.post('/login', (req, res, next) => {
    if (req.user) {
      res.status(403).send('Unauthorized')
    } else {
      next()
    }
  }, passport.authenticate('local', {
    failWithError: true,
  }), (req, res) => {
    sendUserInfo(req, res)
  }, (err, req, res, next) => {
    res.status(403).send(err)
  })

Computed Properties in Book Chapter 2

notePreview() and selectedNote() should check first if this.selectedId is null/undefined before returning any value.

CSS uses pointer-events: none for .hand??

With that CSS setting you don't seem to be able to click on a card inside the .hand div. This seems like an error?

In Chapter 2, marked lib doesn't work

Hi, I'm a newbie in front-end dev, and I met following issue when followed example codes:
In chapter 2, it implemented markdown by a marked lib. But when I tried it in my example, I found PrerenceError: require is not defined marked:1:15 error in my web dev tool. I tried to fix it by import require.js in my html page, but it still can't load required module Lexer.js in marked lib.
How to fix codes or is there any other available markdown lib?

.css may have a wrong but I can't fix it ?

> * {
    flex: auto 0 0;
  }
}

This have a wrong ,how can I fix it ?

Chapter 3. transition-group's v-move example doesn't work

Issue appears in the part about animation when delete a card. But only adding the transition-group and CSS for card-move class doesn't work. And I found that it needs another CSS configuration to set list element's position as absolute in many examples for transition-group and v-move. I tried it and it worked. Dose it miss the position setting in the book?