Book Image

Frontend Development Projects with Vue.js 3 - Second Edition

By : Maya Shavin, Raymond Camden, Clifford Gurney, Hugo Di Francesco
5 (2)
Book Image

Frontend Development Projects with Vue.js 3 - Second Edition

5 (2)
By: Maya Shavin, Raymond Camden, Clifford Gurney, Hugo Di Francesco

Overview of this book

Are you looking to use Vue.js 3 for building web apps but don't know where to begin? Frontend Development Projects with Vue.js 3 will help you get to grips with the core concepts of this JavaScript framework using practical examples that simulate real-world web projects. With this updated edition, you’ll experience all aspects of the new and improved Vue.js 3 as you work on mini projects such as a chat interface, a shopping cart, a price calculator, a to-do app, and a profile card generator for storing contact details. These realistic projects are presented as bite-size exercises that you can enjoy even as you challenge yourself. Throughout the book, you'll discover how to manage data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control application flow. You'll also work with Vite and Vue DevTools and learn how to handle transition and animation effects for an engaging user experience. Finally, you’ll see how to test your app and deploy it to the web. By the end of this Vue.js book, you'll have the skills that enable you to work like an experienced Vue developer to build professional apps that can be used by others and have the confidence to tackle real-world frontend web development problems.
Table of Contents (20 chapters)
1
Part 1: Introduction and Crash Course
5
Part 2: Building Your First Vue App
11
Part 3: Global State Management
14
Part 4: Testing and Application Deployment

Installing Pinia

To use Pinia in a Vue application, you’ve got two ways to add it. First, when creating a new Vue application via the standard method (npm init vue@latest), one of the questions asked will be whether you wish to include Pinia. Simply say Yes here:

Figure 10.2 – Indicating whether you wish to add Pinia to a new Vue project

Figure 10.2 – Indicating whether you wish to add Pinia to a new Vue project

If you have an existing Vue 3 application, adding support is nearly as easy. First, in the project, add Pinia via npm: npm install pinia. Next, you need to include Pinia in the application. Your main.js file (located in the /src directory) will look like so:

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Begin by importing Pinia:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
createApp(App).mount('#app')

Then, modify the createApp line...