Search icon CANCEL
Subscription
0
Cart icon
Cart
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Building Vue.js Applications with GraphQL
Building Vue.js Applications with GraphQL

Building Vue.js Applications with GraphQL: Develop a complete full-stack chat app from scratch using Vue.js, Quasar Framework, and AWS Amplify

By Heitor Ramon Ribeiro
zł125.99 zł59.99
Book Jan 2021 298 pages 1st Edition
eBook
zł125.99 zł59.99
Print
zł157.99
Subscription
Free Trial
eBook
zł125.99 zł59.99
Print
zł157.99
Subscription
Free Trial

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

Building Vue.js Applications with GraphQL

Data Binding, Events, and Computed Properties

Data is the most valuable asset in the world right now, and knowing how to manage it is a must. In Vue, we have the power to choose how we can gather this data, manipulate it as we want, and deliver it to the server.

In this chapter, we will learn more about the process of data manipulation and data handling, form validations, data filtering, how to display this data to the user, and how to present it in a way that is different from what we have inside our application.

We will learn how to use various vue-devtools so that we can go deep inside the Vue components and see what is happening to our data and application.

In this chapter, we'll cover the following recipes:

  • Creating your first project with the Vue CLI
  • Creating the hello world component
  • Creating an input form with two-way data binding
  • Adding an event listener to an element
  • Removing the v-model directive from the input
  • Creating a dynamic to-do list
  • Creating computed properties and understanding how they work
  • Displaying cleaner data and text with custom filters
  • Creating filters and sorters for a list
  • Creating conditional filters to sort list data
  • Adding custom styles and transitions
  • Using vue-devtools to debug your application

Let's get started!

Technical requirements

In this chapter, we will be using Node.js and Vue CLI.

Attention, Windows users you need to install an npm package called windows-build-tools to be able to install the following required packages. To do this, open PowerShell as administrator and execute the
> npm install -g windows-build-tools command.

To install the Vue CLI, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install -g @vue/cli @vue/cli-service-global

Creating your first project with the Vue CLI

When the Vue team realized that developers were having problems creating and managing their applications, they saw an opportunity to create a tool that could help developers around the world. With this, the Vue CLI project was born.

The Vue CLI tool is a CLI tool that is used in terminal command lines, such as Windows PowerShell, Linux Bash, or macOS Terminal. It was created as a starting point for the development of Vue, where developers can start a project and manage and build it smoothly. The focus of the Vue CLI team was to give developers the opportunity to have more time to think about the code and spend less time on the tooling needed to put their code into production, adding new plugins or a simple hot-module-reload.

The Vue CLI tool has been tweaked in such a way that there is no need to eject your tooling code outside the CLI before putting it into production.

When version 3 was released, the Vue UI project was added to the CLI as the main function, transforming the CLI commands into a more complete visual solution with lots of new additions and improvements.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

How to do it...

To create a Vue CLI project, follow these steps:

  1. We need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create my-first-project
  1. The CLI will ask some questions that will help you create the project. You can use the arrow keys to navigate, the Enter key to continue, and the Spacebar to select an option:
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
Manually select features
  1. There are two methods for starting a new project. The default method is a basic babel and eslint project without any plugin or configuration, but there's also Manually mode, where you can select more modes, plugins, linters, and options. We will go for Manually.‌
  2. At this point, we will be asked about the features that we will want for our project. These features are some Vue plugins such as Vuex or Router (Vue-Router), testers, linters, and more. For this project, we will choose CSS Pre-processors and press Enter to continue:
? Check the features needed for your project: (Press <space> to 
select, <a> to toggle all, <i> to invert selection)

Choose Vue version
Babel
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors
Linter / Formatter
Unit Testing
E2E Testing
  1. The CLI will ask you to choose a Vue version to use to start your application. We will choose 3.x (Preview) here. Press Enter to continue:
? Choose a version of Vue.js that you want to start the project with 
(Use arrow keys)

2.x
3.x (Preview)
  1. It's possible to choose the main Cascading Style Sheets (CSS) preprocessors to be used with Vue; that is, Sass, Less, and Stylus. It's up to you to choose which fits your design the most and is best for you:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules
are supported by default):
(Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
  1. It's time to format your code. You can choose between AirBnB, Standard, and Prettier with a basic config. Those rules that are imported inside ESLint can always be customized without any problem, and there is a perfect one for your needs. You find out what is best for you, do the following:
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
  1. Once the linting rules have been set, we need to define when they are applied to our code. They can either be applied on save or fixed on commit:
? Pick additional lint features: 
Lint on save
Lint and fix on commit
  1. Once all those plugins, linters, and processors have been defined, we need to choose where the settings and configs will be stored. The best place to store them is in a dedicated file, but it is also possible to store them in the package.json file:
? Where do you prefer placing config for Babel, ESLint, etc.? (Use  
arrow keys)
In dedicated config files
In package.json
  1. Now, you can choose if you want to make this selection a preset for future projects so that you don't need to reselect everything again:
? Save this as a preset for future projects? (y/N) n
  1. The CLI will automatically create the folder with the name you set in step 1, install everything, and configure the project.

With that, you can now navigate and run the project. The basic commands of Vue CLI projects are as follows:

  • npm run serve: For running a development server locally
  • npm run build: For building and minifying the application for deployment
  • npm run lint: To execute the lint on the code

You can execute these commands via the Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows).

