Vue Get Started

Create a project with create-vue.

✍️ 3 exercises + code challenge in this lesson

For real projects, use the official scaffolding tool (powered by Vite):

  1. npm create vue@latest
  2. Answer the questions (TypeScript, Router, Pinia…).
  3. cd my-app, npm install, npm run dev

Projects use Single-File Components (.vue files) with <template>, <script setup> and <style> sections.

The examples here use the CDN build so they run directly in the editor.

Key Takeaways: Vue Get Started

Mastering Vue Get Started 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 Get Started Code Example

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

<div id="app">
  <p>{{ framework }} version {{ version }}</p>
</div>

<script>
  Vue.createApp({
    data() {
      return { framework: "Vue", version: Vue.version };
    }
  }).mount("#app");
</script>
Free sign-in required · Google login available

Vue Get Started Practice Exercises

Check what you learned in “Vue Get Started”.

/ 3 solved
Fill in the blank

Scaffold a new Vue project.

npm create @latest
✓ Correct! Not quite. Try again.
Multiple choice

Which file type holds a Single-File Component?

✓ Correct! Not quite. Try again.
Code challenge

Return a data property year = 2026 and show it in the <p>.

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.

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