Getting started

CDN

The fastest and easiest way to start working with Vue is to use it as a library rather than a core-technology - meaning you’ll want to install with CDN. You’ll need to include the following link inside your script tag, at the end of your file.

NPM

You can also install with Node Package Manager (NPM). This is not the way we are going to use neither, but it allows you to configure your scaffolding exactly the way you want and be aware of the installed packages in your app as you will have to manually install them.

npm install vue

Vite

Vite is a "no-bundler" tool created by Evan You, the same person who worked on Vue.js. Vite is an alternative for Webpack or Parcel, but its compiling logic is completely different : while regular bundlers gather your code, images and assets and then compile them to serve the app on your local server ; with Vite, your local server is always available and the tool compiles only the files that are needed to render the page you want to display. It means the scripts and compiling time are litteraly 10-100x faster than the concurrency.

You can start to work with a framework really quickly with Vite, as you can run the tool and select a framework-oriented configuration (including basic scaffolding with the minimum required). With Vue, it just imports the core packages and you have to manually install the router, the transpiler, etc.

npm init @vitejs/app

yarn create @vitejs/app

Vue-CLI

Last but not least, Vue provides a way to generate a basic and quick scaffolding for you to start coding your app! It's named Vue-CLI and requires you to install Vue core packages on your machine. With Vue-CLI, you'll access to new commands and scripts that don't exist normally when you use NPM. This is the tool we are going to use throughout this crash course, so please consider verifying if you have everything you need before jumping in.

You'll need to have Vue installed globally on your computer for the following part. To install it, please run the command down below in your CLI :

npm install -g @vue/cli

yarn global add @vue/cli

Once you have Vue installed gobally, you will be able to run this command :

vue create vue-tuto

You'll be asked to select many features and choose a linter, a router, and some other stuff. For the sake of this tutorial, select ESLint and Prettier ([Vue 2] babel, eslint).

We decided to use Vue 2x for this tutorial as it's a pretty stable version in comparison to Vue 3 which has left beta-state pretty recently, so you could experience some problems with unsupported or non-updated packages.