Building a Vue.js 3 Project: Real-World Example from Initialization to Deployment

Vue.js 3 is a popular JavaScript framework for building interactive web applications. Its composition API and improved performance make it a top choice for developers. In this article, we will walk through a real-world example of building a Vue.js 3 project from scratch to deployment, covering each step in detail.

Setting Up the Development Environment

Before starting, ensure you have Node.js and npm installed on your machine. You can verify this by running node -v and npm -v in your terminal. Next, create a new Vue.js 3 project using the Vue CLI.

Install Vue CLI globally if you haven’t already:

npm install -g @vue/cli

Create a new project named vue3-realworld:

vue create vue3-realworld

Select the default preset or manually choose features such as Babel, Router, Vuex, and Linter as needed. Once the setup completes, navigate into the project directory:

cd vue3-realworld

Project Structure Overview

The project directory contains key folders and files:

src/: Contains source code, including components, views, and router configuration.
public/: Static assets like index.html and images.
package.json: Manages dependencies and scripts.
vue.config.js: Optional configuration file for Vue CLI.

Creating Components and Routing

Start by creating a simple component, such as Home.vue, inside src/views. This component will serve as the homepage.

Example Home.vue:

<template> <h1>Welcome to Vue 3!</h1> </template> <script> export default { name: 'Home' }; </script>

Next, configure the router to include this view. Edit src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';

import Home from '../views/Home.vue';

const routes = [ { path: '/', name: 'Home', component: Home } ];

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

export default router;

State Management with Vuex

For larger applications, managing state is essential. Vuex provides a centralized store. Initialize Vuex in your project:

npm install vuex@next

Create src/store/index.js:

import { createStore } from 'vuex';

export default createStore({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } });

import { createApp } from 'vue';

import App from './App.vue';

import router from './router';

import store from './store';

createApp(App).use(router).use(store).mount('#app');

Styling and Final Touches

Enhance your application with CSS or pre-processors like SCSS. Modify src/App.vue to include global styles or component-specific styles.

For example, add a simple style block:

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

Building and Deploying the Application

To build the project for production, run:

npm run build

This command generates optimized static files in the dist/ folder. You can deploy these files to any static hosting service like Netlify, Vercel, or your own server.

Conclusion

Building a Vue.js 3 project involves setting up the environment, creating components, managing state, and deploying your app. With Vue 3’s modern features, you can develop scalable and maintainable applications efficiently. Experiment with additional features like Vue Router guards, Vuex modules, and third-party libraries to enhance your project further.

Table of Contents