There's more...

The CLI has a tool inside it called Vue UI that helps you manage your Vue projects. This tool will take care of the project's dependencies, plugins, and configurations.

Each npm script in the Vue UI tool is known as a Task, and on those tasks, you can gather real-time statistics such as the size of the assets, modules, and dependencies; the numbers of errors or warnings; and more deep networking data for fine-tuning your application.

To enter the Vue UI interface, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> vue ui

See also

Creating the hello world component

A Vue application is a combination of various components, bound together and orchestrated by the Vue framework. Knowing how to make your component is important. Each component is like a brick in the wall and needs to be made in a way that, when placed, doesn't end up needing other bricks to be reshaped in different ways around it. In this recipe, we are going to learn how to make a base component while following some important principles that focus on organization and clean code.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

To start our component, we can create our Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe, or start a new one.

How to do it...

To start a new component, open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> vue create my-component

The Command-Line Interface (CLI) will ask some questions that will help you create the project. You can use the arrow keys to navigate, the Enter key to continue, and the Spacebar to select an option. Choose the default option:

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

Let's create our first hello world component by following these steps:

  1. Let's create a new file called CurrentTime.vue file in the src/components folder.
  2. In this file, we will start with the <template> part of our component. It will be a shadowed-box card that will display the current date, formatted:
<template>
<div class='cardBox'>
<div class='container'>
<h2>Today is:</h2>
<h3>{{ getCurrentDate }}</h3>
</div>
</div>
</template>
  1. Now, we need to create the <script> part. We will start with the name property. This will be used when debugging our application with vue-devtools to identify our component and helps the Integrated Development Environment (IDE) too. For the getCurrentDate computed property, we will create a computed property that will return the current date, formatted by the Intl browser function:
<script>
export default {
name: 'CurrentTime',
computed: {
getCurrentDate() {
const browserLocale =
navigator.languages && navigator.languages.length
? navigator.languages[0]
: navigator.language;
const intlDateTime = new Intl.DateTimeFormat(
browserLocale,
{
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
});

return intlDateTime.format(new Date());
}
}
};
</script>
  1. For styling our box, we need to create a style.css file in the src folder, then add the cardBox style to it:
.cardBox {
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s linear;
max-width: 33%;
border-radius: 3px;
margin: 20px;
}

.cardBox:hover {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
}

.cardBox>.container {
padding: 4px 18px;
}

[class*='col-'] {
display: inline-block;
}

@media only screen and (max-width: 600px) {
[class*='col-'] {
width: 100%;
}

.cardBox {
margin: 20px 0;
}
}

