Working with Vue.js
By Jack Franklin, Michael Wanyoike, Ahmed Bouchefra and
()
About this ebook
Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.
If you're an experienced developer looking to make a start with Vue, this book is for you. It provides a rapid introduction to the key topics that you'll need to understand. It contains:
- Getting up and Running with the Vue.js 2.0 Framework by Jack Franklin
- Getting Started with Vuex: a Beginner's Guide by Michael Wanyoike
- A Beginner's Guide to Vue CLI by Ahmed Bouchefra
- A Beginner's Guide to Working With Components in Vue by Kingsley Silas
- A Beginner's Guide to Working with Forms in Vue by Kingsley Silas
- How to Conditionally Apply a CSS Class in Vue.js by Chad Campbell
- How to Replace jQuery with Vue by Nilson Jacques
- Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps by Olayinka Omole
- Optimize the Performance of a Vue App with Async Components by Michiel Mulders
Jack Franklin
Jack is a JavaScript and Ruby Developer working in London, focusing on tooling, ES2015 and ReactJS.
Related to Working with Vue.js
Related ebooks
Vue.js: 11 Practical Projects Rating: 0 out of 5 stars0 ratingsLearn Vue.js: The Collection Rating: 0 out of 5 stars0 ratingsVue.js: Tools & Skills Rating: 0 out of 5 stars0 ratingsExploring Web Components: Build Reusable UI Web Components with Standard Technologies (English Edition) Rating: 0 out of 5 stars0 ratingsBlazor WebAssembly by Example: A project-based guide to building web apps with .NET, Blazor WebAssembly, and C# Rating: 0 out of 5 stars0 ratingsYour First Week With Node.js Rating: 0 out of 5 stars0 ratingsReact Projects..: Build advanced cross-platform projects with React and React Native to become a professional developer Rating: 0 out of 5 stars0 ratingsVue.js for Jobseekers: A complete guide to learning Vue.js, building projects, and getting hired (English Edition) Rating: 0 out of 5 stars0 ratingsReal-World Next.js: Build scalable, high-performance, and modern web applications using Next.js, the React framework for production Rating: 0 out of 5 stars0 ratingsJump Start Vue.js Rating: 4 out of 5 stars4/5Extending Jenkins Rating: 0 out of 5 stars0 ratingsInstant Highcharts Rating: 0 out of 5 stars0 ratingsLearning Highcharts 4 Rating: 0 out of 5 stars0 ratingsFrom Zero to Market with Flutter Rating: 0 out of 5 stars0 ratingsStep-by-Step Angular Routing: Learn To Create client-side and Single Page Apps with Routing and Navigation Rating: 0 out of 5 stars0 ratingsPractical Django 2 and Channels 2: Building Projects and Applications with Real-Time Capabilities Rating: 0 out of 5 stars0 ratingsNode Web Development, Second Edition Rating: 0 out of 5 stars0 ratingsMeteor in Action Rating: 0 out of 5 stars0 ratingsHighcharts Essentials Rating: 0 out of 5 stars0 ratingsjQuery Mobile Web Development Essentials - Third Edition Rating: 0 out of 5 stars0 ratingsMastering Ext JS - Second Edition Rating: 0 out of 5 stars0 ratingsReact and React Native: Build cross-platform JavaScript and TypeScript apps for the web, desktop, and mobile Rating: 0 out of 5 stars0 ratings50 Recipes for Programming Node.js Rating: 3 out of 5 stars3/5Mastering Postman: A Comprehensive Guide to Building End-to-End APIs with Testing, Integration and Automation Rating: 0 out of 5 stars0 ratingsOpenID Connect A Clear and Concise Reference Rating: 0 out of 5 stars0 ratingsLearn Vue.js 2.0 in 7 Days: Journey through Vue.js Rating: 0 out of 5 stars0 ratingsParallel Programming with C# and .NET Core: Developing Multithreaded Applications Using C# and .NET Core 3.1 from Scratch Rating: 0 out of 5 stars0 ratingsIntroducing Deno: A First Look at the Newest JavaScript Runtime Rating: 0 out of 5 stars0 ratingsJavaScript Rating: 0 out of 5 stars0 ratings
Programming For You
Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5PYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5Linux: Learn in 24 Hours Rating: 5 out of 5 stars5/5C# Programming from Zero to Proficiency (Beginner): C# from Zero to Proficiency, #2 Rating: 0 out of 5 stars0 ratingsC Programming For Beginners: The Simple Guide to Learning C Programming Language Fast! Rating: 5 out of 5 stars5/5Python for Data Science For Dummies Rating: 0 out of 5 stars0 ratingsMastering Windows PowerShell Scripting Rating: 4 out of 5 stars4/5Programming Arduino: Getting Started with Sketches Rating: 4 out of 5 stars4/5SQL All-in-One For Dummies Rating: 3 out of 5 stars3/5HTML in 30 Pages Rating: 5 out of 5 stars5/5Spies, Lies, and Algorithms: The History and Future of American Intelligence Rating: 4 out of 5 stars4/5JavaScript Demystified Rating: 4 out of 5 stars4/5Mastering C# and .NET Framework Rating: 5 out of 5 stars5/5Gray Hat Hacking the Ethical Hacker's Rating: 5 out of 5 stars5/5Coding with JavaScript For Dummies Rating: 0 out of 5 stars0 ratingsBeginning Programming with C++ For Dummies Rating: 4 out of 5 stars4/5Tiny Python Projects: Learn coding and testing with puzzles and games Rating: 4 out of 5 stars4/5Python: Learn Python in 24 Hours Rating: 4 out of 5 stars4/5USB Complete: The Developer's Guide Rating: 4 out of 5 stars4/5Linux Command-Line Tips & Tricks Rating: 0 out of 5 stars0 ratingsLearning Google Apps Script Rating: 4 out of 5 stars4/5Python for Beginners: Learn the Fundamentals of Computer Programming Rating: 0 out of 5 stars0 ratings
Reviews for Working with Vue.js
0 ratings0 reviews
Book preview
Working with Vue.js - Jack Franklin
Preface
Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.
If you're an experienced developer looking to make a start with Vue, this book is for you. It provides a rapid introduction to the key topics that you'll need to understand. It contains:
Getting up and Running with the Vue.js 2.0 Framework by Jack Franklin
Getting Started with Vuex: a Beginner’s Guide by Michael Wanyoike
A Beginner’s Guide to Vue CLI by Ahmed Bouchefra
A Beginner’s Guide to Working With Components in Vue by Kingsley Silas
A Beginner’s Guide to Working with Forms in Vue by Kingsley Silas
How to Conditionally Apply a CSS Class in Vue.js by Chad Campbell
How to Replace jQuery with Vue by Nilson Jacques
Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps by Olayinka Omole
Optimize the Performance of a Vue App with Async Components by Michiel Mulders
Who Should Read This Book?
This book is for developers with experience of JavaScript.
Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
A Perfect Summer's Day
It was a lovely day for a walk in the park.
The birds were singing and the kids were all back at school.
Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:
function animate() {
⋮
new_variable = Hello
;
}
Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/responsive-web-
➥design-real-user-testing/?responsive1");
You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings
Hey, You!
Tips provide helpful little pointers.
Ahem, Excuse Me ...
Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.
Make Sure You Always ...
... pay attention to these important points.
Watch Out!
Warnings highlight any gotchas that are likely to trip you up along the way.
Chapter 1: Getting up and Running with the Vue.js 2.0 Framework
by Jack Franklin
As soon as the popular JavaScript framework Vue.js released v2, I was eager to give it a spin and see what it’s like to work with. As someone who’s pretty familiar with Angular and React, I was looking forward to seeing the similarities and differences between them and Vue.
Vue 2 sports excellent performance stats, a relatively small payload (the bundled runtime version of Vue weighs in at 30KB once minified and gzipped), along with updates to companion libraries like vue-router and Vuex, the state management library for Vue. There’s far too much to cover in just one article, but keep an eye out for some later articles where we’ll look more closely at various libraries that couple nicely with the core framework.
Inspiration from Other Libraries
As we go through this tutorial, you’ll see many features that Vue has that are clearly inspired by other frameworks. This is a good thing; it’s great to see new frameworks take some ideas from other libraries and improve on them. In particular, you’ll see Vue’s templating is very close to Angular’s, but its components and component lifecycle methods are closer to React’s (and Angular’s, as well).
One such example of this is that, much like React and nearly every framework in JavaScript land today, Vue uses the idea of a virtual DOM to keep rendering efficient. Vue uses a fork of snabbdom, one of the more popular virtual DOM libraries. The Vue site includes documentation on its Virtual DOM rendering, but as a user all you need to know is that Vue is very good at keeping your rendering fast (in fact, it performs better than React in many cases), meaning you can rest assured you’re building on a solid platform.
Components, Components, Components
Much like other frameworks these days, Vue’s core building block is the component. Your application should be a series of components that build on top of each other to produce the final application. Vue.js goes one step further by suggesting (although not enforcing) that you define your components in a single .vue file, which can then be parsed by build tools (we’ll come onto those shortly). Given that the aim of this article is to fully explore Vue and what it feels like to work with, I’m going to use this convention for my application.
A Vue file looks like so:
This is my HTML for my component
export default {
// all code for my component goes here
}
/* CSS here
* by including `scoped`, we ensure that all CSS
* is scoped to this component!
*/
Alternatively, you can give each element a src attribute and point to a separate HTML, JS or CSS file respectively if you don’t like having all parts of the component in one file.
Setting Up a Project
Whilst the excellent Vue CLI exists to make setting up a full project easy, when starting out with a new library I like to do it all from scratch so I get more of an understanding of the tools.
These days, webpack is my preferred build tool of choice, and we can couple that with the vue-loader plugin to support the Vue.js component format that I mentioned previously. We’ll also need Babel and the env preset, so we can write all our code using modern JavaScript syntax, as well as the webpack-dev-server, which will update the browser when it detects a file change.
Let’s initialize a project and install the dependencies:
mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Then create the initial folders and files:
mkdir src
touch webpack.config.js src/index.html src/index.js
The project structure should look like this:
.
├── package.json
├── package-lock.json
├── src
│ ├── index.html
│ └── index.js
└── webpack.config.js
Now let’s set up the webpack configuration. This boils down to the following:
Tell webpack to use the vue-loader for any .vue files
Tell webpack to use Babel and the env preset for any .js files
Tell webpack to generate an HTML file for the dev-server to serve, using src/index.html as a template:
//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require(html-webpack-plugin
)
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebPackPlugin({
template: