Vue project structure walkthrough - Mini Project: Build & Apply

Vue project structure walkthrough

📖 Scenario: You are starting a new Vue 3 project to build a simple user profile card. Understanding the project structure will help you organize your files and code properly.

🎯 Goal: Build the basic Vue project structure with a main App.vue component, a components folder, and a UserProfile.vue component inside it.

📋 What You'll Learn

Create a components folder inside the src directory

Create a UserProfile.vue component inside the components folder

Set up the App.vue file to import and use UserProfile.vue

Use the <script setup> syntax in Vue 3 components

💡 Why This Matters

🌍 Real World

Organizing Vue project files and components is essential for building scalable and maintainable web applications.

💼 Career

Understanding Vue project structure and component communication is a key skill for frontend developers working with Vue.js.

1

Create the components folder and UserProfile.vue file

Inside the src directory, create a folder named components. Then create a file named UserProfile.vue inside the components folder with a basic Vue component structure using <template> and <script setup> tags.

Vue

# Create the components folder and UserProfile.vue file with a basic Vue component structure


  



// Your script here

Need a hint?

Remember to use <template> and <script setup> tags in your Vue component.

2

Set up App.vue to import UserProfile.vue

In the src directory, open App.vue. Import the UserProfile component from ./components/UserProfile.vue using the <script setup> syntax. Add the <UserProfile /> tag inside the <template> section.

Vue

  



// Import UserProfile component here

Need a hint?

Use import UserProfile from './components/UserProfile.vue' inside <script setup> and add <UserProfile /> in the template.

3

Add a name prop to UserProfile.vue

In UserProfile.vue, add a defineProps call inside the <script setup> block to accept a name prop of type String. Update the template to display Hello, {{ name }}! inside a <p> tag.

Vue

  



// Define props here

Need a hint?

Use const props = defineProps({ name: String }) and display {{ name }} in the template.

4

Pass the name prop from App.vue

In App.vue, update the <UserProfile /> tag to pass the name prop with the value "Alice".

Vue

  



import UserProfile from './components/UserProfile.vue'

Need a hint?

Add name="Alice" inside the <UserProfile /> tag.