Chapter 1: Introduction to Vue.js

To set up a development environment for Vue.js, you’ll need to follow these steps:

1. Install Node.js: Vue.js requires Node.js to run. You can download the latest version of Node.js from the official website: https://nodejs.org
2. Install Vue CLI: Vue CLI is a command-line interface that makes it easy to set up a new Vue project. You can install Vue CLI globally using npm (Node Package Manager) by running the following command in your terminal:

npm install -g @vue/cli

3. Create a new project: Once you have installed Vue CLI, you can create a new Vue project by running the following command in your terminal:

lua`vue create my-project

Replace my-project with the name of your project. This command will prompt you to choose a preset, which determines the configuration of your project. You can choose the default preset or manually select features you want to include. 4. Run the development server: After creating a new project, navigate to the project directory and run the following command in your terminal:

npm run serve

This command will start the development server and open your project in the browser.

That’s it! You now have a working development environment for Vue.js.

Creating a Vue.js application using the Vue CLI is a straightforward process. Follow these steps to create a new Vue.js application:

1. Open a terminal or command prompt and navigate to the directory where you want to create your new Vue.js application.
2. Run the following command to create a new Vue.js application using the Vue CLI:

lua`vue create my-app

Replace my-app with the name of your application. 3. The Vue CLI will prompt you to select a preset for your project. You can choose from a default preset or manually select the features you want to include in your project. Use the arrow keys to select a preset and press Enter to confirm your selection. 4. Once the Vue CLI has finished creating your project, navigate to the project directory by running the following command:

cd my-app

Replace my-app with the name of your application. 5. Run the development server by executing the following command:

npm run serve

This will start the development server and open your new Vue.js application in your default web browser.

Congratulations! You have now successfully created a new Vue.js application using the Vue CLI. You can start building your application by modifying the files in the src/ directory.

A Vue.js application consists of several components, which are reusable Vue instances that can be composed into complex user interfaces. Each component contains its own logic, template, and style, and can communicate with other components through props and events.

Here’s a breakdown of the basic structure of a Vue.js application:

1. main.js: This is the entry point of your Vue.js application. It creates a new Vue instance and mounts it to a DOM element in your HTML file.
2. `App.: This is the root component of your Vue.js application. It contains the main template and style of your application, as well as any logic that is not specific to a child component.
3. components/: This directory contains all the child components of your Vue.js application. Each component is defined in its own `. file, which contains its template, style, and logic.
4. assets/: This directory contains any static assets, such as images, fonts, and icons, that are used in your Vue.js application.
5. router/: This directory contains the routing configuration for your Vue.js application. You can define routes that map to different components, and handle navigation between them.
6. store/: This directory contains the Vuex store for your Vue.js application. Vuex is a state management pattern and library for Vue.js that provides a centralized store for managing the state of your application.
7. public/: This directory contains any static files that should be served directly to the client, such as the `index. file that is the entry point of your application.

That’s a basic overview of the structure of a Vue.js application. Keep in mind that this is just a general structure, and you can customize it to suit the needs of your application.

Here’s how you can create a simple “Hello World” application in Vue.js:

1. Open a text editor or IDE and create a new file named `index..
2. In the `index. file, add the following code:

<!DOCTYPE html>
<html>
 <head>
 <title>Hello World</title>
 <script src="https://unpkg.com/vue@next"></script>
 </head>
 <body>
 <div id="app">
 {{ message }}
 </div>
 <script>
 const app = Vue.createApp({
 data() {
 return {
 message: 'Hello World'
 }
 }
 })

 app.mount('#app')
 </script>
 </body>
</html>

This code defines a new Vue.js application and mounts it to the #app element in the HTML file. The data object defines a property named message, which is used to display the text “Hello World” in the template. 3. Save the `index. file and open it in your web browser.

You should see the text “Hello World” displayed on the page.

That’s it! You have successfully created a simple “Hello World” application in Vue.js. This is just the beginning - you can now start building more complex applications using Vue.js components, routing, and state management.

Chapter 2: Building a To-Do List Application

To add a filter to show completed or active tasks, you can start by defining a computed property that filters the tasks array based on a data property that determines whether to show completed tasks or not.

computed: {
 filteredTasks() {
 if (this.showCompleted) {
 return this.tasks.filter(task => task.completed)
 } else {
 return this.tasks.filter(task => !task.completed)
 }
 }
},
data() {
 return {
 showCompleted: false,
 tasks: [
 { id: 1, text: 'Learn Vue.js', completed: true },
 { id: 2, text: 'Build a project', completed: false },
 { id: 3, text: 'Deploy to production', completed: false }
 ]
 }
}

Then, you can use a checkbox to toggle the showCompleted data property and display the filtered tasks in a v-for loop.

<div>
 <label>
 Show completed tasks
 <input type="checkbox" v-model="showCompleted">
 </label>
</div>
<ul>
 <li v-for="task in filteredTasks" :key="task.id">
 {{ task.text }}
 </li>
</ul>

This will allow users to toggle between showing completed and active tasks.

Chapter 3: Building a Weather App

To use an API to get weather data, you can start by installing a package like Axios, which makes it easy to perform HTTP requests from within a Vue component.

npm install axios

Then, you can create a method in your Vue component that uses Axios to fetch weather data from an API. For example, here’s a method that fetches the current weather for a given location using the OpenWeatherMap API.

import axios from 'axios'

export default {
 data() {
 return {
 location: 'New York',
 weather: null
 }
 },
 methods: {
 async fetchWeather() {
 const apiKey = 'your-api-key'
 const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.location}&appid=${apiKey}
 try {
 const response = await axios.get(url)
 this.weather = response.data
 } catch (error) {
 console.error(error)
 }
 }
 }
}

In this example, the fetchWeather method makes an asynchronous HTTP GET request to the OpenWeatherMap API using the axios.get method. The response is then stored in the weather data property of the component.

To display the weather data in the component template, you can use Vue’s template syntax to interpolate the data.

