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
$15.99 per month
Book Jan 2021 298 pages 1st Edition
eBook
$26.99 $17.99
Print
$38.99
Subscription
$15.99 Monthly
eBook
$26.99 $17.99
Print
$38.99
Subscription
$15.99 Monthly

What do you get with a Packt Subscription?

Free for first 7 days. $15.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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 a Packt Subscription?

Free for first 7 days. $15.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.