Introduction to Vue.js

What is Vue.js?

Vue.js is a JavaScript framework designed for building user interfaces. It's often called a "progressive" framework. This means you can use it in small doses to enhance parts of an existing webpage, or you can use it to build a large, complex single-page application from the ground up. It's flexible and scales with your needs.

At its core, Vue is focused on the "view layer" of an application—the part the user sees and interacts with. It builds on standard HTML, CSS, and JavaScript, providing a declarative and component-based programming model that helps you efficiently develop user interfaces, regardless of their complexity.

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces.

Core Principles

Two fundamental ideas make Vue powerful: reactive data binding and a component-based architecture.

Reactivity

noun

The system by which Vue automatically tracks changes in your JavaScript data and efficiently updates the user interface (the DOM) to match.

With reactive data binding, you link your application's data (your JavaScript objects) directly to what's displayed. When the data changes, the HTML updates automatically. You don't have to manually select and update DOM elements. You simply change the data, and Vue handles the rest.

The second principle is its component-based architecture. A user interface is broken down into small, self-contained, and reusable pieces called components. A page might have a NavigationBar component, a UserProfile component, and a PostFeed component. Each one manages its own HTML, CSS, and JavaScript. This approach keeps your code organized and easy to maintain as your application grows.

Vue.js promotes a component-based architecture, where applications are built using reusable components.

Setting Up Your Environment

To get started with a modern Vue.js project, you'll need Node.js and a package manager like npm installed on your system. The recommended way to create a new Vue project is by using the official scaffolding tool, create-vue.

# This command will install and execute create-vue
npm create vue@latest

This command initiates an interactive process that asks you questions about the features you want in your project, such as TypeScript, Pinia for state management, or Vitest for testing. For now, you can stick with the defaults. It sets up a project powered by Vite, a modern and extremely fast build tool.

Once the project is created, navigate into the new directory, install the necessary dependencies, and start the development server:

# Change into your new project directory
cd <your-project-name>

# Install the project dependencies
npm install

# Compile and hot-reloads for development
npm run dev

Your new Vue application is now running, typically at http://localhost:5173. Any changes you make to the source code will instantly be reflected in the browser.

A Simple Vue Application

Let's examine the structure of a file you'll work with constantly: the Single-File Component (SFC), which has a .vue extension. These files encapsulate the component's logic, template, and styles in one place.

Open src/App.vue in your new project. You'll see three main sections:

Block	Purpose
`<script setup>`	Contains the component's JavaScript logic. Here you define data, methods, and component state.
`<template>`	Holds the component's HTML structure. It's what gets rendered to the DOM.
`<style>`	Contains the CSS for the component. Adding the `scoped` attribute ensures styles only apply to this component.

Here's a simplified example of what a component might look like:

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

// reactive state
const message = ref('Hello Vue!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<style scoped>
h1 {
  color: #42b983;
}
</style>

In this example:

The <script setup> block imports ref from Vue to create a reactive variable called message.
The <template> uses double curly braces {{ }} (called Mustache syntax) to display the value of message.
If the value of message were to change anywhere in the script, the <h1> tag in the template would automatically update to show the new value.

This simple structure—logic, template, and style all in one file—is the foundation for building any Vue application.

Mastering Vue.js Fundamentals