<div>
 <input v-model="location" placeholder="Enter a location">
 <button @click="fetchWeather">Get weather</button>
</div>
<div v-if="weather">
 <h2>Current weather for {{ location }}</h2>
 <p>{{ weather.weather[0].description }}</p>
 <p>Temperature: {{ Math.round(weather.main.temp - 273.15) }}&deg;C</p>
 <p>Humidity: {{ weather.main.humidity }}%</p>
</div>

In this example, the v-if directive is used to conditionally render the weather data once it has been fetched.

To create a form to enter a location, you can start by creating a data property for the location value and binding it to an input field in the template.

<template>
 <div>
 <form @submit.prevent="fetchWeather">
 <label for="location">Location:</label>
 <input id="location" v-model="location" type="text" required>
 <button type="submit">Get weather</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 location: '',
 };
 },
 methods: {
 fetchWeather() {
 // code to fetch weather data
 },
 },
};
</script>

In this example, the location data property is bound to the v-model directive on the input field, which allows the user to enter a location. The @submit.prevent directive is used to prevent the form from submitting automatically and to call the fetchWeather method when the user submits the form.

Once the user submits the form, the fetchWeather method will be called, and you can use the location data property to fetch weather data for the entered location from an API (as shown in the previous example).

To display the current weather conditions, you can use the weather data fetched from the API and interpolate it in the component template using Vue’s template syntax.

Here’s an example of how you could display the current weather conditions:

<template>
 <div>
 <form @submit.prevent="fetchWeather">
 <label for="location">Location:</label>
 <input id="location" v-model="location" type="text" required>
 <button type="submit">Get weather</button>
 </form>
 <div v-if="weather">
 <h2>Current Weather in {{ location }}</h2>
 <p>{{ weather.weather[0].description }}</p>
 <p>Temperature: {{ weather.main.temp }}&deg;F</p>
 <p>Feels Like: {{ weather.main.feels_like }}&deg;F</p>
 <p>Humidity: {{ weather.main.humidity }}%</p>
 <p>Wind Speed: {{ weather.wind.speed }} mph</p>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 location: '',
 weather: null,
 };
 },
 methods: {
 async fetchWeather() {
 // code to fetch weather data
 },
 },
};
</script>

In this example, the v-if directive is used to conditionally render the weather data only when it exists (i.e., after the API call has successfully completed). The weather object contains various properties related to the current weather conditions, such as weather.description, main.temp, main.feels_like, main.humidity, and wind.speed. These properties can be interpolated in the template using Vue’s template syntax to display the current weather conditions to the user.

To add a forecast for the next few days, you can modify the code that fetches weather data from the API to fetch forecast data as well. One way to do this is to use the OpenWeatherMap API, which provides a forecast endpoint that returns weather forecast data for the next several days.

Here’s an example of how you could modify the fetchWeather method to fetch both the current weather conditions and a forecast for the next few days:

<template>
 <div>
 <form @submit.prevent="fetchWeather">
 <label for="location">Location:</label>
 <input id="location" v-model="location" type="text" required>
 <button type="submit">Get weather</button>
 </form>
 <div v-if="weather">
 <h2>Current Weather in {{ location }}</h2>
 <p>{{ weather.weather[0].description }}</p>
 <p>Temperature: {{ weather.main.temp }}&deg;F</p>
 <p>Feels Like: {{ weather.main.feels_like }}&deg;F</p>
 <p>Humidity: {{ weather.main.humidity }}%</p>
 <p>Wind Speed: {{ weather.wind.speed }} mph</p>
 <h2>Weather Forecast for {{ location }}</h2>
 <ul>
 <li v-for="forecast in forecasts" :key="forecast.dt">
 <p>Date: {{ forecast.dt_txt }}</p>
 <p>Temperature: {{ forecast.main.temp }}&deg;F</p>
 <p>Feels Like: {{ forecast.main.feels_like }}&deg;F</p>
 <p>Humidity: {{ forecast.main.humidity }}%</p>
 <p>Wind Speed: {{ forecast.wind.speed }} mph</p>
 <p>Description: {{ forecast.weather[0].description }}</p>
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
 return {
 location: '',
 weather: null,
 forecasts: [],
 };
 },
 methods: {
 async fetchWeather() {
 const apiKey = 'your-api-key';
 const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${this.location}&appid=${apiKey}&units=imperial`;
 const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${this.location}&appid=${apiKey}&units=imperial`;
 try {
 const [weatherResponse, forecastResponse] = await Promise.all([
 axios.get(weatherUrl),
 axios.get(forecastUrl),
 ]);
 this.weather = weatherResponse.data;
 this.forecasts = forecastResponse.data.list.filter((forecast) =>
 forecast.dt_txt.includes('12:00:00')
 );
 } catch (error) {
 console.error(error);
 }
 },
 },
};
</script>

In this example, the fetchWeather method uses Promise.all to make parallel requests to fetch both the current weather data and the forecast data. The response from the forecast endpoint returns an array of forecast objects, where each object represents weather data for a specific date and time. To display the forecast for the next few days, we filter the forecast data to include only objects where the dt_txt property includes 12:00:00. This will give us one forecast per day for the next several days.

In the template, we iterate over the forecasts array using a v-for directive to display the forecast data for each day. Each forecast object contains various

To style the app with CSS, you can add a <style> block to your Vue component file and define styles for the various elements in your template.

Here’s an example of how you could add some basic styles to your weather app:

