Vue.js Frontend Website Development

Vue.js Frontend Website Development

Vue.js is a progressive framework for building user interfaces. Unlike React, Vue is a complete framework out of the box: reactivity, templating, router (Vue Router), state management (Pinia). Vue 3 with Composition API is the current standard.

Vue 3 Composition API

Composition API is the main change in Vue 3. Logic is grouped by function, not by option type:

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

async function fetchData() {
  // ...
}

onMounted(() => fetchData());
</script>

<template>
  <div>
    <p>{{ count }} × 2 = {{ doubled }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script setup> is syntactic sugar over setup(), no return needed.

Reactivity

Vue 3 uses Proxy for reactivity. Key primitives:

• ref<T>() — for primitives and objects (access via .value)
• reactive({}) — for objects (without .value)
• computed(() => ...) — computed value
• watch() / watchEffect() — side effects

const user = reactive({ name: '', email: '' });
// Vs
const name = ref('');
// user.name vs name.value

Composables (analog of hooks)

// composables/useAuth.ts
import { ref } from 'vue';

export function useAuth() {
  const user = ref(null);
  const isLoggedIn = computed(() => !!user.value);

  async function login(credentials) {
    user.value = await api.login(credentials);
  }

  return { user, isLoggedIn, login };
}

// In component
const { user, isLoggedIn, login } = useAuth();

Pinia — state management

Pinia replaces Vuex:

// stores/cart.ts
import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] as CartItem[] }),
  getters: {
    total: (state) => state.items.reduce((sum, item) => sum + item.price, 0),
  },
  actions: {
    addItem(item: CartItem) {
      this.items.push(item);
    },
  },
});

// In component
const cart = useCartStore();
cart.addItem({ id: 1, price: 100 });

Vue Router 4

const routes = [
  { path: '/', component: HomePage },
  { path: '/blog/:slug', component: BlogPost, props: true },
  { path: '/admin', component: AdminLayout, meta: { requiresAuth: true },
    children: [
      { path: 'users', component: UserList },
    ]
  },
];

// Navigation guard
router.beforeEach((to) => {
  if (to.meta.requiresAuth && !auth.isLoggedIn) return '/login';
});

Ecosystem

• VueUse — 200+ composable utilities (useStorage, useIntersectionObserver, useDark)
• Quasar Framework — UI components + PWA/Electron/Capacitor out of the box
• PrimeVue — enterprise UI components
• Vuelidate / VeeValidate — form validation
• Nuxt.js — SSR framework based on Vue (analog of Next.js for React)

Timeline

Frontend on Vue 3 for SPA (5–15 screens, CRUD, authorization): 2–4 weeks. Complex application with multiple modules, charts, real-time: 1–3 months.