Vue Introduction

What Vue is and how to add it to a page.

✍️ 3 exercises + code challenge in this lesson

Next ❯

Vue.js is a JavaScript framework for building user interfaces, created by Evan You. It is easy to start with and scales to large applications.

Declarative rendering: describe the UI with templates; Vue keeps the page in sync with your data.
Reactivity: when data changes, the page updates automatically.
Components: build the UI from reusable pieces.

Add Vue with a <script> tag, then create an app with Vue.createApp({...}).mount("#app").

Key Takeaways: Vue Introduction

Mastering Vue Introduction helps you write clean and reliable Vue.js code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Vue Introduction Code Example

Vue.js

<script src="https://unpkg.com/vue@3.5.12/dist/vue.global.prod.js"></script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
  Vue.createApp({
    data() {
      return { message: "Hello, Vue!" };
    }
  }).mount("#app");
</script>

Free sign-in required · Google login available

Vue Introduction Practice Exercises

Check what you learned in “Vue Introduction”.

/ 3 solved

Fill in the blank

Mount the app on the #app element.

Vue.createApp({ }).("#app");

✓ Correct! Not quite. Try again.

Multiple choice

What does "reactive" mean in Vue?

The page updates automatically when data changes The page reloads on every click It uses CSS animations It only works on mobile

✓ Correct! Not quite. Try again.

Code challenge

Show the message data property ("Hi Vue") inside the <h1>.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Next ❯

Vue Get Started

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

Vue Introduction

💡 Key Takeaways: Vue Introduction

Vue Introduction Code Example

Vue Introduction Practice Exercises

Key Takeaways: Vue Introduction