<template>
 <div class="weather-app">
 <form @submit.prevent="fetchWeather">
 <label for="location">Location:</label>
 <input id="location" v-model="location" type="text" required>
 <button type="submit">Get weather</button>
 </form>
 <div v-if="weather" class="weather-current">
 <h2>Current Weather in {{ location }}</h2>
 <p>{{ weather.weather[0].description }}</p>
 <p>Temperature: {{ weather.main.temp }}&deg;F</p>
 <p>Feels Like: {{ weather.main.feels_like }}&deg;F</p>
 <p>Humidity: {{ weather.main.humidity }}%</p>
 <p>Wind Speed: {{ weather.wind.speed }} mph</p>
 </div>
 <div v-if="forecasts.length" class="weather-forecast">
 <h2>Weather Forecast for {{ location }}</h2>
 <ul>
 <li v-for="forecast in forecasts" :key="forecast.dt" class="weather-forecast-item">
 <p>Date: {{ forecast.dt_txt }}</p>
 <p>Temperature: {{ forecast.main.temp }}&deg;F</p>
 <p>Feels Like: {{ forecast.main.feels_like }}&deg;F</p>
 <p>Humidity: {{ forecast.main.humidity }}%</p>
 <p>Wind Speed: {{ forecast.wind.speed }} mph</p>
 <p>Description: {{ forecast.weather[0].description }}</p>
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
 return {
 location: '',
 weather: null,
 forecasts: [],
 };
 },
 methods: {
 async fetchWeather() {
 const apiKey = 'your-api-key';
 const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${this.location}&appid=${apiKey}&units=imperial`;
 const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${this.location}&appid=${apiKey}&units=imperial`;
 try {
 const [weatherResponse, forecastResponse] = await Promise.all([
 axios.get(weatherUrl),
 axios.get(forecastUrl),
 ]);
 this.weather = weatherResponse.data;
 this.forecasts = forecastResponse.data.list.filter((forecast) =>
 forecast.dt_txt.includes('12:00:00')
 );
 } catch (error) {
 console.error(error);
 }
 },
 },
};
<style>
.weather-app {
 font-family: 'Helvetica Neue', sans-serif;
 max-width: 500px;
 margin: 0 auto;
 text-align: center;
}

form {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 20px;
}

label {
 font-size: 18px;
 margin-bottom: 10px;
}

input {
 font-size: 16px;
 padding: 10px;
 border: none;
 border-radius: 4px;
 box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

button {
 font-size: 16px;
 padding:

Chapter 4: Building a GitHub User Search App

To use the GitHub API to search for users, you can make an HTTP GET request to the https://api.github.com/search/users endpoint with the q query parameter set to the search term.

Here’s an example of how you could create a Vue component that allows users to search for GitHub users:

<template>
 <div class="user-search">
 <form @submit.prevent="searchUsers">
 <label for="search">Search GitHub Users:</label>
 <input id="search" v-model="searchTerm" type="text" required>
 <button type="submit">Search</button>
 </form>
 <ul v-if="users.length">
 <li v-for="user in users" :key="user.id">
 <a :href="user.html_url" target="_blank">{{ user.login }}</a>
 </li>
 </ul>
 <p v-else>No users found.</p>
 </div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
 return {
 searchTerm: '',
 users: [],
 };
 },
 methods: {
 async searchUsers() {
 const url = `https://api.github.com/search/users?q=${this.searchTerm}`;
 try {
 const response = await axios.get(url);
 this.users = response.data.items;
 } catch (error) {
 console.error(error);
 }
 },
 },
};
</script>

<style>
.user-search {
 font-family: 'Helvetica Neue', sans-serif;
 max-width: 500px;
 margin: 0 auto;
 text-align: center;
}

form {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 20px;
}

label {
 font-size: 18px;
 margin-bottom: 10px;
}

input {
 font-size: 16px;
 padding: 10px;
 border: none;
 border-radius: 4px;
 box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

button {
 font-size: 16px;
 padding: 10px;
 background-color: #007bff;
 color: #fff;
 border: none;
 border-radius: 4px;
 box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 cursor: pointer;
}

ul {
 list-style: none;
 padding: 0;
}

li {
 margin: 10px 0;
}

a {
 font-size: 16px;
 text-decoration: none;
 color: #007bff;
}
</style>

In this example, the searchTerm data property is bound to the search input field using v-model. When the form is submitted, the searchUsers method makes an HTTP GET request to the GitHub API with the search term, and sets the users data property to the array of user objects returned by the API.

The results are displayed in an unordered list using v-for to loop over the users array, and each user’s login name is displayed as a link to their GitHub profile using an anchor tag with the href attribute set to the user’s html_url property. If no users are found, a message is displayed indicating this.

The CSS styles are applied using a <style> block within the Vue component file.

To display user profiles and repositories, you can make use of the GitHub API to fetch user information and repositories. You can make HTTP GET requests to the following endpoints:

• https://api.github.com/users/{username} to get information about a specific GitHub user.
• https://api.github.com/users/{username}/repos to get a list of repositories for a specific GitHub user.

Here’s an example of how you could create a Vue component that displays a user profile and their repositories:

<template>
 <div class="user-profile">
 <div v-if="user">
 <h2>{{ user.name }}</h2>
 <img :src="user.avatar_url" :alt="`${user.name} avatar`">
 <p>{{ user.bio }}</p>
 <p>Followers: {{ user.followers }}</p>
 <p>Following: {{ user.following }}</p>
 </div>
 <div v-else>
 <p>Loading...</p>
 </div>
 <hr>
 <h3 v-if="repos.length">{{ user.name }}'s Repositories:</h3>
 <ul v-if="repos.length">
 <li v-for="repo in repos" :key="repo.id">
 <a :href="repo.html_url" target="_blank">{{ repo.name }}</a>
 <p>{{ repo.description }}</p>
 </li>
 </ul>
 <p v-else>No repositories found.</p>
 </div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
 return {
 user: null,
 repos: [],
 };
 },
 async created() {
 await this.fetchUser();
 await this.fetchRepositories();
 },
 methods: {
 async fetchUser() {
 const url = `https://api.github.com/users/${this.$route.params.username}`;
 try {
 const response = await axios.get(url);
 this.user = response.data;
 } catch (error) {
 console.error(error);
 }
 },
 async fetchRepositories() {
 const url = `https://api.github.com/users/${this.$route.params.username}/repos`;
 try {
 const response = await axios.get(url);
 this.repos = response.data;
 } catch (error) {
 console.error(error);
 }
 },
 },
};
</script>

