Vue — Installation

CDN

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

npm install

npm install vue

Create project with Vite

npm create vue@latest my-app
cd my-app
npm install
npm run dev

Manual setup

mkdir my-vue-app
cd my-vue-app
npm init -y
npm install vue@3 vite @vitejs/plugin-vue

vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

src/main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue:

<template>
  <h1>Hello Vue!</h1>
</template>

DevTools

Install the Vue DevTools browser extension for debugging.

TypeScript support

npm install vue@latest
npm install -D typescript vue-tsc

Mini Practice

Set up Vue with CDN
Create a project with Vite
Configure TypeScript
Install Vue DevTools

Up Next

Continue with Vue CLI - Project scaffolding tools.

Frequently Asked Questions about Installation

What is Installation in Vue?

Installation is a fundamental concept in Vue. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Installation?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Installation.

Why is Installation important in Vue?

Installation is essential for Vue development. Understanding this concept will help you write better code and solve real-world problems more effectively.