Vueframework~30 mins

Creating a new Vue project - Try It Yourself

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Creating a new Vue project

📖 Scenario: You want to start a new website project using Vue 3.4+. Vue helps you build interactive web pages easily.

🎯 Goal: Create a new Vue project with a basic setup using the Composition API and <script setup> syntax.

📋 What You'll Learn

Create a new Vue project folder

Add a main.js file to start the app

Create an App.vue component with <script setup>

Render a simple message inside the app

💡 Why This Matters

🌍 Real World

Starting a new Vue project is the first step to building interactive web apps for websites, dashboards, or mobile apps.

💼 Career

Vue is a popular frontend framework used by many companies. Knowing how to set up a project is essential for frontend developer roles.

Progress0 / 4 steps

Create the project folder and main.js

Create a folder named my-vue-app. Inside it, create a file called main.js with this exact content: import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

Vue

# Create folder my-vue-app and add main.js with Vue app setup
# Your code here

Need a hint?

Use import statements to bring in Vue and your main component. Then create and mount the app to #app.

Create the App.vue component with script setup

Create a file named App.vue in the my-vue-app folder. Add a <template> with a <h1> that says Hello Vue!. Add a <script setup> block below the template.

Vue

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

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

Need a hint?

The <script setup> tag is a new way to write Vue components simply. The <template> holds your HTML.

Add the HTML file to mount the Vue app

Create an index.html file inside my-vue-app. Add a <div> with id="app" inside the <body>. Also add script tag to load main.js at the end of the body.

Vue


  Hello Vue!



// No script logic needed yet

Need a hint?

The div with id="app" is where Vue will show your app. The script tag loads your JavaScript.

Run the Vue app with a simple message

Ensure your App.vue template shows Hello Vue! inside an <h1>. This completes your basic Vue project setup.

Vue


  
  



// No script logic needed yet





  
  
  My Vue App

Need a hint?

Check that your <h1> text exactly matches Hello Vue!.