<style>
.user-profile {
 font-family: 'Helvetica Neue', sans-serif;
 max-width: 800px;
 margin: 0 auto;
 text-align: center;
}

img {
 max-width: 150px;
 border-radius: 50%;
 margin: 20px 0;
}

ul {
 list-style: none;
 padding: 0;
}

li {
 margin: 20px 0;
}

a {
 font-size: 24px;
 text-decoration: none;
 color: #007bff;
}

p {
 font-size: 18px;
}
</style>

In this example, the component uses the $route.params property to get the username from the URL. When the component is created, the fetchUser and fetchRepositories methods are called to fetch the user data and repositories data respectively using the GitHub API.

The user’s name, bio, and follower/following counts are displayed along with their profile picture using data binding. The list of repositories is displayed using v-for to loop over the repos array, and each repository’s name and description are displayed using an anchor tag with the href attribute set to the repository’s html_url property. If no repositories are found, a message is displayed indicating

To add pagination to the search results, you can make use of the page and per_page parameters in the GitHub API. The page parameter is used to specify which page of search results to return, and the per_page parameter is used to specify how many results to return per page.

Here’s an example of how you could create a Vue component that displays a paginated list of search results from the GitHub API:

<template>
 <div class="search-results">
 <form @submit.prevent="searchUsers">
 <input type="text" v-model="query" placeholder="Search GitHub users...">
 <button type="submit">Search</button>
 </form>
 <ul>
 <li v-for="user in users" :key="user.id">
 <img :src="user.avatar_url" :alt="`${user.login} avatar`">
 <a :href="user.html_url" target="_blank">{{ user.login }}</a>
 </li>
 </ul>
 <nav v-if="pages.length > 1">
 <ul>
 <li v-for="page in pages" :key="page">
 <a :class="{ active: currentPage === page }" @click.prevent="goToPage(page)" href="#">{{ page }}</a>
 </li>
 </ul>
 </nav>
 </div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
 return {
 query: '',
 users: [],
 currentPage: 1,
 perPage: 10,
 };
 },
 computed: {
 pages() {
 const pagesCount = Math.ceil(this.totalCount / this.perPage);
 return Array.from({ length: pagesCount }, (_, i) => i + 1);
 },
 totalCount() {
 return this.users.length > 0 ? this.users[0].total_count : 0;
 },
 },
 methods: {
 async searchUsers() {
 const url = `https://api.github.com/search/users?q=${this.query}&page=${this.currentPage}&per_page=${this.perPage}`;
 try {
 const response = await axios.get(url);
 this.users = response.data.items;
 } catch (error) {
 console.error(error);
 }
 },
 goToPage(page) {
 this.currentPage = page;
 this.searchUsers();
 },
 },
};
</script>

<style>
.search-results {
 font-family: 'Helvetica Neue', sans-serif;
 max-width: 800px;
 margin: 0 auto;
 text-align: center;
}

form {
 margin: 20px 0;
}

input[type="text"] {
 padding: 10px;
 font-size: 18px;
 border: none;
 border-bottom: 1px solid #ccc;
}

button[type="submit"] {
 padding: 10px;
 font-size: 18px;
 background-color: #007bff;
 color: #fff;
 border: none;
 cursor: pointer;
}

button[type="submit"]:hover {
 background-color: #0062cc;
}

ul {
 list-style: none;
 padding: 0;
}

li {
 margin: 20px 0;
}

img {
 max-width: 150px;
 border-radius: 50%;
 margin: 20px 0;
}

a {
 font-size: 24px;
 text-decoration: none;
 color: #007bff;
}

a.active {
 font-weight: bold;
}
</style>

In this example, the component uses a form to allow the user to search for

To style the app with Bootstrap, you can include the Bootstrap CSS file in your HTML file and add Bootstrap classes to your Vue templates.

Here’s an example of how you could modify the previous Vue component to use Bootstrap:

<template>
 <div class="container">
 <div class="row">
 <div class="col-md-8 offset-md-2">
 <form @submit.prevent="searchUsers" class="mt-5">
 <div class="form-group">
 <input type="text" v-model="query" class="form-control form-control-lg" placeholder="Search GitHub users...">
 </div>
 <button type="submit" class="btn btn-primary btn-lg">Search</button>
 </form>
 <ul class="list-group mt-5">
 <li v-for="user in users" :key="user.id" class="list-group-item">
 <img :src="user.avatar_url" :alt="`${user.login} avatar`" class="rounded-circle mr-3">
 <a :href="user.html_url" target="_blank">{{ user.login }}</a>
 </li>
 </ul>
 <nav v-if="pages.length > 1" class="mt-5">
 <ul class="pagination justify-content-center">
 <li class="page-item" :class="{ disabled: currentPage === 1 }">
 <a class="page-link" href="#" @click.prevent="goToPage(currentPage - 1)">Previous</a>
 </li>
 <li v-for="page in pages" :key="page" class="page-item" :class="{ active: currentPage === page }">
 <a class="page-link" href="#" @click.prevent="goToPage(page)">{{ page }}</a>
 </li>
 <li class="page-item" :class="{ disabled: currentPage === pages.length }">
 <a class="page-link" href="#" @click.prevent="goToPage(currentPage + 1)">Next</a>
 </li>
 </ul>
 </nav>
 </div>
 </div>
 </div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
 return {
 query: '',
 users: [],
 currentPage: 1,
 perPage: 10,
 };
 },
 computed: {
 pages() {
 const pagesCount = Math.ceil(this.totalCount / this.perPage);
 return Array.from({ length: pagesCount }, (_, i) => i + 1);
 },
 totalCount() {
 return this.users.length > 0 ? this.users[0].total_count : 0;
 },
 },
 methods: {
 async searchUsers() {
 const url = `https://api.github.com/search/users?q=${this.query}&page=${this.currentPage}&per_page=${this.perPage}`;
 try {
 const response = await axios.get(url);
 this.users = response.data.items;
 } catch (error) {
 console.error(error);
 }
 },
 goToPage(page) {
 this.currentPage = page;
 this.searchUsers();
 },
 },
};
</script>

