What is the Vue.js JavaScript Framework?
Let's go through what the Vue.js JavaScript framework is and how we can start using it in our web development projects to build some cool and amazing online experiences!
What is Vue.js? Vue is a JavaScript framework that is used to make front end and user interactive applications. It has been popularised by its ease of use and readability that makes it faster and easier to learn than some of the other JavaScript frameworks out there.
It is a component-based framework with the code focusing on HTML, CSS and JavaScript (recently a big pickup on Typescript, but I’ll go into that in another post).
I’ve been working with Vue for the last 6 years (as of writing this post, so probably longer now 😅), started with the Vue 2 Options API and have gone through the re-write to changing projects to the Vue 3 and the Composition API. Now if you’re reading this, it probably doesn’t mean much to you at the moment, but for those who have been working with Vue.js, this was a big change.
Yes, it was a good change, but a big change none-the less which meant nearly a full re-write of the entire code base to work with the new implementation, it did allow to use the options API still from Vue 2, but eh, if you’re going to be updating the code base on, may as well implement it with the newer way and keep everything consistent, plus accounting for the plugins that needed to be updated/replaced too😅.
Anyway, enough of my ramblings about upgrading, as now, everything should be using Vue 3 and that is what we’ll be going through in any examples and explanations on what is Vue.js.
A quick history of Vue.js
A little history on Vue.js… It all started with Evan You, this Guy…
A former Google Engineer, who created Vue.js as a personal project to make a lightweight JavaScript framework without the extra complexity that other resources like Angular.js had.
Vue.js is fully open-sourced, so it’s free and accessible for anyone to use in whatever way they choose with a huge community of support behind it. Vue has grown from a one-person side project to a thriving frontend framework with developers and companies around the world using it.
Now there multiple conferences around the world each year, projects that are built upon and resources specifically made for Vue.js.
Even looking at the current weekly downloads from npmjs.com, Vue.js has over 5, 000, 000 downloads in the last week from writing this post.
And if we look at the download average over the last year between some of the other popular frameworks, Vue.js is one of the leads (apart from React, which leads partly because it is backed by Meta, providing substantial financial support 😄)
So, yes, Vue.js is one of the most popular JavaScript frameworks at the moment and the Vue.js team is constantly working on and improving it, as well as the amazing community based documentation which I’ll pop in the resources section below.
Where Vue.js is being used
Vue.js is a versatile and flexible framework and is being used in all sorts of various applications, from small startups to big-league corporate sites. It’s being used to build websites, web-apps, even mobile apps via one of it’s branched off partners (nativescript-vue).
It’s popularity sits with it’s reactivity, and via its linked packages, state management when creating Single-Page Applications(SPAs), Progressive Web Applications(PWAs) and mobile apps.
A great site to see what is made with Vue.js is one called made with vue.js, which has a large category of loads of sites that use and implement the Vue framework:
An article by Alex Kugell(15 Global Websites Using Vue.js in 2024) wrote about which large global companies used Vue.js in their projects and this included places like Netflix, Adobe, Alibaba, Nintendo and more! you can view the full details of how these sites are implementing Vue.js in his post, as I’m just going through a quick highlight on what Vue.js is in this post. But his full list of sites he goes through and explains how they implement it is below:
Facebook
Netflix
Xiaomi
Adobe
The Motley Fool
Trivago
Alibaba
Gitlab
Behance
Nintendo
BMW
UpWork
Apple
9GAG
Google
As you can see, there are not only small companies and hobbyists using Vue.js, some of the largest companies in the world are using it.
Options API vs Composition API
Ok, so you heard me go on about the Options API and the Composition API at the start and you probably have no idea what I’m talking about with them.
They are 2 ways of it’s implementation with some differing features, functions and implementations between them (if you want the non jargon summary, feel free to scroll down a little to that bit).
The Options API was introduced with Vue version 2 and is a way of organizing the code/components with methods, computed properties, hooks with an options object. It’s pretty straight forward, clear and an organized structure that makes it easy to read and friendly for developers.
From the official vue.js website, an example of the Options API:
The Composition API was introduced in Vue version 3 and still allows for the full Options API to be used in the same way as previously. However, it allows a little more flexibility and efficiency to organize and reuse logic across components. This has a setup function for reactive state and focuses on reusable composable functions to manage more complex projects to make it a little more coherent and scalable. So it falls a little more under the composition-over-inheritance in software design.
From the official vue.js website, an example of the Composition API:
*NOTE: Both code examples do the same things.
Why Vue 3 now? Well Vue 2 went into end of life at end of 2023, meaning it’s not getting supported anymore, so if people want to keep receiving their updates and resources, then they need to upgrade.
Non jargon summary…
Now, you may have read both those explanations and I may have lost you in a little jargon, but to sum it up, everything should be using Vue 3 now and Vue 2 is referenced still because of the Options API (plus places are still working on upgrading) but Vue 3 can do both. Composition api means that it can help you write reusable simpler code… meaning less coding required to do the same work… which is always a plus! 😁
Even the the Official Vue.js Docs (Which to use) explain you can use either, or both depending on your project and it’s up to you:
If you are new to Vue, here's our general recommendation:
For learning purposes, go with the style that looks easier to understand to you. Again, most of the core concepts are shared between the two styles. You can always pick up the other style later.
For production use:
Go with Options API if you are not using build tools, or plan to use Vue primarily in low-complexity scenarios, e.g. progressive enhancement.
Go with Composition API + Single-File Components if you plan to build full applications with Vue.
The website also allows for the toggle of all their examples and code to switch between the Options and Composition API’s for reference:
How to start a Vue.js project
I’m not going to go into a huge amount of detail about starting a Vue.js Project, I’ll write another Post about that when I can, but this is just to get you kick started to build your first project or know how to get started with Vue.js.
Before going further, this assumes that you have Node.js version 18.3 or higher installed on your machine.
This is taken directly from the Vue.js official website quick start guide, they have done a great job setting through how to set it up!
Open your Terminal console window to the folder where you want to create your project and enter the below command:
npm create vue@latestThis will then start a prompt to go through and setup the project with the basic settings to kick off, you can choose whichever options you want:
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./<your-project-name>...
Done.If you don’t know which option to choose, or don’t know about it, just select No… you can always install it later.
Once it’s done, then you can go into the folder and install the required packages (npm install) and then run it on your computer (npm run dev):
cd <your-project-name>
npm install
npm run format
npm run devDepending on what you selected ion the setup options, you should now have the output after running the npm run dev command like the below:
And if you go to the url, it’ll load the page for you:
This has hot module replacement, so if you edit any code, the changes will be updated automatically to show in your browser, I use VS Code for my frontend editing, it has some great plugins to help and is the recommended editor. If you open the folder, you can see the full file structure in VS Code:
And directly from the Vue.js docs:
You should now have your first Vue project running! Note that the example components in the generated project are written using the Composition API and
<script setup>, rather than the Options API. Here are some additional tips:
The recommended IDE setup is Visual Studio Code + Vue - Official extension. If you use other editors, check out the IDE support section.
More tooling details, including integration with backend frameworks, are discussed in the Tooling Guide.
To learn more about the underlying build tool Vite, check out the Vite docs.
If you choose to use TypeScript, check out the TypeScript Usage Guide.
Resources
Here are some handy Vue.js Resources to help get started on your Vue.js Journey:
Vue.js official documentation: https://vuejs.org/guide/introduction
Vue CLI documentation: https://cli.vuejs.org/
Showcase of companies using Vue.js: https://trio.dev/websites-using-vue/
Official Vue.js website: https://vuejs.org/
Vue School: https://vueschool.io/
Vue Mastery: https://www.vuemastery.com/
Made with Vue.js: https://madewithvuejs.com/
VS Code: https://code.visualstudio.com/
Volar Vue Extension: https://marketplace.visualstudio.com/itemsitemName=Vue.volar
Conclusion
I’ve been using Vue.js for many years now and I love this framework. I may be biased, as it’s the first JavaScript framework I started with, but I’ve found it to be super easy to learn and pickup, plus the community has been great for support.
It’s definitely worth a play around with and it si getting bigger and better every day!
Hope this has helped and given you some resources to get started, it’s not a full depth guide on using it, but just some info on what it is and how to start.
Until next time, take care and happy dev-ing! 😁