Vue Setup Install Create Your First App: Tutorial, Examples, FAQs & Interview Tips

Setting Up a Vue Project

Create Vue App - Vite (Recommended)

# Create Vue 3 project with Vite
npm create vue@latest my-vue-app

# Options you'll be asked:
# [ok] Add TypeScript? No (or Yes for TS)
# [ok] Add JSX Support? No
# [ok] Add Vue Router? Yes
# [ok] Add Pinia? Yes
# [ok] Add ESLint? Yes

cd my-vue-app
npm install
npm run dev   # http://localhost:5173

# Project structure:
# src/
#   assets/
#   components/
#   router/index.js
#   stores/
#   views/
#   App.vue       <- root component
#   main.js       <- entry point

<!-- src/App.vue - Single File Component (SFC) -->
<!-- Three sections: template, script, style -->

<template>
  <!-- Template: HTML with Vue directives -->
  <div class="app">
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="count = 0">Reset</button>
  </div>
</template>

<script setup>
// Composition API with <script setup> (recommended)
import { ref } from 'vue'

const message = ref('Hello, Vue 3!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

<style scoped>
/* scoped: styles only apply to this component */
.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
h1 { color: #42b883; }  /* Vue green */
</style>

// src/main.js - Entry point
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)

app.use(createPinia())  // state management
app.use(router)         // routing

app.mount('#app')  // mount to #app div in index.html

Options API vs Composition API

Vue 3 supports two API styles. Both are valid - choose based on preference and project needs.

Options API vs Composition API - Same Component

<!-- Options API - familiar, object-based -->
<template>
  <div>
    <p>{{ fullName }} - {{ age }} years old</p>
    <button @click="birthday">Happy Birthday!</button>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  data() {
    return {
      firstName: 'Alice',
      lastName: 'Smith',
      age: 25
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    birthday() {
      this.age++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>

<!-- Composition API with <script setup> - modern, flexible -->
<template>
  <div>
    <p>{{ fullName }} - {{ age }} years old</p>
    <button @click="birthday">Happy Birthday!</button>
  </div>
</template>

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

const firstName = ref('Alice')
const lastName  = ref('Smith')
const age       = ref(25)

const fullName = computed(() => `${firstName.value} ${lastName.value}`)

function birthday() {
  age.value++
}

onMounted(() => {
  console.log('Component mounted')
})
</script>

Deep Dive: Getting Started in Real Projects

Understanding Getting Started is not just about syntax. In production applications, this topic directly affects maintainability, debugging speed, and team collaboration. Focus on readability, small reusable patterns, and predictable state flow when implementing Getting Started.

A practical approach is to first implement the simplest working version, then refactor into reusable pieces (components/composables/stores) only when duplication appears. This helps keep your Vue codebase clean while avoiding over-engineering.

Common Mistakes to Avoid

Mixing too many responsibilities in one component instead of separating logic by concern.
Skipping meaningful naming for variables, emits, and component props.
Ignoring edge cases like empty data, loading states, and error handling.
Optimizing too early before measuring real bottlenecks in browser devtools.
Not creating small test scenarios to validate behavior after each change.

Mini Practice Checklist

Build a small demo focused only on Getting Started.
Add one edge case (empty/loading/error) and handle it cleanly.
Refactor repeated logic into a reusable function/composable.
Add clear comments only where logic is non-obvious.
Verify behavior with manual testing and Vue Devtools.

Key Takeaways

This chapter on Getting Started focuses on practical Vue 3 patterns used in real projects.
Prefer the Composition API with script setup for cleaner and more scalable component logic.
Keep components focused and move reusable logic into composables when complexity grows.
Use Vue Devtools to inspect component state, props, emits, and performance during development.
Write small experiments for each concept before applying it in production code.
After finishing this chapter, continue to the next related topic in the Vue roadmap.