Learning is a unique experience. It requires relating our previous background to new concepts and patterns. Those experiences are remembered specifically and each person recalls a concept a little differently. I remember a picture of a ball falling with labelled symbols, others might remember the equation, and some may remember the sounds of the physics hall. Recollection can be a little different and thus, learning requires varied approaches.
Vue is a unique JavaScript framework because it can be approached from several different angles and utilized in a wide variety of applications. Where other frameworks provide strong opinions, Vue remains flexible. This flexibility benefits those trying to master it, as they can iteratively learn and extend Vue to deliver more functionality in an accessible way for developers.
It can seem daunting to learn a framework, but Vue helps out by providing multiple ways to set up a project and get started. Without exploring all of the options, getting started is difficult. What follows are a series of gateways to learning Vue. These should help align your learning strategy and highlight relevant framework features for getting started:
- Just bind some data. A great starting point for those new to web applications. Data binding also offers an easy way to prototype out simple webpages that are populated by a Vue application. Online tooling helps to deliver a rich environment for learning the basic building blocks to developing with Vue.
- Use the vue-cli to generate a project. An introduction point for those familiar with other web development frameworks like React and Angular. This approach uses the CLI and has the added benefit of exposing how Vue is configured for those familiar with build toolchains.
- Import Vue from a CDN and use standard files. Recommended for those who aren't familiar with modern framework tooling and build systems but are familiar with JavaScript, HTML, and CSS. A simple import allows full Vue functionality on existing web applications to help explore where Vue can improve things.
- Setup a Vue project with types. TypeScript typings can help those who enjoy working with an IDE to help discover Vue's APIs and learn how to use it organically. Those more comfortable using class focused languages and objects will find something familiar on this path.
Check out the corresponding section below that sounds most familiar or approachable. Building a base understanding that is familiar will help you learn more about the framework by establishing foundational mental connections. If you're curious, take a look at the other sections but don't feel pressured to take in everything.
Just Bind Some Data
Data binding is the process of tying data to an HTML element or attribute. When the data changes, the page updates automatically.
This core frontend concept is an exciting one to use when beginning to learn Vue because it offers a lot of functionality without needing to know how Vue works. Here's a simple example:
See the Pen Vue Template Bind Example by Ben Hofferber (@hoffination) on CodePen.
The Vue docs have a good reference for what's going on here
This code is running on an online editor called CodePen which simply allows experimentation with Vue code. Having something running in a browser environment like this is a great place to start learning because everything is available in one place. CodePen also supports hot-reloading which will re-render the entire page whenever code is changed. This is the perfect playground for getting started with binding because it's very easy to visualize changes.
This understanding of bindings will ignite curiosity. "What more can I do with this?" "I wonder what happens if I change this?" By understanding how data can be rendered it becomes interesting what might be possible.
This simple curiosity drove me to keep learning. Here's a rough prototype that I built when I was first learning Vue and was deciding how to render some data for Farmers Markets:
See the Pen Market Vue Example by Ben Hofferber (@hoffination) on CodePen.
I learned a lot on this example because I just wanted to keep getting something working. First I wanted to use some actual data to populate a list of the markets. Next, I actually wanted to show the details of a market. As a finishing touch I wanted to add a little "routing" to change the whole view when a market was selected. Each of these steps motivated me to learn what I needed to get the next feature working the way I intended.
With a simple binding introduction, those new to frameworks have everything they need to get started learning more Vue and modern web development:
Generate A Project With The vue-cli
Learning a new framework can be easier with an example code base. As the creatives of history have frequently stated, nothing is more intimidating than a blank page. The vue-cli can create an application with everything a basic Vue app needs including a webpack build system. The instructions can be found in the Vue docs.
It's fine to just click through, with 'ENTER', on everything selected as default during the setup process. The settings there are extra and aren't required for getting started.
The CLI has a lot of other advantages. It's opinionated about folder structure and defines where assets, components, and tests are located. This folder structure can be easily changed, but it's convenient to have the structure setup for us. Using .vue files, it shows framework users how to structure files and includes all of the required pieces. The Webpack based build system does the work to compile the project and serve it up in a state where changes are automatically reloaded to visualize code changes.
Because it's a full-featured project, those familiar with other frameworks can make connections to how they worked with other frameworks in the past. This builds curiosity. "What's different here?" "I wonder how Vue handles that issue..." "I've never heard of this feature..." These questions will drive more learning.
Here's an interactive example of a simple loading bar that I added to a basic Vue template project:
See the Sandbox for Vue Loading Spinner by Ben Hofferber on CodeSandbox.
By having all of the code for a component in one .vue file, it's easy to see everything at once and to quickly debug and iterate on components. CodeSandbox is great for prototyping out from the vue-cli base configuration without having to actually install anything locally and it provides a great way to share code.
Here are some things I've found interesting that may ignite further curiosity:
Standard Files using a CDN import
Vue can be initialized with a simple import via a JavaScript file over a CDN (Content Delivery Network) in the HTML. This allows users brand new to Vue to experiment with the framework just like any other JavaScript library they might be used to (Bootstrap, JQuery, etc.).
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
Once this script is added as an import it's easy to start using it as Vue now exists on the global namespace. Here's a simple example of how it's used at its most basic:
See the Pen Vue Template Bind Example by Ben Hofferber (@hoffination) on CodePen.
The Vue docs have a good reference for what's going on here. I used CodePen to create this example and CodePen actually uses a CDN to import Vue.
Now there isn't a lot of code here and it's easy to hook in and start using the framework. Setting up a basic usage of Vue offers good starting point. Developers can expand on their understanding by adding functionality as needs arise. "Now that I'm getting names and variables from JavaScript, how can I display this list?" "Is there a way to make that appear when a user clicks on this button?"
This direct application against a problem is a great way to use that curiosity to learn. When going to the Vue docs later, there are now connections that can be built upon to start discovering more functionality that Vue offers.
Here's a simple HTML and CSS sidemenu prototype that could be expanded:
See the Pen Simple Sidemenu by Ben Hofferber (@hoffination) on CodePen.
To start going much farther, I'd need to start manipulating the DOM directly or actually creating multiple pages that can be linked together. To handle links I'd need to stop using this CodePen and move off to a local copy where I can define multiple HTML files to use. There isn't a big problem with doing that, but Vue can help this prototype expand its functionality quickly.
See the Pen Simple Sidemenu - Vue Enhanced by Ben Hofferber (@hoffination) on CodePen.
Now the sidemenu is clickable and the page displays differently depending on what was clicked. The developer is able to iteratively learn and hook into parts of Vue's functionality to handle problems as they arise. By focusing on utilizing Vue as a helper rather than the core of the application, it becomes much more approachable. Being more approachable makes learning easier because it doesn't seem like such a great challenge to overcome.
Working off of a CDN can limit developers when it's time to ship to production. Having a CDN dependency can be a security vulnerability and the application will be slowed down by having to download the vue-compiler which is shipped within the CDN. However there's a lot to learn and a lot that can be accomplished without having to use anything other than JavaScript, CSS, and HTML. Here are some of my favourite framework plugins that can be used from a CDN:
Setup a Typed Vue Environment
TypeScript typings help developers grow an understanding of a new API organically. By having access to method definitions and the attached docs they can more easily grow an understanding while developing. By being able to see the types involved and by utilizing static type checking, it is also easier to find errors and refactor code. Seeing a new method in the auto-complete list could encourage investigation or perhaps encourage developers to dive into the Vue source code to better understand just what the API is providing.
Vue ships with support for TypeScript 2.6+ typings in its core libraries (vue, vue-router, and vuex). Also, the upcoming @vue/cli v3 will fully support TypeScript based projects out of the box moving forward. Until then, developers can rely on community projects or a few custom tweaks to get started quickly. Here's an example of TypeScript enabled on a simple vue-cli application via .vue files:
See the Sandbox for Vue TypeScript Example by Ben Hofferber on CodeSandbox.
It's nice to be able to make just a few changes to enable types. The CLI does a great job of allowing script tags to be flexible by simply adding lang="ts". This functionality is made possible by the vue-loader handling all of the magic in the .vue files.
To take full advantage of the typings it's important to use an editor that provides good support for bindings. A good choice is Visual Studio Code which has great TypeScript support out of the box. Additionally, the plugin Vetur is handy for enabling Vue specific language features within the editor.
With a great environment setup and a few simple configurations to setup TypeScript, developers are ready to start exploring the API with types organically. I'll leave you with a few additions for type-savy developers who are interested in more aspects of Vue: