D1 - Introduction to Vue 3

Vue is an open-source JavaScript framework geared toward building user interfaces, created by Evan You. If we take a glance at the front page of the main website, we can see that Vue is said to be the progressive JavaScript framework that is approachable, versatile, and performant. Let’s explain each of these points:

Progressive

It is recognized to be progressive since it can often be scaled down as well as it scales up. For very simple use cases, you can use Vue like you use jQuery - by dropping a single script tag:

<script src="https://unpkg.com/vue@3"></script>

Approachable

Builds on top of standard HTML, CSS, and JavaScript with intuitive API and world-class documentation.

Performant

Truly reactive, compiler-optimized rendering system that rarely requires manual optimization.

Versatile

A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework.

Features

  • The vue-cli (i.e. Vue Command Line Interface) allows for rapid prototyping and set-up of Vue-Webpack applications.
  • vue-router which helps us introduce client-side routing into our application with relative ease.
  • vuex, the Elm-inspired Flux-like library that helps facilitate how data is managed in an application.
  • pinia, Stores are as familiar as components. API is designed to let you write well-organized stores.
  • vue-test-utils, the testing utility library that introduces various helpers and function to make testing Vue components a lot easier.

How to use VueJs - Install Vue3

Depending on your use case and preference, you can use Vue with or without a build step.

Without Build Tools

To get started with Vue without a build step, simply copy the following code into an HTML file and open it in your browser:

<!-- don't need nodejs --><script src="https://unpkg.com/vue@3"></script><div id="app">{{ message }}</div><script>  const { createApp } = Vue  createApp({    data() {      return {        message: 'Hello Vue!'      }    }  }).mount('#app')</script>

Wow, you just run Hello World, a program in Vue. Bravo.

With Build Tools

A build setup allows us to use Vue Single-File Components (SFCs). The official Vue build setup is based on Vite, a front-end build tool that is modern, lightweight, and extremely fast.

Online

You can try Vue with SFC online on StackBlitz. StackBlitz runs the Vite-based build setup directly in the browser,

Local

Pre-requisites

  • Familiarity with the command line
  • Install Node.js

In the terminal run this

npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will see some options. Select them as per project requirements.

✔ Project name: … <your-project-name>✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? … No / Yes✔ Add Vitest for Unit testing? … No / Yes✔ Add Cypress for both Unit and End-to-End testing? … No / Yes✔ Add ESLint for code quality? … No / Yes✔ Add Prettier for code formatting? … No / YesScaffolding project in ./<your-project-name>...Done.

then

cd <your-project-name>npm installnpm run dev

You should now have your first Vue project running! Enjoy

Table of Contents