Getting Started

Welcome to the Vue tutorial!

The goal of this tutorial is to quickly give you an experience of what it feels like to work with Vue, right in the browser. It does not aim to be comprehensive, and you don’t need to understand everything before moving on. However, after you complete it, make sure to also read the Guide which covers each topic in more details.

Prerequisites

The tutorial assumes basic familiarity with HTML, CSS and JavaScript. If you are totally new to front-end development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

How to Use This Tutorial

You can edit the code on the rightbelow and see the result update instantly. Each step will introduce a core feature of Vue, and you will be expected to complete the code to get the demo working. If you get stuck, you will have a “Show me!” button that reveals the working code for you. Try not to rely on it too much - you’ll learn faster by figuring things out on your own.

If you are an experienced developer coming from Vue 2 or other frameworks, there are a few settings you can tweak to make the best use of this tutorial. If you are a beginner, it’s recommended to go with the defaults.

Tutorial Setting Details - Vue offers two API styles: Options API and Composition API. This tutorial is designed to work for both - you can choose your preferred style using the API Preference switches at the top. Learn more about API styles. - You can also switch between SFC-mode or HTML-mode. The former will show code examples in Single-File Component (SFC) format, which is what most developers use when they use Vue with a build step. HTML-mode shows usage without a build step.

Ready? Click “Next” to get started.