Mastering Vue JS App Development: A Step-by-Step Guide

01 Vue.js Overview

Vue.js was created by Evan You in 2014 as a lightweight alternative to heavier frameworks. It is officially described as progressive, meaning you can adopt it incrementally, drop a single script tag into an existing page for interactivity, or build a full single-page application (SPA) with a modern toolchain. Vue 3, released in September 2020, rewrote the core in TypeScript and introduced the Composition API as the recommended way to author components.

Why Developers Choose Vue

Vue occupies a pragmatic middle ground between the minimalism of libraries like Alpine.js and the full ecosystem of React or Angular. Its single-file components (.vue files) collocate template, logic, and styles, which keeps related code together and improves maintainability. The reactivity system automatically tracks dependencies, so the UI updates whenever underlying data changes, no manual diffing required.

02 Vue Architecture

Vue applications are organized as a tree of components. At runtime, the framework maintains a virtual DOM, a lightweight JavaScript representation of the actual DOM. When reactive state changes, Vue computes a minimal set of DOM mutations and applies them in a batched, efficient update cycle.

Core Architectural Layers

Project Structure

A standard Vite-powered Vue project follows this layout:

my-vue-app/
├── index.html
├── package.json
├── vite.config.js
├── src/
│   ├── main.js          # App entry, creates and mounts root
│   ├── App.vue          # Root component
│   ├── components/      # Reusable UI components
│   ├── views/           # Route-level page components
│   ├── stores/          # Pinia store definitions
│   ├── router/          # Vue Router configuration
│   └── assets/          # Images, fonts, styles
└── public/              # Static files served as-is

03 Components and the Composition API

The Composition API is Vue 3’s recommended authoring style. Instead of grouping code by option type (data, methods, computed), you group logic by feature. This makes complex components easier to read and allows you to extract reusable logic into composable functions.

Single-File Component with <script setup>

The <script setup> compiler macro is the idiomatic way to write components. It automatically exposes top-level bindings to the template and requires less boilerplate than an explicit setup() function.

<script setup>
import { ref, computed, onMounted } from 'vue'

// Reactive state
const count = ref(0)
const items = ref([])

// Computed value, re-computes when count changes
const double = computed(() => count.value * 2)

// Method
function increment() {
  count.value++
}

// Lifecycle hook
onMounted(() => {
  console.log('Component mounted, count =', count.value)
})
</script>

<template>
  <div class="counter">
    <p>Count: {{ count }} (doubled: {{ double }})</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<style scoped>
.counter { padding: 1rem; border: 1px solid #ddd; }
</style>

Core Reactivity Primitives

Composables: Reusable Logic

Composables are functions that encapsulate reactive state and methods. They are Vue’s replacement for Vue 2 mixins and avoid the naming collisions and unclear source problems mixins had.

// composables/useFetch.js
import { ref, watchEffect } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  watchEffect(async () => {
    loading.value = true
    error.value = null
    try {
      const res = await fetch(url.value)
      data.value = await res.json()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  })

  return { data, error, loading }
}

04 State Management with Pinia

Pinia is the official state management library for Vue 3, succeeding Vuex. It is built on the Composition API, has full TypeScript inference, and removes the mutations layer that Vuex required. Stores are simpler to write and the devtools integration is excellent.

Defining a Store

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    history: []
  }),
  getters: {
    double: (state) => state.count * 2,
    isPositive: (state) => state.count > 0
  },
  actions: {
    increment() {
      this.count++
      this.history.push(Date.now())
    },
    reset() {
      this.count = 0
      this.history = []
    }
  }
})

Pinia also supports a setup-style store syntax that mirrors composables:

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
})

Using a Store in a Component

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const store = useCounterStore()
const { count, double } = storeToRefs(store) // reactive refs
</script>

<template>
  <p>{{ count }}, doubled: {{ double }}</p>
  <button @click="store.increment">+1</button>
</template>

05 Routing with Vue Router

Vue Router 4 is the official routing library for Vue 3. It maps URLs to components, supports nested routes, dynamic parameters, query strings, and navigation guards for access control.

Basic Router Setup

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', name: 'home', component: () => import('@/views/Home.vue') },
  { path: '/about', name: 'about', component: () => import('@/views/About.vue') },
  { path: '/user/:id', name: 'user', component: () => import('@/views/User.vue') },
  { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFound.vue') }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 }
  }
})

export default router

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(createPinia())
  .use(router)
  .mount('#app')

Navigation Guards

Guards let you run logic before a route is confirmed. Common uses include authentication checks, analytics logging, and data preloading.

router.beforeEach((to, from) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isAuthenticated) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
})

06 Testing Vue Applications

Vue testing centers on two tools: Vitest, a fast unit test runner built on Vite’s transform pipeline, and Vue Test Utils, a library for mounting and interacting with components in isolation.

Component Test Example

// Counter.spec.js
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

describe('Counter', () => {
  it('renders initial count', () => {
    const wrapper = mount(Counter)
    expect(wrapper.text()).toContain('Count: 0')
  })

  it('increments on button click', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('Count: 1')
  })
})

Testing Pyramid for Vue

07 Deployment

Vue applications built with Vite compile into a set of static HTML, JavaScript, and CSS files. Because the output is static, you can host it on virtually any platform, a CDN, object storage, or a traditional web server.

Build and Deploy Steps

Hosting Platform Comparison

SPA Fallback Configuration

For Nginx, add this to your server block so deep links resolve correctly:

location / {
  try_files $uri $uri/ /index.html;
}

08 Action: Start Building

You now have the full picture of a modern Vue 3 application, from reactivity fundamentals through to production deployment. The fastest way to internalize these concepts is to build something. Here is a concrete path to get a working app running in under an hour.

Recommended Learning Resources

Dev Station works with teams across the United States and the United Kingdom. Application data is held to SOC 2 or HIPAA where a US client requires it, and to GDPR with ISO 27001 for UK and EU records. Our engineers work from Vietnam with overlap into US Eastern, US Pacific and UK GMT hours, and we invoice in USD or GBP.