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=""></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:

Sign up for our newsletter