Getting Started with Vue 3: A Beginner’s Guide

Introduction

Vue 3 is a progressive JavaScript framework used for building user interfaces. Its lightweight design, reactivity, and ease of use make it a go-to choice for beginners and experienced developers alike.

This beginner's guide covers the fundamentals of Vue 3, from installation to building a simple web application, equipping you with the knowledge to start your journey with Vue.

Why Choose Vue 3?

Vue 3 offers several features that make it an ideal framework:

• Reactivity: Simplifies state management with its reactive data system.
• Composition API: Enhances flexibility and reusability of code.
• Virtual DOM: Ensures high performance and efficient rendering.
• Ecosystem: Rich tooling support, including Vue Router and Vuex/Pinia.
• Community: Large and active community with extensive resources.

Setting Up Vue 3

Prerequisites

Before starting, ensure you have the following installed:

• Node.js: Download and install from nodejs.org.
• Package Manager: npm (comes with Node.js) or yarn.

Installation Options

1. Using Vue CLI:
   Vue CLI is the easiest way to scaffold a Vue project.

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

Open http://localhost:8080 in your browser to view your app.

1. Using Vite (Preferred for Vue 3):
   Vite is a fast and modern build tool for Vue 3.

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

Your app will run at http://localhost:5173.

Creating Your First Vue 3 Component

Basic Component Structure

A Vue component consists of three parts:

1. Template: Defines the HTML structure.
2. Script: Contains JavaScript logic.
3. Style: Adds CSS for the component.

Here’s an example:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Click Me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Welcome to Vue 3!",
    };
  },
  methods: {
    changeMessage() {
      this.message = "You just clicked the button!";
    },
  },
};
</script>

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

Explanation

• Template: Renders message and listens for a button click using @click.
• Script: Manages reactive data (message) and defines the method (changeMessage).
• Style: Applies CSS to the <h1> element.

The Composition API

The Composition API is a new way to write Vue components, offering better code organization and reusability.

Example: Counter Component

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

<script>
import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  },
};
</script>

Key Points

• ref(): Creates reactive data. Access the value using .value.
• setup(): The new entry point for logic in Vue 3 components.

Adding Vue Router

Vue Router is used for handling navigation in your Vue app.

Installation

npm install vue-router@4

Configuration

Create a router.js file:

import { createRouter, createWebHistory } from "vue-router";
import Home from "./components/Home.vue";
import About from "./components/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Usage in main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Now, you can navigate between / and /about.

Styling with Vue

Vue supports scoped styles for encapsulating CSS within components:

<style scoped>
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}
</style>

The scoped attribute ensures styles are applied only to the current component.

Deploying Your Vue App

Build the Application

Run the build command to generate static files:

npm run build

Deploy to Static Hosting

Upload the dist folder to platforms like:

• Netlify
• Vercel
• GitHub Pages

Conclusion

Vue 3 is an excellent choice for building modern web applications due to its simplicity, flexibility, and performance. With its reactive data system, Composition API, and rich ecosystem, Vue makes it easy to create dynamic and maintainable web applications.

Start your Vue 3 journey today and experience the power of modular and modern front-end development!