Hey folks! How are you, are you well? Today I bring you such an exciting topic that you wouldn’t believe. I remember the times when I first encountered a front-end framework… Oh, those days! It’s like opening a door, and a whole different world awaits inside. Vue.js was exactly like that for me. I will never forget that moment when we made our very first ‘Hello World’ application. It just displayed a simple message on the screen, that’s all. But beneath that simplicity, the huge potential was incredible. Thinking back now, I smile, but at that time I felt like I was designing a spaceship 🙂
Now you might say, ‘Teacher, what Hello World, what are you after?’ You are right. But the foundation of this job is this, friends. Just like the foundation of a building, the sturdier it is laid, the higher you can build. The famous ‘Hello World’ of Vue.js is exactly that solid foundation. Don’t underestimate how simple it looks; it actually encompasses many concepts.
Firstly, there is a tool called Vue CLI. Once installed on your computer, you can create a brand new Vue project with a single command in the terminal. Think of it as a magic wand. When you type ‘vue create my-first-app’, a ready-made project structure appears before you. This structure already has everything thought out. Where your files will be located, how they will be organized, all is set.
The best part of this CLI? It handles everything for you. It installs package dependencies, starts a development server, and sometimes even gives you hints when you make mistakes. So you only focus on your code. By the way, creating a project for the first time can be a bit confusing; you might wonder ‘Where should I click, what should I choose?’ Take a deep breath, and usually continuing with default options is the most sensible choice at the beginning. You’ll learn later how to change these options.
After the project is created, among the files you will mostly visit is the ‘src’ folder. And our story begins here. Inside the ‘src’ folder, you will see a file called ‘App.vue’. This is where we will write our famous ‘Hello World’ message. This file is actually a Vue component. What is a component? For now, think of it as a building block. Every part of your website can be a component; a button, a menu, even a whole page. ‘App.vue’ is our main component.
So, what is inside this ‘App.vue’ file? Usually, it consists of three main sections: <template>, <script>, and <style>. In the <template> section, you write your HTML code. This is where the skeleton of your page takes shape. In the <script> section, you write your JavaScript code. It is like the brain of your application. Data management, logical operations, user interactions are handled here. And <style>… This is the place where your page gets prettified. You style your page with CSS codes. The fact that these three sections coexist is one of Vue’s most loved features. Like ingredients of a dish, or spices and presentation, when combined, they create something wonderful.
Now, let’s get to the famous ‘Hello World’ part. Go to the <template> section inside the ‘App.vue’ file. You will probably see something already written there. Simply remove that content and add the following:
<template> <div id="app"> <h1>Hello World!</h1> </div> </template>That’s it! So simple! Did you see? We just wrote ‘Hello World!’ inside an <h1> tag. Even this very simple step is a great starting point to understand Vue’s working logic. When I first wrote this code, I felt like I had achieved a big success. Then I started the development server (which is also a simple command like ‘npm run serve’), opened the browser, and there it was, showing ‘Hello World!’ on the screen. That moment of joy… Isn’t it wonderful?
Also, there can be a situation where your project structure is a little different initially. For example, the ‘App.vue’ file’s template section might contain an ‘img’ tag or something else. What shall we do then? It’s simple. Remove the extra parts and just add the code you wrote. Sometimes it might seem like something has been added, but actually, it hasn’t. Anyway, just understand the main idea.
By the way, perhaps a question might come to your mind: ‘How can we make this ‘Hello World’ message more dynamic?’ Here, it’s important to mention Vue’s data binding feature. But let’s save that for another conversation. For now, just taking this first step, displaying that first message on the screen, is what matters. This is the initial victory of the job.
Ultimately, this ‘Hello World’ event is just the beginning. What you can do with Vue.js is only a small indication. But you can’t progress without taking that first step and printing that first message. Think of it like starting mountain climbing: the first step near the peak gives confidence to reach higher.
Recently, I went on a camping trip with my wife and our child. We were in Bursa’s highlands, in nature. Sitting by the campfire in the evening, looking at the starry sky… At that moment, I remembered the ‘Hello World!’ message from my first Vue project. It was such a simple thing, but the lessons it taught me, the excitement of that moment, are still vivid. That simple piece of code showed me how fun a journey into software can be. Sometimes, the most complex problems are hidden at the simplest starting points.