@media only screen and (min-width: 600px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

@media only screen and (min-width: 992px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

@media only screen and (min-width: 1200px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
  1. In the App.vue file, we need to import our component so that we can see it:
<template>
<div id='app'>
<current-time />
</div>
</template>

<script>
import CurrentTime from './components/CurrentTime.vue';

export default {
name: 'app',
components: {
CurrentTime
}
}
</script>
  1. In the main.js file, we need to import the style.css file so that it's included in the Vue application:
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

createApp(App).mount('#app');
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

The Vue component works almost like the Node.js packages. To use it in your code, you need to import the component and then declare it inside the components property on the component you want to use.

Like a wall of bricks, a Vue application is made of components that call and use other components.

For our component, we used the Intl.DateTimeFormat function, a native function that can be used to format and parse dates to declared locations. To get the local format, we used the navigator global variable.

See also

Creating an input form with two-way data binding

To gather data on the web, we use HTML form inputs. In Vue, it's possible to use a two-way data binding method, where the value of the input on the Document Object Model (DOM) is passed to the JavaScript or vice versa.

This makes the web form more dynamic, giving you the possibility to manage, format, and validate the data before saving or sending the data back to the server.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

To start our component, we can create our Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe, or use the project from the Creating the hello world component recipe.

How to do it...

Follow these steps to create an input form with a two-way data binding:

  1. Let's create a new file called TaskInput.vue in the src/components folder.
  2. In this file, we're going to create a component that will have a text input and some display text. This text will be based on what is typed in as the text input. At the <template> part of the component, we need to create an HTML input and a mustache variable that will receive and render the data:
<template>
<div class='cardBox'>
<div class='container tasker'>
<strong>My task is: {{ task }}</strong>
<input
type='text'
v-model='task'
class='taskInput' />
</div>
</div>
</template>
  1. Now, on the <script> part of the component, we will name it and add the task to the data property. Since the data always needs to be a returned Object, we will use an arrow function to return an Object directly:
<script>
export default {
name: 'TaskInput',
data: () => ({
task: '',
}),
};
</script>
  1. We need to add some style to this component. In the <style> part of the component, we need to add the scoped attribute so that the style only remains bound to the component and won't mix with other Cascading Style Sheets (CSS) rules:
<style scoped>
.tasker{
margin: 20px;
}
.tasker .taskInput {
font-size: 14px;
margin: 0 10px;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.75);
}
.tasker button {
border: 1px solid rgba(0, 0, 0, 0.75);
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
</style>
  1. Now, we need to import this component into our App.vue file:
<template>
<div id='app'>
<current-time class='col-4' />
<task-input class='col-6' />
</div>
</template>

<script>
import CurrentTime from './components/CurrentTime.vue';
import TaskInput from './components/TaskInput.vue';

export default {
name: 'TodoApp',
components: {
CurrentTime,
TaskInput,
},
};
</script>
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

When you create an HTML input element and add a v-model to it, you are passing a directive, built into Vue, that checks the input type and gives us sugar syntax for the input. This handles updating the value of the variable and the DOM.

This model is what is called two-way data binding. If the variable is changed by the code, the DOM will rerender, and if it's changed by the DOM via user input, such as input-form, the JavaScript code can then execute a function.

See also

You can find out more information about the form input bindings at https://v3.vuejs.org/guide/forms.html.

Adding an event listener to an element

The most common method of parent-child communication in Vue is through props and events. In JavaScript, it's common to add event listeners to elements of the DOM tree to execute functions on specific events. In Vue, it's possible to add listeners and name them as you wish, rather than sticking to the names that exist on the JavaScript engine.

In this recipe, we are going to learn how to create custom events and how to emit then.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

To start our component, we can create our Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe, or use the project from the Creating an input form with two-way data binding recipe.

How to do it...

Follow these steps to add an event listener to an element in Vue:

  1. Create a new component or open the TaskInput.vue file.
  2. At the <template> part, we are going to add a button element and add an event listener to the button click event with the v-on directive. We will remove the {{ task }} variable from the component because from now on, it will be emitted and won't be displayed on the component anymore:
<template>
<div class='cardBox'>
<div class='container tasker'>
<strong>My task is:</strong>
<input
type='text'
v-model='task'
class='taskInput' />
<button
v-on:click='addTask'>
Add Task
</button>
</div>
</div>
</template>
  1. On the <script> part of the component, we need to add a method that will handle the click event. This method will be named addTask. It will emit an event called add-task and send the task to the data. After that, the task on the component will be reset:
<script>
export default {
name: 'TaskInput',
data: () => ({
task: '',
}),
methods: {
addTask(){
this.$emit('add-task', this.task);
this.task = '';
},
}
};
</script>
  1. In the App.vue file, we need to add an event listener bind to the component. This listener will be attached to the add-task event. We will use the shortened version of the v-on directive, @. When it's fired, the event will call the addNewTask method, which will send an alert stating that a new task was added:
<template>
<div id='app'>
<current-time class='col-4' />
<task-input
class='col-6'
@add-task='addNewTask'
/>
</div>
</template>
  1. Now, let's create the addNewTask method. This will receive the task as a parameter and show an alert to the user, stating that the task was added:
<script>
import CurrentTime from './components/CurrentTime.vue';
import TaskInput from './components/TaskInput.vue';

export default {
name: 'TodoApp',
components: {
CurrentTime,
TaskInput,
},
methods: {
addNewTask(task) {
alert(`New task added: ${task}`);
},
},
};
</script>
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

The HTML events are read by Vue with the v-on event handling directive. When we attached the v-on:click directive to the button, we added a listener to the button so that a function will be executed when the user clicks on it.

The function is declared on the component methods. This function, when called, will emit an event, denoting that any component using this component as a child can listen to it with the v-on directive.

See also

You can find out more information about event handling at https://v3.vuejs.org/guide/events.html.

Removing the v-model directive from the input

What if I told you that behind the magic of v-model, there is a lot of code that makes our magic sugar syntax happen? What if I told you that the rabbit hole can go deep enough that you can control everything that can happen with the events and values of the inputs?

In this recipe, we will learn how to extract the sugar syntax of the v-model directive and transform it into the base syntax behind it.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

To start our component, we can create our Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe, or use the project from the Adding an event listener to an element recipe.

How to do it...

By performing the following steps, we will remove the v-model directive sugar syntax from the input:

  1. Open the TaskInput.vue file.
  2. At the <template> block of the component, find the v-model directive. We need to remove the v-model directive. Then, we need to add a new bind to the input called v-bind:value or the shortened version, :value, and an event listener to the HTML input element. We need to add an event listener to the input event with the v-on:input directive or the shortened version, @input. The input bind will receive the task value as a parameter and the event listener will receive a value attribution, where it will make the task variable equal to the value of the event value:
<template>
<div class='cardBox'>
<div class='container tasker'>
<strong>My task is:</strong>
<input
type='text'
:value='task'
@input='task = $event.target.value'
class='taskInput'
/>
<button v-on:click='addTask'>
Add Task
</button>
</div>
</div>
</template>
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

How it works...

As a syntactic sugar syntax, the v-model directive does the magic of automatically declaring the bind and the event listener to the element for you. However, the side effect is that you don't have full control over what can be achieved.

As we've seen, the bound value can be a variable, a method, a computed property, or a Vuex getter, for example. In terms of the event listener, it can be a function or a direct declaration of a variable assignment. When an event is emitted and passed to Vue, the $event variable is used to pass the event. In this case, as in normal JavaScript, to catch the value of an input, we need to use the event.target.value value.

See also

You can find out more information about event handling at https://v3.vuejs.org/guide/events.html.

Creating a dynamic to-do list

One of the first projects every programmer creates when learning a new language is a to-do list. Doing this allows us to learn more about the language process that's followed when it comes to manipulating states and data.

We are going to make our to-do list using Vue. We'll use what we have learned and created in the previous recipes.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

To start our component, we can create our Vue project with the Vue CLI, as we learned in the Creating your first project with Vue CLI recipe, or use the project from the Removing the v-model directive from the input recipe.

How to do it...

There are some basic principles involved in making a to-do application it must contain a list of tasks, the tasks can be marked as done and undone, and the list can be filtered and sorted. Now, we are going to learn how to take the tasks and add them to the task list.

Follow these steps to create a dynamic to-do list with Vue and the information you've gained from the previous recipes:

  1. In the App.vue file, we will create our array of tasks. This task will be filled every time the TaskInput.vue component emits a message. We will add an object to this array with the task, as well as the current date when the task was created. The date when the task was finished will be left undefined for now. To do this, in the <script> part of the component, we need to create a method that receives a task and add this task, along with the current date, to the taskList array:
<script>
import CurrentTime from './components/CurrentTime.vue';
import TaskInput from './components/TaskInput.vue';

export default {
name: 'TodoApp',
components: {
CurrentTime,
TaskInput,
},
data: () => ({
taskList: [],
}),
methods:{
addNewTask(task){
this.taskList.push({
task,
createdAt: Date.now(),
finishedAt: undefined,
})
},
},
}
</script>
  1. Now, we need to render this list on the <template> part. We will iterate the list of tasks using the v-for directive of Vue. This directive, when we use it with an array, gives us access to two properties – the item itself and the index of the item. We will use the item to render it and the index to make the key of the element for the rendering process. We need to add a checkbox that, when marked, calls a function that changes the status of the task and displays when the task was done:
<template>
<div id='app'>
<current-time class='col-4' />
<task-input class='col-6' @add-task='addNewTask' />
<div class='col-12'>
<div class='cardBox'>
<div class='container'>
<h2>My Tasks</h2>
<ul class='taskList'>
<li
v-for='(taskItem, index) in taskList'
:key='`${index}_${Math.random()}`'
>
<input type='checkbox'
:checked='!!taskItem.finishedAt'
@input='changeStatus(index)'
/>
{{ taskItem.task }}
<span v-if='taskItem.finishedAt'>
{{ taskItem.finishedAt }}
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
It's always important to remember that the key in the iterator needs to be unique. This is because the render function needs to knows which elements were changed. In this example, we added the Math.random() function to the index to generate a unique key, because the index of the first elements of the array is always the same number when the number of elements is reduced.
  1. We need to create the changeStatus function on the methods property of the App.vue file. This function will receive the index of the task as a parameter, then go to the array of tasks and change the finishedAt property, which is our marker for when a task is complete:
changeStatus(taskIndex){
const task = this.taskList[taskIndex];
if(task.finishedAt){
task.finishedAt = undefined;
} else {
task.finishedAt = Date.now();
}
}
  1. Now, we need to add the task text to the left-hand side of the screen. On the <style> part of the component, we will make it scoped and add the custom class:
<style scoped>
.taskList li{
text-align: left;
}
</style>
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

When we received the emitted message from the component, we hydrated the message with more data and pushed it to a local array variable.

In the template, we iterate this array, turning it into a list of tasks. This displays the tasks we need to complete, the checkbox to mark when the task is complete, and the time that a task was completed by.

When the user clicks on the checkbox, it executes a function, which marks the current task as done. If the task is already done, the function will set the finishedAt property to undefined.

See also

Creating computed properties and understanding how they work

Imagine that every time you have to fetch manipulated data, you need to execute a function. Imagine that you need to get specific data that needs to go through some process and you need to execute it through a function every time. This type of work would not be easy to maintain. Computed properties exist to solve these problems. Using computed properties makes it easier to obtain data that needs preprocessing or even caching without executing any other external memorizing function.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

You can continue with our to-do list project or create a new Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe.

How to do it...

Follow these steps to create a computed property and understand how it works:

  1. In the App.vue file, at the <script> part, we will add a new property between data and method, called computed. This is where the computed properties will be placed. We will create a new computed property called displayList, which will be used to render the final list on the template:
<script>
import CurrentTime from './components/CurrentTime.vue';
import TaskInput from './components/TaskInput.vue';

export default {
name: 'TodoApp',
components: {
CurrentTime,
TaskInput
},
data: () => ({
taskList: []
}),
computed: {
displayList(){
return this.taskList;
},
},
methods: {
addNewTask(task) {
this.taskList.push({
task,
createdAt: Date.now(),
finishedAt: undefined
});
},
changeStatus(taskIndex){
const task = this.taskList[taskIndex];
if(task.finishedAt){
task.finishedAt = undefined;
} else {
task.finishedAt = Date.now();
}
}
}
};
</script>

For now, the displayList property is just returning a cached value of the variable, and not the direct variable itself.

  1. Now, for the <template> part, we need to change where the list is being fetched:
<template>
<div id='app'>
<current-time class='col-4' />
<task-input class='col-6' @add-task='addNewTask' />
<div class='col-12'>
<div class='cardBox'>
<div class='container'>
<h2>My Tasks</h2>
<ul class='taskList'>
<li
v-for='(taskItem, index) in displayList'
:key='`${index}_${Math.random()}`'
>
<input type='checkbox'
:checked='!!taskItem.finishedAt'
@input='changeStatus(index)'
/>
{{ taskItem.task }}
<span v-if='taskItem.finishedAt'>
{{ taskItem.finishedAt }}
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

How it works...

When using the computed property to pass a value to the template, this value is now cached. This means we will only trigger the rendering process when the value is updated. At the same time, we made sure that the template doesn't use the variable for rendering so that it can't be changed on the template, as it is a cached copy of the variable.

Using this process, we get the best performance because we won't waste processing time rerendering the DOM tree for changes that have no effect on the data being displayed. This is because if something changes and the result is the same, the computed property caches the result and won't update the final result.

See also

You can find out more information about computed properties at https://v3.vuejs.org/guide/computed.html.

Displaying cleaner data and text with custom filters

Sometimes, you may find that the user, or even you, cannot read the Unix timestamp or other DateTime formats. How can we solve this problem? When rendering the data in Vue, it's possible to use what we call filters.

Imagine a series of pipes that data flows through. Data enters each pipe in one shape and exits in another. This is what filters in Vue look like. You can place a series of filters on the same variable so that it gets formatted, reshaped, and ultimately displayed with different data while the code remains the same. The code of the initial variable is immutable in those pipes.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

We can continue with our to-do list project or create a new Vue project with the Vue CLI, as we learned in the Creating your first project with Vue CLI recipe.

How to do it...

Follow these steps to create your first custom Vue filter:

  1. In the App.vue file, at the <script> part, in the methods, create a formatDate function inside this property. This function will receive value as a parameter and enter the filter pipe. We can check if the value is a number because we know that our time is based on the Unix timestamp format. If it's a number, we will format based on the current browser location and return that formatted value. If the value is not a number, we just return the passed value:
<script>
import CurrentTime from './components/CurrentTime.vue';
import TaskInput from './components/TaskInput.vue';

export default {
name: 'TodoApp',
components: {
CurrentTime,
TaskInput
},
data: () => ({
taskList: []
}),
computed: {
displayList() {
return this.taskList;
}
},
methods: {
formatDate(value) {
if (!value) return '';
if (typeof value !== 'number') return value;

const browserLocale =
navigator.languages && navigator.languages.length
? navigator.languages[0]
: navigator.language;
const intlDateTime = new Intl.DateTimeFormat(
browserLocale,
{
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
});

return intlDateTime.format(new Date(value));
},
addNewTask(task) {
this.taskList.push({
task,
createdAt: Date.now(),
finishedAt: undefined
});
},
changeStatus(taskIndex) {
const task = this.taskList[taskIndex];
if (task.finishedAt) {
task.finishedAt = undefined;
} else {
task.finishedAt = Date.now();
}
}
}
};
</script>
  1. For the <template> part of the component, we need to pass the variable to the filter method. To do this, we need to find the taskItem.finishedAt property and make it the parameter of the formatDate method. We will add some text to denote that the task was Done at: at the beginning of the date:
<template>
<div id='app'>
<current-time class='col-4' />
<task-input class='col-6' @add-task='addNewTask' />
<div class='col-12'>
<div class='cardBox'>
<div class='container'>
<h2>My Tasks</h2>
<ul class='taskList'>
<li
v-for='(taskItem, index) in displayList'
:key='`${index}_${Math.random()}`'
>
<input type='checkbox'
:checked='!!taskItem.finishedAt'
@input='changeStatus(index)'
/>
{{ taskItem.task }}
<span v-if='taskItem.finishedAt'> |
Done at:
{{ formatDate(taskItem.finishedAt) }}
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
  1. To run the server and see your component, open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

Filters are methods that receive a value and must return a value to be displayed in the <template> section of the file, or used in a Vue property.

When we pass the value to the formatDate method, we know that it's a valid Unix timestamp, so it's possible to invoke a new Date class constructor, passing value as a parameter because the Unix timestamp is a valid date constructor.

The code behind our filter is the Intl.DateTimeFormat function, a native function that can be used to format and parse dates to declared locations. To get the local format, we can use the navigator global variable.

See also

You can find out more information about Intl.DateTimeFormat at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat.

Creating filters and sorters for a list

When working with lists, it's common to find yourself with raw data. Sometimes, you need to get this data filtered so that it can be read by the user. To do this, we need a combination of computed properties to form a final set of filters and sorters.

In this recipe, we will learn how to create a simple filter and sorter that will control our initial to-do task list.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

We can continue with our to-do list project or create a new Vue project with the Vue CLI, as we learned in the Creating your first project with Vue CLI recipe.

How to do it...

Follow these steps to add a set of filters and sorts to your list:

  1. In the App.vue file, at the <script> part, we will add new computed properties; these will be for sorting and filtering. We will add three new computed properties: baseList, filteredList, and sortedList. The baseList property will be our first manipulation. We will add an id property to the task list via Array.map. Since JavaScript arrays start at zero, we will add 1 to the index of the array. The filteredList property will filter the baseList property and return just the unfinished tasks, while the sortedList property will sort the filteredList property so that the last added id property will be the first that's displayed to the user:
<script>
import CurrentTime from "./components/CurrentTime.vue";
import TaskInput from "./components/TaskInput";

export default {
name: "TodoApp",
components: {
CurrentTime,
TaskInput
},
data: () => ({
taskList: [],
}),
computed: {
baseList() {
return [...this.taskList]
.map((t, index) => ({
...t,
id: index + 1
}));
},
filteredList() {
return [...this.baseList]
.filter(t => !t.finishedAt);
},
sortedList() {
return [...this.filteredList]
.sort((a, b) => b.id - a.id);
},
displayList() {
return this.sortedList;
}
},
methods: {
formatDate(value) {
if (!value) return "";
if (typeof value !== "number") return value;

const browserLocale =
navigator.languages && navigator.languages.length
? navigator.languages[0]
: navigator.language;
const intlDateTime = new Intl.DateTimeFormat(browserLocale, {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric"
});

return intlDateTime.format(new Date(value));
},
addNewTask(task) {
this.taskList.push({
task,
createdAt: Date.now(),
finishedAt: undefined
});
},
changeStatus(taskIndex) {
const task = this.taskList[taskIndex];

if (task.finishedAt) {
task.finishedAt = undefined;
} else {
task.finishedAt = Date.now();
}
}
}
};
</script>
  1. For the <template> part, we will add Task ID and change how the changeStatus method sends the argument. Because the index is now mutable, we can't use it as a variable; it's just a temporary index on the array. We need to use the task id:
<template>
<div id="app">
<current-time class="col-4" />
<task-input class="col-6" @add-task="addNewTask" />
<div class="col-12">
<div class="cardBox">
<div class="container">
<h2>My Tasks</h2>
<ul class="taskList">
<li
v-for="(taskItem, index) in displayList"
:key="`${index}_${Math.random()}`"
>
<input type="checkbox"
:checked="!!taskItem.finishedAt"
@input="changeStatus(taskItem.id)"
/>
#{{ taskItem.id }} - {{ taskItem.task }}
<span v-if="taskItem.finishedAt"> |
Done at:
{{ formatDate(taskItem.finishedAt) }}
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
  1. We also need to update our function inside the changeStatus method. Since the index now starts at 1, we need to decrease the index of the array by one to get the real index of the element before we can update it:
changeStatus(taskId) {
const task = this.taskList[taskId - 1];

if (task.finishedAt) {
task.finishedAt = undefined;
} else {
task.finishedAt = Date.now();
}
}
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

The computed properties worked together as a cache for the list and made sure there were no side effects when it came to manipulating the elements:

  1. For the baseList property, we created a new array with the same tasks but added a new id property to the task.
  1. For the filteredList property, we took the baseList property and only returned the tasks that weren't finished.
  2. For the sortedList property, we sorted the tasks on the filteredList property by their ID, in descending order.

When all the manipulation was done, the displayList property returned the result of the data that was manipulated.

See also

Creating conditional filters to sort list data

Now that you've completed the previous recipe, your data should be filtered and sorted, but you might need to check the filtered data or need to change how it was sorted. In this recipe, you will learn how to create conditional filters and sort the data on a list.

Using some basic principles, it's possible to gather information and display it in many different ways.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

We can continue with our to-do list project or create a new Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe.

How to do it...

Follow these steps to add a conditional filter to sort your list data:

  1. In the App.vue file, at the <script> part, we will update the computed properties; that is, filteredList, sortedList, and displayList. We need to add three new variables to our project: hideDone, reverse, and sortById. All three are going to be Boolean variables and will start with a default value of false. The filteredList property will check if the hideDone variable is true. If it is, it will have the same behavior, but if not, it will show the whole list with no filter. The sortedList property will check if the sortById variable is true. If it is, it will have the same behavior, but if not, it will sort the list by the finished date of the task. Finally, the displayList property will check if the reverse variable is true. If it is, it will reverse the displayed list, but if not, it will have the same behavior:
<script>
import CurrentTime from "./components/CurrentTime.vue";
import TaskInput from "./components/TaskInput";

export default {
name: "TodoApp",
components: {
CurrentTime,
TaskInput
},
data: () => ({
taskList: [],
hideDone: false,
reverse: false,
sortById: false,
}),
computed: {
baseList() {
return [...this.taskList]
.map((t, index) => ({
...t,
id: index + 1
}));
},
filteredList() {
return this.hideDone
? [...this.baseList]
.filter(t => !t.finishedAt)
: [...this.baseList];
},
sortedList() {
return [...this.filteredList]
.sort((a, b) => (
this.sortById
? b.id - a.id
: (a.finishedAt || 0) - (b.finishedAt || 0)
));
},
displayList() {
const taskList = [...this.sortedList];

return this.reverse
? taskList.reverse()
: taskList;
}
},
methods: {
formatDate(value) {
if (!value) return "";
if (typeof value !== "number") return value;

const browserLocale =
navigator.languages && navigator.languages.length
? navigator.languages[0]
: navigator.language;

const intlDateTime = new Intl.DateTimeFormat(browserLocale, {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric"
});

return intlDateTime.format(new Date(value));
},
addNewTask(task) {
this.taskList.push({
task,
createdAt: Date.now(),
finishedAt: undefined
});
},
changeStatus(taskId) {
const task = this.taskList[taskId - 1];

if (task.finishedAt) {
task.finishedAt = undefined;
} else {
task.finishedAt = Date.now();
}
}
}
};
</script>
  1. For the <template> part, we need to add the controllers for those variables. We will create three checkboxes, linked directly to the variables via the v-model directive:
<template>
<div id="app">
<current-time class="col-4" />
<task-input class="col-6" @add-task="addNewTask" />
<div class="col-12">
<div class="cardBox">
<div class="container">
<h2>My Tasks</h2>
<hr />
<div class="col-4">
<input
v-model="hideDone"
type="checkbox"
id="hideDone"
name="hideDone"
/>
<label for="hideDone">
Hide Done Tasks
</label>
</div>
<div class="col-4">
<input
v-model="reverse"
type="checkbox"
id="reverse"
name="reverse"
/>
<label for="reverse">
Reverse Order
</label>
</div>
<div class="col-4">
<input
v-model="sortById"
type="checkbox"
id="sortById"
name="sortById"
/>
<label for="sortById">
Sort By Id
</label>
</div>
<ul class="taskList">
<li
v-for="(taskItem, index) in displayList"
:key="`${index}_${Math.random()}`"
>
<input type="checkbox"
:checked="!!taskItem.finishedAt"
@input="changeStatus(taskItem.id)"
/>
#{{ taskItem.id }} - {{ taskItem.task }}
<span v-if="taskItem.finishedAt"> |
Done at:
{{ formatDate(taskItem.finishedAt) }}
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

The computed properties worked together as a cache for the list and made sure there weren't any side effects when it came to manipulating the elements. With the conditional process, it was possible to change the rules for the filtering and sorting processes through a variable, and the display was updated in real time:

  1. For the filteredList property, we took the baseList property and returned just the tasks that weren't finished. When the hideDone variable was false, we returned the whole list without any filter.
  2. For the sortedList property, we sorted the tasks on the filteredList property. When the sortById variable was true, the list was sorted by ID in descending order; when it was false, the sorting was done by the task's finish time in ascending order.
  3. For the displayList property, when the reverse variable was true, the final list was reversed.

When all the manipulation was done, the displayList property returned the result of the data that was manipulated.

These computed properties were controlled by the checkboxes on the user screen, so the user had total control of what they could see and how they could see it.

See also

Adding custom styles and transitions

Adding styles to your components is a good practice as it allows you to show your user what is happening more clearly. By doing this, you can show a visual response to the user and also give them a better experience of your application.

In this recipe, we will learn how to add a new kind of conditional class binding. We will use CSS effects mixed with the rerendering that comes with each new Vue update.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

We can continue with our to-do list project or create a new Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe.

How to do it...

Follow these steps to add custom styles and transitions to your component:

  1. In the App.vue file, we will add a conditional class to the list items for the tasks that have been completed:
<template>
<div id="app">
<current-time class="col-4" />
<task-input class="col-6" @add-task="addNewTask" />
<div class="col-12">
<div class="cardBox">
<div class="container">
<h2>My Tasks</h2>
<hr />
<div class="col-4">
<input
v-model="hideDone"
type="checkbox"
id="hideDone"
name="hideDone"
/>
<label for="hideDone">
Hide Done Tasks
</label>
</div>
<div class="col-4">
<input
v-model="reverse"
type="checkbox"
id="reverse"
name="reverse"
/>
<label for="reverse">
Reverse Order
</label>
</div>
<div class="col-4">
<input
v-model="sortById"
type="checkbox"
id="sortById"
name="sortById"
/>
<label for="sortById">
Sort By Id
</label>
</div>
<ul class="taskList">
<li
v-for="(taskItem, index) in displayList"
:key="`${index}_${Math.random()}`"
:class="!!taskItem.finishedAt ? 'taskDone' : ''"
>
<input type="checkbox"
:checked="!!taskItem.finishedAt"
@input="changeStatus(taskItem.id)"
/>
#{{ taskItem.id }} - {{ taskItem.task }}
<span v-if="taskItem.finishedAt"> |
Done at:
{{ formatDate(taskItem.finishedAt) }}
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
  1. For the <style> part of the component, we will create the CSS style sheet classes for the taskDone CSS class. We need to make the list have a separator between the items; then, we will make the list have a striped style. When they get marked as done, the background will change with an effect. To add the separator between the lines and the striped list or zebra style, we need to add a CSS rule that applies to each even nth-child of our list:
<style scoped>
.taskList li {
list-style: none;
text-align: left;
padding: 5px 10px;
border-bottom: 1px solid rgba(0,0,0,0.15);
}

.taskList li:last-child {
border-bottom: 0px;
}

.taskList li:nth-child(even){
background-color: rgba(0,0,0,0.05);
}
</style>
  1. To add the effect to the background when the task has been completed, at the end of the <style> part, we will add a CSS animation keyframe that indicates the background color change and applies this animation to the .taskDone CSS class:
<style scoped>
.taskList li {
list-style: none;
text-align: left;
padding: 5px 10px;
border-bottom: 1px solid rgba(0,0,0,0.15);
}

.taskList li:last-child {
border-bottom: 0px;
}

.taskList li:nth-child(even){
background-color: rgba(0,0,0,0.05);
}

@keyframes colorChange {
from{
background-color: inherit;
}
to{
background-color: rgba(0, 160, 24, 0.577);
}
}

.taskList li.taskDone{
animation: colorChange 1s ease;
background-color: rgba(0, 160, 24, 0.577);
}
</style>
  1. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

Each time a new item in our application is marked as done, the displayList property gets updated and triggers the rerendering of the component.

Because of this, our taskDone CSS class has an animation attached to it that is executed on rendering, showing a green background.

See also

Using vue-devtools to debug your application

vue-devtools is a must for every Vue developer. This tool shows us the depths of the Vue components, routes, events, and Vuex.

With the help of the vue-devtools extension, it's possible to debug our application, try new data before changing our code, execute functions without needing to call them in our code directly, and so much more.

In this recipe, we will learn more about how to use various devtools to find out more about our application and how they can be used to help with our debug process.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

  • @vue/cli
  • @vue/cli-service-global

You will need to install the vue-devtools extension in your browser:

We can continue with our to-do list project or create a new Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe.

How to do it...

When developing any Vue application, it's always a good practice to develop with vue-devtools at hand.

Follow these steps to understand how to use vue-devtools and how to properly debug a Vue application:

  1. To enter vue-devtools, you need to have it installed in your browser, so check the Getting ready section of this recipe for the links to the extension for Chrome or Firefox. In your Vue development application, enter the Browser developer inspector mode. A new tab called Vue will appear:
  1. The first tab that you will be presented with is the Components tab. This tab shows your application component tree. If you click on a component, you will be able to see all the available data, the computed property, and extra data that's been injected by plugins such as vuelidate, vue-router, or vuex. You can edit this data to see the changes in the application in real time:
  1. The second tab is for Vuex development. This tab will show the history of the mutations, the current state, and the getters. It's possible to check on the passed payload for each mutation and do time-travel mutations, to go back in time and look at the Vuex changes in the states:
  1. The third tab is dedicated to Event emitters in the application. All events that are emitted in the application will be shown here. You can check the event that was emitted by clicking on it. By doing this, you can see the name of the event, the type, who was the source of the event (in this case, it was a component), and the payload:
  1. The fourth tab is dedicated to the vue-router plugin. There, you can view its navigation history, along with all the metadata that was passed to the new route. This is where you can check all the available routes in your application:
  1. The fifth tab is the Performance tab. Here, you can check your component's loading time and the frames per second that your application is running at for the events that are happening in real time. The following screenshot shows the current frames per second of the current application, and for the selected component:

The following screenshot shows the component's life cycle hook performance and the time it took to execute each hook:

  1. The sixth tab is your Settings tab. Here, you can manage the extension and change how it looks, how it behaves internally, and how it will behave within the Vue plugins:
  1. The last tab is a refresh button for vue-devtools. Sometimes, when hot-module-reload occurs or when some complex events occur in your application component tree, the extension can lose track of what is happening. This button forces the extension to reload and read the Vue application state again.

See also

You can find more information about vue-devtools at https://github.com/vuejs/vue-devtools.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Build a fully functional Vue.js web app and learn how it integrates with GraphQL
  • Transform your chat application into a Progressive Web Application (PWA) for web deployment
  • Discover practical recipes, exploring the capabilities of the GraphQL API for full-stack development using Quasar Framework

Description

Since its release by Facebook in 2012, GraphQL has taken the internet by storm. Huge companies such as Airbnb and Audi have started to adopt it, while small to medium-sized companies are now recognizing the potential of this query-based API. GraphQL may seem strange at first, but as you start to read about and experience more of it, you won’t want to use REST APIs anymore. With the recipes in this book, you will learn how to build a complete real-time chat app from scratch. Starting by creating an AWS Amplify environment, you will delve into developing your first GraphQL Schema. You will then learn how to add the AppSync GraphQL client and create your first GraphQL mutation. The book also helps you to discover the simplicity and data fetching capabilities of GraphQL that make it easy for front-end developers to communicate with the server. You will later understand how to use Quasar Framework to create application components and layouts. Finally, you will find out how to create Vuex modules in your application to manage the app state, fetch data using the GraphQL client, and deploy your application to the web. By the end of this book, you’ll be well versed in proof-of-concept full-stack applications that explore the power of GraphQL with AWS Amplify, and you'll be able to use Quasar Framework to create your Vue applications.

What you will learn

Set up your Vue.js projects with Vue CLI and explore the power of Vue components Discover steps to create functional components in Vue.js for faster rendering Become familiar with AWS Amplify and learn how to set up your environment Understand how to create your first GraphQL schema Use Quasar Framework to create simple and effective interfaces Discover effective techniques to create queries for interacting with data Explore Vuex for adding state management capabilities to your app Discover techniques to deploy your applications effectively to the web

Product Details

Country selected

Publication date : Jan 29, 2021
Length 298 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781800565074
Category :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Jan 29, 2021
Length 298 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781800565074
Category :

Table of Contents

9 Chapters
Preface Chevron down icon Chevron up icon
1. Data Binding, Events, and Computed Properties Chevron down icon Chevron up icon
2. Components, Mixins, and Functional Components Chevron down icon Chevron up icon
3. Setting Up Our Chat App - AWS Amplify Environment and GraphQL Chevron down icon Chevron up icon
4. Creating Custom Application Components and Layouts Chevron down icon Chevron up icon
5. Creating the User Vuex Module, Pages, and Routes Chevron down icon Chevron up icon
6. Creating Chat and Message Vuex, Pages, and Routes Chevron down icon Chevron up icon
7. Transforming Your App into a PWA and Deploying to the Web Chevron down icon Chevron up icon
8. Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Top Reviews
No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.