Animation: the state orders changes from 0 to 1 to 2, a dot travels through Vue, and the screen shows the same number

# Introduction to Vue Course: [Vue.js](https://www.devtutorials.ai/learn/vue) · Section: Vue Foundations Source: https://www.devtutorials.ai/learn/vue/vue-foundations/introduction-to-vue > What Vue is and why it was created, the progressive framework idea, the Vue ecosystem, Vue 2 vs Vue 3, Options API vs Composition API, CDN vs Vite, creating and running a project, its files, and your first app with createApp(), mount(), ref() and a click. ## Vue Introduction - **Vue** is a JavaScript tool for building web pages that change when you click, type or load data. - You write what the page should look like. - Vue keeps the page up to date for you. - In this lesson, you will set up Vue and build your first small app. **Simple lesson:** Vue updates the page for you when your data changes. ### A Real-World Example - Meera runs a small food stall called **Meera's Kitchen**. - She wants a web page with a menu and an order counter. - Each time a customer taps **Add order**, the number must go up. - With plain JavaScript, she must find the number on the page and change it by hand. - With Vue, she only changes the number in her code. Vue changes the page. Press **▶ Run**, then click the button in the preview. const orders = ref(0); function addOrder(): void { orders.value++; } `, "main.ts": `import { createApp } from "vue"; createApp(App).mount("#app"); `, }} /> - **What happened:** the button adds 1 to `orders`. - Vue saw the change and showed the new number at once. ### What You Will Learn 1. What Vue is and why people use it. 2. What a progressive framework means. 3. The difference between Vue 2 and Vue 3. 4. The two ways to write Vue code: Options API and Composition API. 5. Two ways to add Vue to a page: CDN and build tool. 6. How to create, run and build a Vue project. 7. What each file in a new project does. 8. How to start your first app with `createApp()` and `mount()`. 9. Which tools help you find problems. ## What Is Vue? - **Vue** = a JavaScript framework for building user interfaces. - **Framework** = ready-made code and rules that help you build apps faster. - **User interface (UI)** = the part of an app you see and click. - Vue is free and open source. - It is said like the English word "view". ### Data Drives the Screen - In Vue, you keep values like `orders` in your code. These values are called **state**. - The template shows the state on the screen. - When the state changes, Vue updates only the part of the page that uses it. - Watch the animation: the code changes first, then Vue, then the screen.

The state changes first. Vue notices. The screen shows the new value.

**State** = the values your app remembers, such as the number of orders. In Vue, you change the state, and Vue changes the screen. **Simple lesson:** change the state, and Vue changes the screen. ## Why Vue Was Created - Vue was made by **Evan You**. He used AngularJS in projects while working at Google. - He wanted the useful parts of AngularJS in a smaller, simpler tool. - The first version came out in **2014**. - **Vue 3** came out in **2020**. It became the default version in 2022. - Today, a core team and a large community look after Vue. ### Features of Vue - **Easy start:** a page with one script tag is enough to try it. - **Templates:** you write HTML with a few extra Vue rules. - **Reactivity:** the screen updates when data changes. - **Components:** you build the page from small, reusable parts. - **Single-File Components:** the HTML, code and CSS of one part live in one `.vue` file. - **Fast and small:** Vue only updates what changed. - **TypeScript support:** Vue 3 itself is written in TypeScript. **Simple lesson:** Vue was built to be simple to start and strong enough for big apps. ## A Progressive Framework - **Progressive** = you can use a little of Vue, or all of it. - You add more pieces only when your app needs them. - Some tools ask you to learn everything on day one. Vue does not. - Watch the layers build up, from one script tag to full websites.

Start with the bottom layer. Add a layer only when your app needs it.

### The Vue Ecosystem - **Ecosystem** = the official tools that work with Vue. - **Vite:** starts and builds your project. - **Vue Router:** moves between pages. You will learn it in **Vue Router Basics**. - **Pinia:** keeps data that many parts share. You will learn it in **State Management with Pinia**. - **Vue DevTools:** lets you look inside your running app. - **Nuxt:** a bigger framework built on Vue for full websites. You will learn it in **Nuxt: Full-Stack Vue**. **Simple lesson:** start small, and add tools only when you need them. ## Where Vue Is Used - **Interactive pages:** search boxes, filters, order counters. - **Single-Page Application (SPA)** = one page that changes its content without a full reload. - **Progressive Web App (PWA)** = a website you can install and use like a phone app. - **Dashboards:** charts and tables that update often. - **Online shops:** product lists, carts and checkout. - **Business apps:** big apps for offices and teams. Before you start, you should know basic HTML, basic CSS and basic JavaScript: variables, functions, objects and arrays. **Simple lesson:** Vue works for small widgets and for big apps. ## Vue 2 vs Vue 3

| Point | Vue 2 | Vue 3 | |---|---|---| | Released | 2016 | 2020 | | Support | Ended on 31 December 2023 | Current and supported | | Start an app | `new Vue(...)` | `createApp(...)` | | Composition API | Added late, as an extra | Built in | | TypeScript | Limited | Strong | | Speed and size | Good | Faster and smaller |

