Modern web applications are expected to be fast, interactive, and easy to maintain.

Getting Started with Vue 3: Building Modern Frontend Applications

Introduction

Modern web applications are expected to be fast, interactive, and easy to maintain. Building such applications from scratch with plain JavaScript is possible, but as an application grows, managing its user interface and application state can become increasingly difficult.

This is where frontend frameworks come in.

Vue.js is a progressive JavaScript framework for building user interfaces. It provides developers with tools for creating everything from small interactive components to complete single-page applications.

Vue has gained popularity because it provides a relatively gentle learning curve while still offering the features required to build sophisticated applications.

In this article, we will look at Vue 3, its core concepts, the Composition API, and how to build a simple application.

What Is Vue.js?

Vue.js is an open-source JavaScript framework designed primarily for building user interfaces.

Unlike some frameworks that require developers to adopt a complete application architecture immediately, Vue can be introduced gradually.

You can use Vue to enhance a small section of an existing HTML page, or you can use it to build an entire single-page application.

A simple Vue application can look like this:

<div id="app">
    <h1>{{ message }}</h1>
</div>

<script>
const { createApp } = Vue;

createApp({
    data() {
        return {
            message: 'Hello, Vue!'
        };
    }
}).mount('#app');
</script>

The expression:

{{ message }}

is automatically updated when the underlying value changes.

This is one of the fundamental ideas behind Vue: declarative and reactive user interfaces.

Why Vue 3?

Vue 3 introduced several improvements over previous versions of Vue.

Some of the important features include:

• Composition API

• Improved TypeScript support

• Better performance

• Smaller production bundles

• Improved component architecture

• Multiple root elements in components

• Better code organization for large applications

One of the most important additions is the Composition API.

The Composition API

The Composition API provides a way to organize component logic around related functionality rather than separating everything according to options such as data, methods, and computed.

A typical Vue 3 component using the Composition API looks like this:

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
    count.value++;
}
</script>

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">
            Increment
        </button>
    </div>
</template>

Here, ref() creates a reactive value.

When the value changes:

count.value++;

Vue automatically updates the relevant part of the user interface.

Understanding Reactivity

Reactivity is one of the concepts that makes Vue powerful.

Consider this:

const name = ref('Julius');

If we later change it:

name.value = 'CodeDigest';

Vue knows that the value has changed and updates the parts of the interface that depend on it.

In the template, you don't need to write .value:

<h1>Hello {{ name }}</h1>

Vue handles the connection between the data and the interface.

This means developers can focus more on describing what the interface should display rather than manually manipulating the DOM.

Creating a Vue Application

The recommended way to start a modern Vue project is with the Vue tooling ecosystem.

A typical project can be created using:

npm create vue@latest

You will be asked several configuration questions, such as whether you want to use TypeScript, Vue Router, Pinia, testing tools, and other features.

After creating the project, install the dependencies:

npm install

Then start the development server:

npm run dev

Your application will normally become available through a local development URL displayed in the terminal.

Understanding Vue Components

Components are one of the most important concepts in Vue.

Instead of putting an entire application into one large file, you can divide the interface into reusable components.

For example:

src/
├── components/
│   ├── Navbar.vue
│   ├── ArticleCard.vue
│   ├── Footer.vue
│   └── Button.vue
│
├── views/
│   ├── Home.vue
│   ├── Articles.vue
│   └── About.vue
│
└── App.vue

An ArticleCard.vue component might contain:

<script setup>
defineProps({
    title: String,
    excerpt: String
});
</script>

<template>
    <article>
        <h2>{{ title }}</h2>
        <p>{{ excerpt }}</p>
    </article>
</template>

The component can then be reused:

<ArticleCard
    title="Getting Started with Vue 3"
    excerpt="Learn the fundamentals of building applications with Vue."
/>

This approach makes applications easier to maintain because individual parts of the interface have clearly defined responsibilities.

Handling User Events

Vue provides convenient event handling syntax.

For example:

<button @click="increment">
    Increment
</button>

The @click syntax is shorthand for:

v-on:click

You can also respond to keyboard input:

<input @keyup.enter="submitForm">

This makes handling user interaction straightforward.

Conditional Rendering

Vue allows you to display elements conditionally.

For example:

<p v-if="loggedIn">
    Welcome back!
</p>

<p v-else>
    Please log in.
</p>

When loggedIn changes, Vue updates the interface automatically.

You can also use v-show when you want to control visibility without removing the element from the DOM.

Rendering Lists

Displaying a list of data is another common requirement.

Vue provides the v-for directive:

<ul>
    <li
        v-for="article in articles"
        :key="article.id"
    >
        {{ article.title }}
    </li>
</ul>

If articles contains:

[
    { id: 1, title: 'Getting Started with Vue' },
    { id: 2, title: 'Understanding REST APIs' },
    { id: 3, title: 'Introduction to Spring Boot' }
]

Vue generates the corresponding list in the interface.

The key attribute helps Vue efficiently track individual items when the list changes.

Working with APIs

Most modern frontend applications communicate with backend APIs.

For example, a Vue application might retrieve articles from:

GET /api/articles

Using fetch():

const response = await fetch('/api/articles');

const articles = await response.json();

The retrieved data can then be stored in a reactive variable:

const articles = ref([]);

async function loadArticles() {
    const response = await fetch('/api/articles');
    articles.value = await response.json();
}

This is particularly useful when Vue is used with a backend such as Spring Boot, Node.js, Laravel, or another API-based backend.

Vue Router

For applications with multiple pages or views, Vue Router provides client-side routing.

A typical application might have routes such as:

/
/articles
/articles/vue-3
/interviews
/about

Instead of requesting a completely new HTML document for every navigation, the Vue application can change the displayed component while maintaining the single-page application experience.

State Management

As applications become larger, components often need to share data.

For simple applications, Vue's built-in reactivity and component features may be enough.

For larger applications, developers can use Pinia, the recommended state management solution in the Vue ecosystem.

A store might contain information such as:

Current user
Authentication state
Shopping cart
Application preferences
Notifications

Components can then access the shared state without passing the same data through many levels of components.

Vue and Backend Technologies

Vue does not replace a backend.

Instead, it normally works alongside backend technologies.

For example:

Vue.js
    │
    │ HTTP / REST API
    ▼
Spring Boot
    │
    ▼
MySQL

Or:

Vue.js
    │
    ▼
Node.js / Express
    │
    ▼
PostgreSQL

This separation allows the frontend and backend to evolve independently.

For example, a company could replace its Vue frontend without completely rewriting its backend API.

When Should You Use Vue?

Vue is a good choice when you need:

• Interactive web applications

• Single-page applications

• Reusable UI components

• Reactive interfaces

• Dashboards

• Admin panels

• SaaS applications

• API-driven applications

• Progressive enhancement of existing websites

It can also be a good choice for developers who want a framework that is approachable without sacrificing capabilities needed for larger applications.

Vue Is More Than a UI Library

One important distinction is that Vue is often described simply as a JavaScript framework for user interfaces, but the surrounding Vue ecosystem provides much more.

A modern Vue application can use:

Vue
 ├── Components
 ├── Composition API
 ├── Vue Router
 ├── Pinia
 ├── Vite
 └── Testing tools

Together, these tools provide a foundation for building complete frontend applications.

Final Thoughts

Vue 3 provides developers with a practical way to build modern web interfaces while keeping the programming model relatively approachable.

Its component-based architecture makes it possible to break complex interfaces into smaller, reusable pieces, while its reactive system allows the interface to respond automatically when application data changes.

For developers coming from traditional JavaScript, Vue can provide a natural progression into modern frontend development.

The real value of Vue, however, becomes apparent when it is used to solve actual problems: building dashboards, consuming APIs, managing complex forms, creating SaaS interfaces, and developing applications that need a responsive and maintainable user interface.

For anyone looking to expand their frontend development skills, Vue 3 is a technology worth understanding—not simply as another JavaScript framework, but as part of the modern web development ecosystem.

Tags: Vue.js, Vue 3, JavaScript, Composition API, Frontend Development