You're reading from Learning Vue.js 2 Learn how to build amazing reactive web applications easily with Vue.js

Product type Paperback

Published in Dec 2016

Publisher Packt

ISBN-13 9781786469946

Length 334 pages

Edition 1st Edition

Languages

JavaScript

Tools

Vue

Concepts

Front End Web Development

Author (1):

Olga Filipova

View More author details

Table of Contents (11) Chapters

Preface

1. Going Shopping with Vue.js FREE CHAPTER

2. Fundamentals – Installing and Using

3. Components – Understanding and Using

4. Reactivity – Binding Data to Your Application

5. Vuex – Managing State in Your Application

6. Plugins – Building Your House with Your Own Bricks

7. Testing – Time to Test What We Have Done So Far!

8. Deploying – Time to Go Live!

9. What Is Next?

A. Solutions to Exercises

Projects using Vue.js

Probably, at this time, you are wondering what projects are out there that are built on top of Vue.js, or use it as a part of their codebase. There are a lot of nice open source, experimental, and enterprise projects using it. The complete and constantly updated list of these projects can be found at https://github.com/vuejs/awesome-vue#projects-using-vuejs .

Let's have a look at some of them.

Grammarly

Grammarly ( https://www.grammarly.com/ ) is a service that helps you write English correctly. It has several apps, one of them is a simple Chrome extension that just checks any text input that you fill in. Another one is an online editor that you can use to check big chunks of text. This editor is built using Vue.js! The following is a screenshot of this text being edited in the online editor of Grammarly:

Grammarly: a project that is built on top of Vue.js

Optimizely

Optimizely ( https://www.optimizely.com/ ) is a service that helps you test, optimize, and personalize your websites. I've used the Packt site to create an Optimizely experiment and to check out Vue.js in action in this resource. It looks like the following:

Optimizely: a project that is built on top of Vue.js

Hovering around with the mouse gives us the possibility of opening a context menu that allows different manipulations with the page data, including the simplest one, text editing. Let's try this one:

Using Optimizely and watching Vue.js in action

The text box is opened. When I type in it, the text in the title is reactively changed. We saw and implemented it using Vue.js:

Using Optimizely and watching Vue.js in action

FilterBlend

FilterBlend ( https://github.com/ilyashubin/FilterBlend ) is an open source playground for the CSS background-blend-mode and filter properties.

You can load your images and combine blending with filters.

If you want to give FilterBlend a try, you can install it locally:

Clone the repository:

git clone https://github.com/ilyashubin/FilterBlend.git

Enter the FilterBlend directory:
```
cd FilterBlend
```
Install the dependencies:
```
npm install
```
Run the project:
```
gulp
```

Open your browser on localhost:8000 and play around. You can see that once you change something in the menu on the right, it is immediately propagated to the images on the left side. All this functionality is achieved using Vue.js. Check the code on GitHub.

FilterBlend: a project built on top of Vue.js

PushSilver

PushSilver ( https://pushsilver.com ) is a nice and simple service for busy people to create simple invoices. It allows creating invoices, sending and resending them to the clients, and keeping tracking of them. It was created by a developer doing freelance consultancy and being tired of having to create invoices each time for each small project. This tool works well and it was built using Vue.js:

PushSilver: invoice managing application built on top of Vue.js