- This course teaches **Vue 3** only. - You may still see Vue 2 code in old projects and old blog posts. - If you see `new Vue(...)`, it is Vue 2 code. **Simple lesson:** learn Vue 3. Vue 2 no longer gets updates. ## Options API vs Composition API - Vue gives you two styles to write the same component. - **Options API** = you fill in named sections such as `data` and `methods`. - **Composition API** = you write normal variables and functions inside ` `, "main.ts": `import { createApp } from "vue"; createApp(App).mount("#app"); `, }} /> - **What happened:** `this.orders++` changed the data, and the page updated. const orders = ref(0); function addOrder(): void { orders.value++; } `, "main.ts": `import { createApp } from "vue"; createApp(App).mount("#app"); `, }} /> - **What happened:** the same page, but the code uses plain variables and functions. - There is no `this` to worry about. **Simple lesson:** two styles, same result. This course uses the Composition API. ## Two Ways to Add Vue ### Using Vue from a CDN - **CDN** = a website that hosts files you can link to. - You add one ` ``` - The script tag creates a global `Vue` object. - `Vue.createApp()` uses the HTML inside `#app` as the template. - Run the same script below.

Today's special: {{ special }}

\`, }).mount("#app"); `, }} /> On a real page, the `unpkg.com` link loads Vue from the internet. In this lab, the preview already has a fixed copy of Vue 3, so the box only holds the script. The template is passed as `template` because the box has no HTML file. ### Using Vue with a Build Tool - **Build tool** = a program that prepares your code for the browser. - Vue uses a build tool called **Vite** (said "veet", French for fast). - It lets you write `.vue` files and TypeScript. - It makes the final files small and fast. - Real Vue apps use this way.

The build tool adds one step. Vite turns `.vue` and `.ts` files into plain JavaScript the browser understands.

| Point | CDN | Build tool (Vite) | |---|---|---| | Setup | One script tag | Install Node.js, create a project | | `.vue` files | No | Yes | | TypeScript | No | Yes | | Best for | Trying Vue, small widgets | Real apps |

**Simple lesson:** use the CDN to try Vue. Use Vite for real projects. ## Creating a Vue Project ### Install Node.js - **Node.js** = a program that runs JavaScript outside the browser. Vite needs it. - **npm** = a tool that comes with Node.js. It downloads code packages. - Download a recent **LTS** version from nodejs.org. LTS means it gets long-term fixes. - Current Vite needs Node.js **20.19 or newer** (or 22.12+). An older Node gives a start-up error. - Then check both versions in a terminal. ```bash node -v # v22.12.0 npm -v # 10.9.0 ``` - Each command prints a version number. - Your numbers may be different. Any recent LTS version works. ### Create the Project with create-vue - **create-vue** = the official tool that makes a new Vue project with Vite. - It asks you a few questions, then creates the folder. ```bash npm create vue@latest ``` It asks for a project name, then shows a list of features. Press **Space** to tick one and **Enter** when done. For this course: - **Project name:** `meeras-kitchen`. - **TypeScript:** tick it if you picked TypeScript in the top bar. Leave it if you picked JavaScript. - **Router** and **Pinia:** leave them for now. You will add them later. - **Vitest:** tick it. You will use it in **Testing Vue Apps**. - **ESLint:** tick it. It warns you about mistakes. - The exact questions can change between versions. If you see Yes/No questions instead, give the same answers. ### Install, Run and Build ```bash cd meeras-kitchen npm install # 1. download the packages the project needs npm run dev # 2. start the dev server # ➜ Local: http://localhost:5173/ npm run build # 3. make the final files in the dist folder ``` - **npm install:** fills a `node_modules` folder with packages. - **npm run dev:** starts a **dev server** = a small local website for testing. Open the link it prints. - **npm run build:** makes small, fast files in `dist/`. You upload these to a real website. - Stop the dev server with **Ctrl + C**. Easy way to remember: **create** once, **install** once, **dev** every day, **build** when you publish. **Simple lesson:** create, install, run. Build only when you want to publish. ## Project Structure - A new project has a few folders and files. - You will write most of your code inside `src/`. - Click each file below to see what it does. - Every box in this course is a small version of this project. - Press the download button in a box to get it as a real project. **Simple lesson:** `index.html` holds the empty box, `main` starts the app, and `App.vue` is what you see. ## Your First Vue App ### How a Vue App Starts - **createApp()** = makes a new Vue app from a component. - **Root component** = the first, top component. Here it is `App.vue`. - **mount()** = puts the app inside a box on the HTML page. - Watch the four steps light up in order.

'} main runs first createApp(App) makes the app .mount("#app") shows it 1. The browser opens index.html. It has an empty box. 2. index.html loads the main file. It runs first. 3. createApp(App) makes the app from App.vue. 4. mount("#app") shows the app inside the empty box.

Every Vue 3 app starts with these four steps.

### Hello World - This project has two files: `App.vue` and the main file. - Open each tab, then press **▶ Run**. const message: string = "Hello, Vue!"; `, "main.ts": `import { createApp } from "vue"; createApp(App).mount("#app"); `, }} /> - **What happened:** the main file made the app from `App.vue` and mounted it in `#app`. - `{{ message }}` showed the text. - **`

Meera's Kitchen

{{ message }}

{{ status }}