In this video, we’re going to see if Vue is a framework that can help you build the kind of apps you want to build in your company or for your personal projects.

If you read the Vue.js docs it says something like “Vue is an incrementally adoptable ecosystem that scales between a library and a full-featured framework.”.

This is a fancy way of saying that you can use Vue for very simple page functionality or very complex functionality. You can get Vue to do one little job on your page, or you can get it to completely generate your app. It can be used for rapidly developing a prototype, or it can be used for a highly-stable enterprise app.

Let’s take a look at some examples of the kind of apps you can build with Vue.

Simple page functionality

If you’ve come from a backend language like PHP or Ruby you may be used to adding a script tag to a page along with some basic JavaScript or jQuery in order to add some interactivity to the page.

Can Vue.js be used this way? Yes it can. Take for example this site, Vuebnb, which is a room booking site that I teach you to build in my book Full-Stack Vue.js 2 and Laravel 5.

What you can see here is a server rendered content page that is coming from the Laravel backend.

To enhance the page, I’ve added some Vue-based widgets, including a modal window and image carousel, giving users a really nice way to view additional images of the property.

Since Vue is so small and compact, adding a Vue script this way doesn’t add significant bulk to your page.

Basic web apps

Can we use Vue to make simple web apps? Specifically, can we use it without requiring a build process that most frontend frameworks need?

Yes! Vue is great for this. What you see here is an application I teach you to build in my course Build Your First Vue.js App. This app is an eCommerce shopping cart with a fair bit of dynamic functionality.

What’s interesting is this app is written entirely in ES5 JavaScript using native browser features, so we can send the raw JavaScript to the browser and it works perfectly without Webpack or any other compiling.

Single-page applications

Let’s take things up another notch now. Can you create single-page applications with Vue?

Yes, Vue is great for this, especially when you use it in conjunction with Vue Router, which we’ll talk about later.

The app you can see here is Vue.js Cinema, which I show you how to build in my second Vue course, Build A Vue.js Single-Page App with Vue Router.

This is a component-based web app with the SPA architecture, and unlike the previous app we looked at, this one uses modern JavaScript and a Webpack build flow.

Since it’s a single-page app, you’ll see that when we visit different pages, the navigation is almost instant and doesn’t require the site to reload.

Using this kind of architecture provides a really fast and seemless experience for users.

Full-stack authenticated applications

Could we use Vue to create a data-driven frontend app that’s powered by an API? Perhaps with a backend like Laravel, Rails, Django or even WordPress? You can.

It works well with secured APIs too, and GraphQL, and with real-time data through web sockets.

Coming back to Vuebnb, the site also features a user login. The frontend app stores the login token in a cookie, and we can use that to make secure API calls to the backend.

This means we can have features like this save button, which allows authenticated users to save their favorite listings without requiring a page reload, again creating a seemless experience.

Enterprise applications

Finally, can Vue.js be used to create an enterprise application? By that I mean a high performance app with stability in production and ease of maintenance.

You can probably guess what I’m going to say…yes!

Take a look at this app here, it’s called PrintBay, and it’s the case study from my Enterprise Vue course. This is a full-stack Vue and Node app.

From the browser, it looks just like a regular app, so we’ll have to check out the code to see the enterprise aspects.

Looking in the file structure, you’ll see that this app has a complete suite of tests including end-to-end test, which are browser-automation tests, and unit tests for both the frontend client app, and the server.

For the frontend Vue app, we use the test frameworks Jest and Vue Test Utils.

I’ve also set up this project up with continuous integration which means that we can only deploy code changes if all these tests pass.

This a great way of ensuring high stability in production, and its makes the app appropriate for enterprise scenarios.

Wrap up

Hopefully you can see from this video that Vue is an extremely versatile frontend framework. If you only have a simple job, Vue is not going to make you jump through hoops and have crazy complex setups.

On the other hand, if you want do want to do something more ambitious, Vue has got you covered there as well, with all of the modern features from the cutting-edge of frontend development.