Vue 3

Byline:

“The Progressive JavaScript Framework”

“Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.”

Key links

🏠 Homepage: https://vuejs.org/
📗 Docs: https://v3.vuejs.org/guide/introduction.html
👨‍💻 Repo:
📦 Package URL: https://www.npmjs.com/package/vue
🌐 Wikipedia
🗒️ DevHints cheatsheet

Documentation

Homepage
Installation
Explanation of different builds
TypeScript Support
- This explains how to configure your project and how to add TypeScript to your Vue components.

Tutorials

Vue Mastery
- website’s courses.
Vue Master
- on YouTube.

My projects

My template projects

vue-quickstart
vue-typescript-quickstart
vue-router-quickstart
vue-frontend-quickstart
- no build step or CLI needed.
vite-vue-quickstart
- using Vite instead of Vue CLI as a build tool.

Add Vue directly to your frontend, or use it in a Node or Deno app.

Vue is similar to React by easier to learn. It uses .vue template files so you don’t need to use JSX. There’s no class vs functional components issue like in React. And it is maintained by a core developer and the community, rather than by a company (like React and Facebook).

Installation

See my Vue cheatsheet for more info.

Install in project. Use next for cutting edge or latest for more stable - these are just aliases on NPM to release versions.
```
  $ yarn add vue@next
  $ # OR
  $ npm install vue@next
```

Or install @vue/cli package globally.

  $ yarn global add @vue/cli
  $ # OR
  $ npm install -g @vue/cli

  $ vue --version
  $ vue create my-project

If you prefer to use Vite CLI to Vue CLI service, you can use Vite

$ npm init vite@latest my-app -- --template vue

Migrate

Upgrade from Vue 2 to Vue 3. Note you have to replace the compiler as below, as per discussion. There are some code changes to make as well.

$ yarn add vue@next
$ yarn remove vue-template-compiler
$ yarn add @vue/compiler-sfc -D

Reactive state

From Simple State Management from Scratch in the Vue 3 docs.

It is often overlooked that the source of truth in Vue applications is the reactive data object - a component instance only proxies access to it.

Therefore, if you have a piece of state that should be shared by multiple instances, you can use a reactive method to make an object reactive:

The docs example mounts two app instances. From my testing, if you only have on app instance, you don’t need to bother with reactive.

See also the reactive Vue method in the docs, as that is used below.

The essential use case for reactive state in Vue is that we can use it during render. Thanks to dependency tracking, the view automatically updates when reactive state changes.

This is the very essence of Vue’s reactivity system. When you return an object from data() in a component, it is internally made reactive by reactive(). The template is compiled into a render function that makes use of these reactive properties.