Build an app from scratch with Vue.js
It’s hard to keep up with all the new JavaScript libraries and frameworks out there. React, Angular, Ember, Aurelia, Glimmer…where do you start?
Ideally, JavaScript developers would want to learn them all. But each option has its own prerequisites for jumping in and using them immediately. And some frameworks are appropriate for specified types of work. Our time is valuable!
What’s an option that requires no sharp learning curve, and can be picked up within a few hours?
Jump right into Vue fundamentals
Learn Vue with hands-on lessons and practice projects.
Vue is the brainchild of Evan You, a former engineer at Google Creative Labs. Evan’s job entailed a lot of UI prototypes, and he soon realized a need for a framework with 2-way data binding (seen in Angular) — but with a more approachable API and interface.
In February 2016, Evan began working on Vue full-time after his Patreon campaign caught a lot of traction in the developer community. The Vue team has since grown to 25, with a growing community of contributors.
Vue is not supported or backed financially by any major tech company like Google or Facebook (unlike React and Angular). If Github stars are any measure, Vue.js is at the top of the heap in popularity:
Vue is quickly becoming a preferred option for entry-level devs, small teams, and those dealing with tight budgets or deadlines. Currently very popular in China, Vue is moving its way to the west. Companies that use Vue in whole or in part include Alibaba, Behance, Grammarly, and Adobe.
What’s behind Vue’s continued popularity?
Benefits of Vue: Beginner-friendly#
React is currently the most widely used JavaScript framework in the world, but its learning curve is severely steep. While React enjoys a huge developer community, support and libraries, the cost of admission (your time) is high.
But for those of us getting started in the world of web development, or constrained by a small team or low budget, who has that time?
Vue is tailor-made for beginners. The guide, property names, and setup process will feel very familiar to those who have seen HTML, CSS, and JavaScript. Templates are written in HTML, which means you don’t need to know any other programming languages to read them.
Vue.js is progressive. You don’t need to jump into the deep end with Vue, you can adopt it incrementally. The core library is focused on the view layer only, making it easy to integrate with existing libraries and projects. Plus, the Vue API is simple enough to allow for very quick development.
Vue is a nice compromise between React and Angular — it features a virtual DOM (a popular feature of React), but offers custom directives and two-way data binding, like Angular.
While libraries like React require a knowledge of JSX, ES2016 or more specific forms of JavaScript, Vue just uses pure JavaScript. You can write an app and run it straight from your browser in very little time. Vue allows for JSX (practically a requirement for learning React), so React veterans can easily hop over to Vue.
Vue uses a declarative syntax that is easy to comprehend and remember for creating and handling events. As opposed to React’s component-based view engine, Vue is implemented as additional markup to HTML — basically a template model bound to a data model.
Benefits of Vue: Lightweight and fast#
All web developers are working with limited network bandwidth. In today’s world of mobile browsing, all web pages need to be small and fast.
The latest version of Vue (2.0) is proven to take less memory and run faster than the latest versions of React and Angular.
With a faster rendering pipeline, Vue allows you to build more complex web apps. Instead of spending valuable time optimizing code, you can spend more time working on the features and functionalities your users want.
Benefits of Vue: Simple documentation#
A lot of documentation sucks — partly because developers hate doing it, and partly because many developers are too close to the product, and can’t write about it objectively.
Thankfully, Vue boasts documentation that is easy to understand, and features multiple use cases. The Vue team has continually done a great job writing about technical concepts in an accessible, easy-to-digest way.
Quick start: Create a Vue 3 app with Vite#
The fastest way to start a new Vue project today is with the official create-vue scaffolding tool, which uses Vite under the hood for lightning-fast builds and hot module replacement (HMR).
Run this command to spin up a new project:
npm create vue@latest
You’ll be prompted to choose features like TypeScript, Vue Router, Pinia, and testing support. Once it’s done:
cd my-vue-appnpm installnpm run dev
Within seconds, you’ll have a Vue 3 app running locally — no extra configuration required.
Your first component with <script setup>#
Vue 3 introduced a powerful new way to write components using the Composition API and the <script setup> syntax.
It’s cleaner, more concise, and easier to scale as your app grows.
Here’s a simple example:
<script setup>import { ref } from 'vue'const count = ref(0)const increment = () => count.value++</script><template><button @click="increment">Clicked {{ count }} times</button></template>
This modern style eliminates boilerplate and makes your components easier to read and maintain.
State management with Pinia#
For larger apps, you’ll likely need centralized state management.
Vue’s new default for this is Pinia — a simpler, more intuitive alternative to Vuex.
Here’s an example store:
// stores/useCounterStore.jsimport { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++}}})
And in a component:
<script setup>import { useCounterStore } from '@/stores/useCounterStore'const counter = useCounterStore()</script><template><button @click="counter.increment">Count is: {{ counter.count }}</button></template>
Pinia’s API is simpler, and it supports TypeScript out of the box.
Forms and two-way binding with defineModel()#
Handling form inputs has gotten easier in Vue 3.4+ with the new defineModel() macro, which simplifies how you sync state between parent and child components.
Child component:
<script setup>const modelValue = defineModel()</script><template><input v-model="modelValue" placeholder="Enter text" /></template>
Parent component:
<template><Child v-model="message" /><p>Message: {{ message }}</p></template>
This is the modern alternative to manually emitting update:modelValue events.
Routing with Vue Router 4#
Navigation is essential in any app.
With Vue 3, you’ll use Vue Router 4, which comes with features like lazy loading, dynamic routing, and navigation guards.
Here’s how you might set it up:
// router/index.jsimport { createRouter, createWebHistory } from 'vue-router'import Home from '@/views/Home.vue'import About from '@/views/About.vue'const routes = [{ path: '/', component: Home },{ path: '/about', component: About }]export const router = createRouter({history: createWebHistory(),routes})
And in your main app:
import { createApp } from 'vue'import App from './App.vue'import { router } from './router'createApp(App).use(router).mount('#app')
Testing with Vitest and Vue Test Utils#
Testing has also evolved.
Instead of Jest, most modern Vue projects use Vitest — a fast, Vite-native test runner — along with Vue Test Utils.
A simple component test:
import { mount } from '@vue/test-utils'import Counter from '@/components/Counter.vue'test('increments counter on click', async () => {const wrapper = mount(Counter)await wrapper.find('button').trigger('click')expect(wrapper.text()).toContain('1')})
This approach is faster, easier to configure, and integrates smoothly into Vite-based projects.
Deploying and optimizing for production#
When your app is ready to ship, build it with:
npm run build
Vite will optimize your app with tree-shaking, code splitting, and minification.
Consider additional steps like image optimization and lazy loading routes to reduce bundle size and improve performance.
Going further with Nuxt 3#
If your app needs server-side rendering (SSR), static site generation (SSG), or built-in backend endpoints, consider using Nuxt 3, the full-stack Vue framework.
Nuxt lets you build performant, production-ready applications with less setup and cleaner architecture.
What’s next?#
Overall, Vue.js is an excellent solution for beginners, to small development teams short on time or money. Now that you know why Vue is so popular, it’s time for you to jump into practice.
Our interactive course Hands-on Vue.js: Build a fully functional SPA, is the perfect primer to Vue. It’ll walk you through the fundamentals like data binding, directives, components and event handling, all with practical examples.
By the end, you’ll have the hands-on experience you need to build your own apps using Vue.
