Home Web Development Vue.js 3 Cookbook

Vue.js 3 Cookbook

By Heitor Ramon Ribeiro
books-svg-icon Book
Subscription FREE
eBook + Subscription €14.99
eBook €28.99
Print + eBook €37.99
READ FOR FREE Free Trial for 7 days. €14.99 p/m after trial. Cancel Anytime! BUY NOW BUY NOW BUY NOW
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
READ FOR FREE Free Trial for 7 days. €14.99 p/m after trial. Cancel Anytime! BUY NOW BUY NOW BUY NOW
Subscription FREE
eBook + Subscription €14.99
eBook €28.99
Print + eBook €37.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
  1. Free Chapter
    Introducing TypeScript and the Vue Ecosystem
About this book
Vue.js is a progressive web framework for building professional user interfaces for your web applications. With Vue.js 3, the frontend framework is reinforced with architectural enhancements, new base languages, new render processes, and separated core components. The book starts with recipes for implementing Vue.js 3’s new features in your web development projects and migrating your existing Vue.js apps to the latest version. You will get up and running with TypeScript with Vue.js and find succinct solutions to common challenges and pitfalls faced in implementing components, derivatives, and animation, through to building plugins, adding state management, routing, and developing complete single-page applications (SPAs). As you advance, you'll discover recipes to help you integrate Vue.js apps with Nuxt.js in order to add server-side rendering capabilities to your SPAs. You'll then learn about the Vue.js ecosystem by exploring modern frameworks such as Quasar, Nuxt.js, Vuex, and Vuetify in your web projects. Finally, the book provides you with solutions for packaging and deploying your Vue.js apps. By the end of this Vue.js book, you'll be able to identify and solve challenges faced in building Vue.js applications and be able to adopt the Vue.js framework for frontend web projects of any scale.
Publication date:
September 2020
Publisher
Packt
Pages
562
ISBN
9781838826222

 
Introducing TypeScript and the Vue Ecosystem

TypeScript is a new Vue-based language, fully supported on Vue 3. It is now possible to use typed JSX (also know as TSX), type annotation, static verification of the code, and much more.

The Vue ecosystem is getting bigger each day, so to help us, the Vue team has developed some tools to improve project handling and management. Those tools are Vue CLI and Vue UI, which today are the main tools for local Vue development.

The Vue CLI tool is the beginning of every project; with it, you will be able to select the basic features or just a preset you had made, to create a new Vue project. After a project is created, you can use Vue UI to manage the project, add new features, check the status of the project, and do almost everything you previously needed to do in the command-line interface (CLI), with the addition of more features.

In these chapters, you learn more about TypeScript as a superset on JavaScript and how to use the power of the Vue CLI tool and Vue UI together to get a whole application up and running.

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

  • Creating a TypeScript project
  • Understanding TypeScript
  • Creating your first TypeScript class
  • Creating your first project with Vue CLI
  • Adding plugins to a Vue CLI project with Vue UI
  • Adding TypeScript to a Vue CLI project
  • Creating your first TypeScript Vue component with vue-class-component
  • Creating a custom mixin with vue-class-component
  • Creating a custom function decorator with vue-class-component
  • Adding custom hooks to vue-class-component
  • Adding vue-property-decorator to vue-class-component
 

Technical requirements

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

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 it, open PowerShell as administrator and execute the following command:
> npm install -g windows-build-tools.

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

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

To install TypeScript, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install -g typescript
 

Creating a TypeScript project

TypeScript is a typed superset of JavaScript that, when compiled, gives us plain JavaScript code. It seems like a new language, but in the end, it's still JavaScript.

What is the advantage of using TypeScript? The main advantage is the typed syntax, which helps with static checking and code refactoring. You can still use all the JavaScript libraries and program with the latest ECMAScript features out of the box.

When compiled, TypeScript will deliver a pure JavaScript file that can run on any browser, Node.js, or any JavaScript engine that is capable of executing ECMAScript 3 or newer versions.

                                                                                                                                           
About the Author
  • Heitor Ramon Ribeiro

    Heitor Ramon Ribeiro has been developing for the web for over 15 years. Heitor has built enterprise applications for businesses using Vue.js and the principles of clean architecture, shifting his course from legacy applications to the new world of single-page applications (SPAs) and progressive web applications (PWAs). He thinks that almost anything is possible today with a browser and that JavaScript is the future of programming. When he’s not programming or leading a frontend team, he’s with his family having fun, streaming their gaming sessions, or playing some first-person shooter games.

    Browse publications by this author
Latest Reviews (4 reviews total)
The CookBook format makes it interesting to learn the framework through examples
Excelent book from experienced author. The book is well divided into chapters. Lots of external resources to study. I would like to read more such good books.
Great content, Great content
Recommended For You
Vue.js 3 Cookbook
Unlock this book and the full library FREE for 7 days
Start now