Getting Started with Vue.js

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:
# âœ” Add TypeScript? No (or Yes for TS)
# âœ” Add JSX Support? No
# âœ” Add Vue Router? Yes
# âœ” Add Pinia? Yes
# âœ” 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>

Previous Next

Getting Started with Vue.js

Setting Up a Vue Project

Options API vs Composition API

Ready to Level Up Your Skills?