<style>
body {
 font-family: 'Helvetica Neue', sans-serif;
}

.list-group-item {
 display: flex;
 align-items: center;
}

.list-group-item img {
 width: 60px;
}

.pagination {
 margin: 0 auto;
}
</style>

<!-- Include Bootstrap CSS file -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

In this example, the component uses Bootstrap classes to style

Chapter 5: Building a Quiz App

To create a quiz with multiple choice questions, you can define an array of questions in your Vue component’s data object, with each question object containing a question text and an array of possible answers. You can then create a template that displays each question and its possible answers as radio buttons, and a button to submit the user’s answers. When the user submits their answers, you can compare them to the correct answers and display the user’s score.

Here’s an example of how you could create a quiz with three multiple choice questions:

<template>
 <div class="container">
 <h1>Quiz</h1>
 <div v-if="!submitted">
 <form @submit.prevent="submitQuiz">
 <div v-for="(question, index) in questions" :key="index">
 <h4>{{ question.text }}</h4>
 <div>
 <label v-for="(answer, answerIndex) in question.answers" :key="answerIndex">
 <input type="radio" :name="`question-${index}`" :value="answerIndex" v-model="userAnswers[index]">
 {{ answer }}
 </label>
 </div>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 </div>
 <div v-else>
 <h2>Your score: {{ score }}/{{ questions.length }}</h2>
 <ul>
 <li v-for="(question, index) in questions" :key="index">
 {{ question.text }} - Your answer: {{ question.answers[userAnswers[index]] }}, Correct answer: {{ question.answers[question.correctAnswer] }}
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 questions: [
 {
 text: 'What is the capital of France?',
 answers: ['Paris', 'London', 'Berlin', 'Madrid'],
 correctAnswer: 0,
 },
 {
 text: 'What is the largest planet in our solar system?',
 answers: ['Jupiter', 'Saturn', 'Mars', 'Neptune'],
 correctAnswer: 0,
 },
 {
 text: 'Who painted the Mona Lisa?',
 answers: ['Leonardo da Vinci', 'Pablo Picasso', 'Vincent van Gogh', 'Claude Monet'],
 correctAnswer: 0,
 },
 ],
 userAnswers: [],
 submitted: false,
 };
 },
 computed: {
 score() {
 return this.userAnswers.filter((answer, index) => answer === this.questions[index].correctAnswer).length;
 },
 },
 methods: {
 submitQuiz() {
 this.submitted = true;
 },
 },
};
</script>

<style>
body {
 font-family: 'Helvetica Neue', sans-serif;
}
</style>

In this example, each question object contains a text property for the question text, an answers array for the possible answers, and a correctAnswer index for the correct answer. In the template, we use v-for to display each question and its possible answers as radio buttons. When the user submits their answers, we set the submitted data property to true, which triggers the display of the user’s score and their answers. The score computed property compares the user’s answers to the correct answers and returns the number of correct answers.

To display the questions and choices in the quiz, you can use a v-for directive to loop through each question and its choices, and display them in the template. Here’s an updated example of the Vue component that includes the questions and choices:

<template>
 <div class="container">
 <h1>Quiz</h1>
 <div v-if="!submitted">
 <form @submit.prevent="submitQuiz">
 <div v-for="(question, index) in questions" :key="index">
 <h4>{{ question.text }}</h4>
 <div>
 <label v-for="(choice, choiceIndex) in question.choices" :key="choiceIndex">
 <input type="radio" :name="`question-${index}`" :value="choiceIndex" v-model="userAnswers[index]">
 {{ choice }}
 </label>
 </div>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 </div>
 <div v-else>
 <h2>Your score: {{ score }}/{{ questions.length }}</h2>
 <ul>
 <li v-for="(question, index) in questions" :key="index">
 {{ question.text }} - Your answer: {{ question.choices[userAnswers[index]] }}, Correct answer: {{ question.choices[question.answerIndex] }}
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 questions: [
 {
 text: 'What is the capital of France?',
 choices: ['Paris', 'London', 'Berlin', 'Madrid'],
 answerIndex: 0,
 },
 {
 text: 'What is the largest planet in our solar system?',
 choices: ['Jupiter', 'Saturn', 'Mars', 'Neptune'],
 answerIndex: 0,
 },
 {
 text: 'Who painted the Mona Lisa?',
 choices: ['Leonardo da Vinci', 'Pablo Picasso', 'Vincent van Gogh', 'Claude Monet'],
 answerIndex: 0,
 },
 ],
 userAnswers: [],
 submitted: false,
 };
 },
 computed: {
 score() {
 return this.userAnswers.filter((answer, index) => answer === this.questions[index].answerIndex).length;
 },
 },
 methods: {
 submitQuiz() {
 this.submitted = true;
 },
 },
};
</script>

<style>
body {
 font-family: 'Helvetica Neue', sans-serif;
}
</style>

In this example, we use v-for to loop through each question in the questions array and display its text property as a heading. We then loop through each choice in the choices array for the question and display it as a radio button with its corresponding value set to its index. The v-model directive binds the user’s choice to the userAnswers array using the current index in the v-for loop.

After the user submits their answers, we loop through each question again and display the question text, the user’s answer, and the correct answer for each question. We use the score computed property to count the number of correct answers and display it to the user.

To keep track of the user’s score, you can add a score property to the component’s data object and initialize it to 0. Then, in the submitQuiz method, you can loop through the user’s answers and compare them to the correct answers. For each correct answer, you can increment the score property. Finally, you can set the submitted property to true to show the user their score.

Here’s an example of how you can update the component to keep track of the user’s score:

