Getting started with Vue 3: building your first app with Vite
Learn how Vue 3 works, set up a project with create-vue and Vite, and understand the anatomy of a Single File Component through a real example.
A JOURNAL ABOUT TECHNOLOGY
Learn something new.
Write. Share.
A space to connect knowledge, one line of code a day.
Discover tutorials, ideas, and notes from a learning journey.
EDITOR’S PICK ↗
Vue.jsGetting started with Vue 3: building your first app with Vite
Learn how Vue 3 works, set up a project with create-vue and Vite, and understand the anatomy of a Single File Component through a real example.
FOR YOUR CURIOSITY
Latest notes.
Vue 3 reactivity: ref, reactive, computed, and watch
Understand how Vue tracks data changes, when to use ref or reactive, and the difference between computed and watch, along with common pitfalls.
Vue template directives: v-bind, v-on, v-if, v-for, and v-model
Master Vue template syntax to display data, handle events, render conditions and lists, and create two-way bindings for form inputs.
Vue components: props, emits, v-model, and slots
Learn how Vue components communicate through props and events, build a custom v-model with defineModel, and compose flexible layouts with slots.
Vue Router 4: building navigation for a Single Page Application
Organize the pages of your Vue app with Vue Router: route definitions, dynamic params, nested routes, lazy loading, navigation guards, and a 404 page.
Vue state management with Pinia: stores, getters, and actions
Manage global state in your Vue app with Pinia: create stores with the setup syntax, use storeToRefs, write async actions, persist state, and test your stores.
Knowledge grows when shared.
Stay curious. There is always something new to learn.
ABOUT THE AUTHOR
Dr (C). Ir. Putu Adi Guna Permana, S.Kom., M.Kom., IPM., ASEAN Eng.
Writer and founder of Diary Coding — sharing notes, tutorials, and experiences about programming for anyone who wants to keep learning.