Running and building a Vue app - Mini Project: Build & Apply

Running and building a Vue app

📖 Scenario: You want to create a simple Vue app that shows a welcome message. Then you will learn how to run it locally and build it for production.

🎯 Goal: Build a Vue app with a basic component, run it on your computer, and create a production build.

📋 What You'll Learn

Create a Vue app with a root component

Add a message data property

Display the message in the template

Run the app locally using `npm run dev`

Build the app for production

💡 Why This Matters

🌍 Real World

Vue apps are used to build interactive websites and web apps that run smoothly in browsers.

💼 Career

Knowing how to run and build Vue apps is essential for frontend developers working with modern JavaScript frameworks.

1

Create the Vue app and root component

Create a Vue app with a root component named App. In the App.vue file, add a template section with a <h1> tag that says Welcome to Vue!.

Vue

  



// Your code here

Need a hint?

Use the <template> tag to write HTML and put the welcome message inside an <h1> tag.

2

Add a message data property

In the App.vue file, add a message variable inside the <script setup> section. Set it to the string "Hello from Vue!". Then update the <h1> tag to display the message variable using Vue's template syntax.

Vue

  {{ message }}



// Your code here

Need a hint?

Use ref from Vue to create a reactive variable called message.

3

Run the Vue app locally

Open a terminal in your project folder. Run the command npm run dev to start the Vue development server. This will let you see your app in the browser at http://localhost:5173.

Vue

# Your code here

Need a hint?

Use your terminal to run npm run dev and open the browser at the shown address.

4

Build the Vue app for production

In the terminal, run the command npm run build to create a production-ready version of your Vue app. This will generate a dist folder with optimized files you can deploy.

Vue

# Your code here

Need a hint?

Use your terminal to run npm run build and check the dist folder.