<template>
 <div class="container">
 <h1>Quiz</h1>
 <div v-if="!submitted">
 <form @submit.prevent="submitQuiz">
 <div v-for="(question, index) in questions" :key="index">
 <h4>{{ question.text }}</h4>
 <div>
 <label v-for="(choice, choiceIndex) in question.choices" :key="choiceIndex">
 <input type="radio" :name="`question-${index}`" :value="choiceIndex" v-model="userAnswers[index]">
 {{ choice }}
 </label>
 </div>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 </div>
 <div v-else>
 <h2>Your score: {{ score }}/{{ questions.length }}</h2>
 <ul>
 <li v-for="(question, index) in questions" :key="index">
 {{ question.text }} - Your answer: {{ question.choices[userAnswers[index]] }}, Correct answer: {{ question.choices[question.answerIndex] }}
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 questions: [
 {
 text: 'What is the capital of France?',
 choices: ['Paris', 'London', 'Berlin', 'Madrid'],
 answerIndex: 0,
 },
 {
 text: 'What is the largest planet in our solar system?',
 choices: ['Jupiter', 'Saturn', 'Mars', 'Neptune'],
 answerIndex: 0,
 },
 {
 text: 'Who painted the Mona Lisa?',
 choices: ['Leonardo da Vinci', 'Pablo Picasso', 'Vincent van Gogh', 'Claude Monet'],
 answerIndex: 0,
 },
 ],
 userAnswers: [],
 score: 0,
 submitted: false,
 };
 },
 computed: {
 percentScore() {
 return Math.round(this.score / this.questions.length \* 100);
 },
 },
 methods: {
 submitQuiz() {
 this.score = 0;
 for (let i = 0; i < this.questions.length; i++) {
 if (this.userAnswers[i] === this.questions[i].answerIndex) {
 this.score++;
 }
 }
 this.submitted = true;
 },
 },
};
</script>

<style>
body {
 font-family: 'Helvetica Neue', sans-serif;
}
</style>

In this example, we add a score property to the component’s data object and initialize it to 0. In the submitQuiz method, we reset the score property to 0 and loop through the questions. For each question, we compare the user’s answer to the correct answer and increment the score property if the answers match. Finally, we set the submitted property to true to show the user their score.

We also add a computed property

To display the user’s final score after they submit the quiz, you can update the submitQuiz method to set a showScore property to true. Then, you can use a conditional statement in the template to display the user’s score only if showScore is true.

Here’s an example of how you can update the component to display the user’s final score:

<template>
 <div class="container">
 <h1>Quiz</h1>
 <div v-if="!submitted">
 <form @submit.prevent="submitQuiz">
 <div v-for="(question, index) in questions" :key="index">
 <h4>{{ question.text }}</h4>
 <div>
 <label v-for="(choice, choiceIndex) in question.choices" :key="choiceIndex">
 <input type="radio" :name="`question-${index}`" :value="choiceIndex" v-model="userAnswers[index]">
 {{ choice }}
 </label>
 </div>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 </div>
 <div v-else>
 <h2 v-if="showScore">Your score: {{ score }}/{{ questions.length }}</h2>
 <ul>
 <li v-for="(question, index) in questions" :key="index">
 {{ question.text }} - Your answer: {{ question.choices[userAnswers[index]] }}, Correct answer: {{ question.choices[question.answerIndex] }}
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 questions: [
 {
 text: 'What is the capital of France?',
 choices: ['Paris', 'London', 'Berlin', 'Madrid'],
 answerIndex: 0,
 },
 {
 text: 'What is the largest planet in our solar system?',
 choices: ['Jupiter', 'Saturn', 'Mars', 'Neptune'],
 answerIndex: 0,
 },
 {
 text: 'Who painted the Mona Lisa?',
 choices: ['Leonardo da Vinci', 'Pablo Picasso', 'Vincent van Gogh', 'Claude Monet'],
 answerIndex: 0,
 },
 ],
 userAnswers: [],
 score: 0,
 submitted: false,
 showScore: false,
 };
 },
 computed: {
 percentScore() {
 return Math.round(this.score / this.questions.length \* 100);
 },
 },
 methods: {
 submitQuiz() {
 this.score = 0;
 for (let i = 0; i < this.questions.length; i++) {
 if (this.userAnswers[i] === this.questions[i].answerIndex) {
 this.score++;
 }
 }
 this.showScore = true;
 this.submitted = true;
 },
 },
};
</script>

<style>
body {
 font-family: 'Helvetica Neue', sans-serif;
}
</style>

In this example, we add a showScore property to the component’s data object and initialize it to false. In the submitQuiz method, we set showScore to true after we calculate the user’s score. Then, in the template, we use a conditional statement to display the user’s score only if showScore is true.

With these changes, the user’s final score will be displayed after they submit the quiz.

To add the ability to restart the quiz after the user has completed it, you can add a button that calls a resetQuiz method to reset the submitted, userAnswers, score, and showScore properties to their initial values. You can also add a v-if directive to the submit button to hide it when the quiz has been submitted and the score is being displayed.

Here’s an example of how you can update the component to allow the user to restart the quiz:

<template>
 <div class="container">
 <h1>Quiz</h1>
 <div v-if="!submitted">
 <form @submit.prevent="submitQuiz">
 <div v-for="(question, index) in questions" :key="index">
 <h4>{{ question.text }}</h4>
 <div>
 <label v-for="(choice, choiceIndex) in question.choices" :key="choiceIndex">
 <input type="radio" :name="`question-${index}`" :value="choiceIndex" v-model="userAnswers[index]">
 {{ choice }}
 </label>
 </div>
 </div>
 <button type="submit" class="btn btn-primary" v-if="!showScore">Submit</button>
 </form>
 </div>
 <div v-else>
 <h2 v-if="showScore">Your score: {{ score }}/{{ questions.length }}</h2>
 <ul>
 <li v-for="(question, index) in questions" :key="index">
 {{ question.text }} - Your answer: {{ question.choices[userAnswers[index]] }}, Correct answer: {{ question.choices[question.answerIndex] }}
 </li>
 </ul>
 <button class="btn btn-secondary" @click="resetQuiz">Restart Quiz</button>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 questions: [
 {
 text: 'What is the capital of France?',
 choices: ['Paris', 'London', 'Berlin', 'Madrid'],
 answerIndex: 0,
 },
 {
 text: 'What is the largest planet in our solar system?',
 choices: ['Jupiter', 'Saturn', 'Mars', 'Neptune'],
 answerIndex: 0,
 },
 {
 text: 'Who painted the Mona Lisa?',
 choices: ['Leonardo da Vinci', 'Pablo Picasso', 'Vincent van Gogh', 'Claude Monet'],
 answerIndex: 0,
 },
 ],
 userAnswers: [],
 score: 0,
 submitted: false,
 showScore: false,
 };
 },
 computed: {
 percentScore() {
 return Math.round(this.score / this.questions.length \* 100);
 },
 },
 methods: {
 submitQuiz() {
 this.score = 0;
 for (let i = 0; i < this.questions.length; i++) {
 if (this.userAnswers[i] === this.questions[i].answerIndex) {
 this.score++;
 }
 }
 this.showScore = true;
 this.submitted = true;
 },
 resetQuiz() {
 this.userAnswers = [];
 this.score = 0;
 this.submitted = false;
 this.showScore = false;
 },
 },
};
</script>

