Getting started guide for Vue.js

sunny gsunny g
3 min read

🔰 What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces. It focuses on the view layer and can be easily integrated into existing projects. It's approachable, versatile, and very powerful for building SPAs (Single Page Applications).

🛠️ Step 1: Setup Options

✅ Option 1: Using Vue CDN (for quick testing)

Use this if you just want to try Vue quickly without a build setup.

<!DOCTYPE html>
<html>
<head>
  <title>Vue Hello</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: "Hello, Vue!"
        };
      }
    }).mount("#app");
  </script>
</body>
</html>

Vite is the fastest way to scaffold and run a Vue 3 project.

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

You now have a Vue project running at http://localhost:5173.

🔧 Step 2: Basic File Structure

my-vue-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
└── vite.config.js

📘 Step 3: Understand the Basics

🧱 Components (App.vue example)

<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="title" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue is awesome!',
    };
  },
};
</script>

🔄 Reactivity

  • Use ref() for primitives: const count = ref(0)

  • Use reactive() for objects: const state = reactive({ name: "Vue" })

➕ Step 4: Add More Features

  • Vue Router (routing): npm install vue-router

  • Pinia (state management): npm install pinia

  • Axios (HTTP requests): npm install axios

  • DevTools Extension: Vue DevTools

  • IDE: VS Code with Vetur or Volar extension

Real World Example:

🚀 Startup Idea Tracker — Vue.js Project Guide

Welcome to the Startup Idea Tracker! This guide will help you set up and customize a Vue.js project using Vue CLI, TypeScript, Vue Router, Vuex, and Axios.

📦 Project Setup

Install dependencies:

npm install

🔧 Development Commands

▶️ Run the app in development mode

npm run serve

🏗️ Build the app for production

npm run build

🧹 Lint and fix code issues

npm run lint

⚙️ Customize Configuration

For advanced configuration, refer to the official Vue CLI documentation:
👉 Configuration Reference

🏁 From Scratch: Creating a Vue App with TypeScript (Another Option)

1. Install Vue CLI globally

npm install -g @vue/cli

2. Create a new project

vue create my-project

Select features like TypeScript, Vue Router, Vuex, Linter, etc., during the CLI prompts.

3. Add TypeScript support (if not added initially)

vue add typescript

4. Install essential dependencies

npm install axios vue-router vuex

5. Optional: Use decorators with Vue class components

npm install -S vue-property-decorator

🔍 Working with Vue Single File Components (SFCs)

Make sure you have the Vue Language Features (Volar) or Vetur extension installed in VS Code to get full support for:

  • TypeScript in .vue files

  • Auto-completion

  • Error highlighting

🔗 Vue VSCode Extensions

📝 Auto-generate Component Documentation

Generate documentation from your Vue components using Vuese:

Install Vuese CLI globally:

npm install -g @vuese/cli

Generate component documentation:

vuese gen

✅ Summary

You now have a powerful Vue 3 setup with:

  • 🔷 TypeScript support

  • 🌐 Vue Router for page navigation

  • 📦 Vuex for state management

  • 🌐 Axios for API integration

  • 📚 Vuese for auto-generated documentation

Ready to track your startup ideas efficiently and scale your project with a strong Vue foundation.

Learning Resources

0
Subscribe to my newsletter

Read articles from sunny g directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Vue.jsWeb DevelopmentDeveloperdevelopmentsoftware development

Written by

sunny g
sunny g

I am a full-stack developer with 8+ years of experience, passionate about the JavaScript ecosystem. I have a bachelor's degree in computer science. I am most skilled and passionate about Angular and React. I am able to provide meaningful contributions to the design, installation, testing, and maintenance of any type of software system. I like to challenge myself in new roles. I have built and successfully delivered applications in multiple domains. In my free time, I like to write blogs related to software development. I have the pleasure of working on exciting projects across industries. The applications that I developed were scalable, deployable, and maintainable. I have a vision of providing cutting-edge web solutions and services to enterprises. Developed zero-to-one products.