<style>
body {
 font-family: 'Helvetica Neue', sans-serif;
}
</style>

In this example, we add a resetQuiz method that sets the userAnswers, score, submitted, and showScore properties back to their

Chapter 6: Building a Chat Application

To create a chat room using Firebase, you can follow these general steps:

1. Set up a Firebase project in the Firebase console.
2. Create a new Firebase Realtime Database in the Firebase console.
3. Install the Firebase SDK for JavaScript in your project.
4. Create a Vue.js component for the chat room that connects to the Firebase Realtime Database.
5. Implement the ability to send messages to the chat room and display them in the UI.
6. Implement the ability to see which users are currently online in the chat room.
7. Implement the ability to display a message when a user joins or leaves the chat room.

Here’s an example of how you can create a basic chat room component using Firebase:

<template>
 <div class="container">
 <h1>Chat Room</h1>
 <div class="chat-messages">
 <div v-for="(message, index) in messages" :key="index">
 <strong>{{ message.sender }}:</strong> {{ message.text }}
 </div>
 </div>
 <form @submit.prevent="sendMessage">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="Message" v-model="newMessage">
 </div>
 <button type="submit" class="btn btn-primary">Send</button>
 </form>
 <div class="chat-users">
 <h3>Online Users</h3>
 <ul>
 <li v-for="(user, index) in users" :key="index">
 {{ user.name }}
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/database';

export default {
 data() {
 return {
 messages: [],
 newMessage: '',
 users: [],
 };
 },
 created() {
 const db = firebase.database().ref('messages');
 db.on('child_added', snapshot => {
 const message = snapshot.val();
 this.messages.push(message);
 });

 const connectedRef = firebase.database().ref('.info/connected');
 connectedRef.on('value', snapshot => {
 if (snapshot.val()) {
 const userRef = firebase.database().ref('users').push();
 userRef.set({
 name: this.user.name,
 });
 userRef.onDisconnect().remove();
 }
 });

 const usersRef = firebase.database().ref('users');
 usersRef.on('value', snapshot => {
 const users = snapshot.val();
 this.users = Object.values(users);
 });
 },
 methods: {
 sendMessage() {
 const db = firebase.database().ref('messages').push();
 db.set({
 sender: this.user.name,
 text: this.newMessage,
 });
 this.newMessage = '';
 },
 },
 mounted() {
 this.user = {
 name: prompt('Please enter your name'),
 };
 },
};
</script>

<style>
body {
 font-family: 'Helvetica Neue', sans-serif;
}
.chat-messages {
 height: 300px;
 overflow: scroll;
}
.chat-users {
 position: absolute;
 top: 0;
 right: 0;
 width: 200px;
 background-color: #f5f5f5;
 padding: 10px;
 border: 1px solid #ddd;
 height: 100%;
 box-shadow: -5px 0 5px -5px #333;
}
</style>

In this example, we use the Firebase Realtime Database to store messages and users in the chat room. We also use the Firebase SDK to listen for changes to the

To allow users to sign in with Google or Facebook in your Vue.js app, you can use Firebase Authentication. Firebase Authentication provides a simple way to authenticate users with their Google or Facebook accounts.

Here are the general steps to set up Firebase Authentication for your Vue.js app:

1. Set up a Firebase project in the Firebase console.
2. Enable Google and/or Facebook authentication in the Firebase Authentication section of the Firebase console.
3. Install the Firebase SDK for JavaScript in your project.
4. Create a Vue.js component for the login page that uses the Firebase Authentication SDK to sign in with Google or Facebook.
5. Implement the ability to redirect the user to the home page after they have successfully logged in.

Here’s an example of how you can create a login component that allows users to sign in with Google or Facebook:

<template>
 <div class="container">
 <h1>Login</h1>
 <button @click="signInWithGoogle" class="btn btn-primary">Sign in with Google</button>
 <button @click="signInWithFacebook" class="btn btn-primary">Sign in with Facebook</button>
 </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/auth';

export default {
 methods: {
 signInWithGoogle() {
 const provider = new firebase.auth.GoogleAuthProvider();
 firebase.auth().signInWithPopup(provider)
 .then(() => {
 this.$router.push('/');
 })
 .catch(error => {
 console.error(error);
 });
 },
 signInWithFacebook() {
 const provider = new firebase.auth.FacebookAuthProvider();
 firebase.auth().signInWithPopup(provider)
 .then(() => {
 this.$router.push('/');
 })
 .catch(error => {
 console.error(error);
 });
 },
 },
};
</script>

In this example, we use the Firebase Authentication SDK to sign in with Google or Facebook. When the user clicks on the “Sign in with Google” or “Sign in with Facebook” buttons, we call the signInWithPopup method to show a pop-up window where the user can sign in. Once the user has successfully logged in, we use the Vue.js router to redirect the user to the home page. If there is an error during the login process, we log the error to the console.

To send and receive messages in real-time in your Vue.js chat room app using Firebase, you can use Firebase Realtime Database or Cloud Firestore. Firebase Realtime Database is a NoSQL cloud-hosted database that stores and syncs data in real-time, while Cloud Firestore is a more advanced and scalable NoSQL cloud-hosted database that also stores and syncs data in real-time.

Here are the general steps to set up Firebase Realtime Database or Cloud Firestore for your Vue.js chat room app:

1. Set up a Firebase project in the Firebase console.
2. Enable Firebase Realtime Database or Cloud Firestore in the Firebase console.
3. Install the Firebase SDK for JavaScript in your project.
4. Create a Vue.js component for the chat room that listens for new messages from Firebase Realtime Database or Cloud Firestore and displays them to the user.
5. Implement the ability for the user to send a message to Firebase Realtime Database or Cloud Firestore.

Here’s an example of how you can create a chat room component that sends and receives messages in real-time using Firebase Realtime Database:

<template>
 <div class="container">
 <h1>Chat Room</h1>
 <div v-for="(message, index) in messages" :key="index">
 <p>{{ message.user }}: {{ message.content }}</p>
 </div>
 <form @submit.prevent="sendMessage">
 <input type="text" v-model="newMessage" />
 <button type="submit" class="btn btn-primary">Send</button>
 </form>
 </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/database';

export default {
 data() {
 return {
 messages: [],
 newMessage: '',
 };
 },
 created() {
 const messagesRef = firebase.database().ref('messages');
 messagesRef.on('child_added', snapshot => {
 const message = snapshot.val();
 this.messages.push(message);
 });
 },
 methods: {
 sendMessage() {
 const user = firebase.auth().currentUser;
 const messagesRef = firebase.database().ref('messages');
 const newMessageRef = messagesRef.push();
 newMessageRef.set({
 user: user.displayName,
 content: this.newMessage,
 });
 this.newMessage = '';
 },
 },
};
</script>

In this example, we listen for new messages from Firebase Realtime Database by calling the on method on the messagesRef database reference. Whenever a new child is added to the messages node in the database, the child_added event is triggered and we push the new message to the messages array in our Vue.js component.

To send a new message, we use the push method on the messagesRef database reference to create a new child node under the messages node, and then we use the set method on the new child node to set the user and content of the message. We also clear the newMessage input field after the message has been sent.

This is just one example of how you can implement real-time messaging in your Vue.js chat room app using Firebase. Depending on your app’s requirements, you may need to customize this implementation or use Cloud Firestore instead of Firebase Realtime Database.

To add the ability to delete messages in your Vue.js chat room app using Firebase, you can add a “delete” button next to each message in the chat room component that, when clicked, deletes the message from the Firebase Realtime Database or Cloud Firestore.

Here’s an example of how you can add a “delete” button to the chat room component and delete messages from Firebase Realtime Database:

<template>
 <div class="container">
 <h1>Chat Room</h1>
 <div v-for="(message, index) in messages" :key="index">
 <p>{{ message.user }}: {{ message.content }}</p>
 <button class="btn btn-danger" @click="deleteMessage(index)">Delete</button>
 </div>
 <form @submit.prevent="sendMessage">
 <input type="text" v-model="newMessage" />
 <button type="submit" class="btn btn-primary">Send</button>
 </form>
 </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/database';

export default {
 data() {
 return {
 messages: [],
 newMessage: '',
 };
 },
 created() {
 const messagesRef = firebase.database().ref('messages');
 messagesRef.on('child_added', snapshot => {
 const message = snapshot.val();
 message.id = snapshot.key;
 this.messages.push(message);
 });
 messagesRef.on('child_removed', snapshot => {
 const deletedMessage = snapshot.val();
 deletedMessage.id = snapshot.key;
 const index = this.messages.findIndex(message => message.id === deletedMessage.id);
 if (index !== -1) {
 this.messages.splice(index, 1);
 }
 });
 },
 methods: {
 sendMessage() {
 const user = firebase.auth().currentUser;
 const messagesRef = firebase.database().ref('messages');
 const newMessageRef = messagesRef.push();
 newMessageRef.set({
 user: user.displayName,
 content: this.newMessage,
 });
 this.newMessage = '';
 },
 deleteMessage(index) {
 const message = this.messages[index];
 const messagesRef = firebase.database().ref('messages');
 messagesRef.child(message.id).remove();
 },
 },
};
</script>

In this example, we add a “delete” button to each message in the v-for loop, and we bind the click event to the deleteMessage method in our Vue.js component. When the button is clicked, we pass the index of the message to the deleteMessage method.

In the deleteMessage method, we first retrieve the message from the messages array using the index, and then we use the remove method on the message’s database reference to delete the message from Firebase Realtime Database. We also listen for the child_removed event on the messagesRef database reference and remove the deleted message from the messages array in our Vue.js component.

This is just one example of how you can implement message deletion in your Vue.js chat room app using Firebase. Depending on your app’s requirements, you may need to customize this implementation or use Cloud Firestore instead of Firebase Realtime Database.

To style your Vue.js chat room app with CSS, you can use a variety of techniques, such as inline styles, external style sheets, or CSS frameworks like Bootstrap or Bulma.

Here’s an example of how you can use inline styles to style the chat room component:

<template>
 <div class="container">
 <h1 style="font-size: 24px; font-weight: bold;">Chat Room</h1>
 <div v-for="(message, index) in messages" :key="index" style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
 <p style="font-size: 16px; margin: 0;">{{ message.user }}: {{ message.content }}</p>
 <button class="btn btn-danger" @click="deleteMessage(index)" style="margin-top: 5px;">Delete</button>
 </div>
 <form @submit.prevent="sendMessage" style="margin-top: 20px;">
 <input type="text" v-model="newMessage" style="padding: 5px; border: 1px solid #ccc; width: 100%; margin-bottom: 10px;" />
 <button type="submit" class="btn btn-primary" style="padding: 5px 10px;">Send</button>
 </form>
 </div>
</template>