Published
- 7 min read
Episode 1: The Encounter at the Mysterious Laboratory
Ponkichi’s Vue.js Adventure: The Day His Life Changed at the Forest Doctor’s Lab
Note
This story was translated and written with the help of generative AI, aiming to make learning frontend technology enjoyable. Every effort has been made to ensure technical and translation accuracy, but we cannot guarantee that everything is absolutely perfect. Please treat this series as a friendly learning aid, and enjoy it with an open mind!
Characters
- Dr. Frontend: The wise Frontend Doctor who lives in a laboratory deep in the forest. He knows everything about frontend technology and always answers Ponkichi’s innocent questions with kindness and humor.
- Ponkichi: A curious young raccoon dog who dreams of becoming a frontend engineer. He has just started learning Vue.js and is fascinated by its depth. When he discovers something new, he can’t help but jump up with a cheerful “Boing!”
Episode 1: A Mysterious Encounter in the Lab
In an old Western-style house deep in the forest, Dr. Frontend was wrestling with some tricky code down in his underground laboratory.
“Hmm… How can I explain this type definition more clearly…?”
Just as he scratched his head, a knock sounded at the lab’s door.
Dr. Frontend: “Oh? Who could it be at this hour?”
He opened the door and found a small raccoon dog standing there, clutching a thick programming book.
Ponkichi: “Excuse me! My name is Ponkichi. I want to become a frontend engineer, so I’ve been studying Vue.js, but…”
Ponkichi’s eyes glistened with worry.
Ponkichi: “I can write a little bit about components and the basics, but every time I start, there’s always this ‘createApp’ thing. What exactly does it do? The books just say, ‘It’s a function that creates your app’ and that’s it… The other animals in the forest told me, ‘That doctor knows everything,’ so I decided to visit you.”
Dr. Frontend: “Well, well! A young raccoon dog who wants to become a frontend engineer! How interesting. Come on in, come in.”
With sparkling eyes, Ponkichi entered the lab. The walls were lined with monitors, each displaying colorful code.
Ponkichi: “Wow! Amazing! Are all of these programs?”
Dr. Frontend: “That’s right. So, you want to learn Vue.js?”
Ponkichi: “Yes! I’ve started to understand components and data binding a little, but I have no idea what ‘createApp’ really means, even though I always write it at the beginning…”
Dr. Frontend: “Haha! You’re already writing components? Impressive! But you’re right—most people just write ‘createApp’ like it’s some sort of magic spell, without really understanding what it does.”
Ponkichi:
“Exactly! I write import { createApp } from 'vue' and then call createApp, but I just can’t sleep at night wondering what this function actually does!”
Dr. Frontend: “I see, I see. In that case, let me teach you the very first, most important step of making an application with Vue.js—the magic incantation that starts it all.”
Dr. Frontend stood in front of a large monitor and began typing on the keyboard.
import { h, createApp } from "@vue/runtime-dom";
const App = {
render() {
return h("div", "Hello, Ponkichi!");
},
};
createApp(App).mount("#app");Dr. Frontend: “This is it. Just these few lines are the magic that brings a Vue.js application to life.”
Ponkichi:
“Huh…? This is a bit different from what I’m used to. I usually write things like template and data, but what’s this h? And I’ve never seen a render function before…”
Dr. Frontend:
“Good eye! Yes, this might look a little different from the examples you’re used to. But don’t worry—you’ll understand what the h function and render are soon enough. Today, let’s focus on understanding the basics of createApp.”
Ponkichi:
“Okay… But what exactly does this createApp function do?”
Dr. Frontend grinned and pointed to a nearby browser window, where the words “Hello, Ponkichi!” were displayed.
Ponkichi: “Wow! That’s my name!”
Dr. Frontend:
“See? This createApp function is what brought your application to life.”
Ponkichi: “‘createApp’… I know it means ‘create application,’ but what is it actually doing? How is it different from the components I usually write?”
Dr. Frontend: “Great question! ‘Create’ means to make something, and ‘App’ stands for ‘application.’ But, as you said, what it actually does is what matters.”
Dr. Frontend:
“The components you usually write are like the ‘ingredients’ for a recipe. But createApp is the special function that combines all those ingredients into one complete ‘dish’—it’s like preparing the plate or bowl that holds your meal.”
Ponkichi blinked in surprise.
Ponkichi: “The plate…? So, components and applications are different things?”
Dr. Frontend:
“Exactly! Components are like the ingredients in a recipe. But createApp prepares the ‘plate’ or ‘bowl’—the container for your application. No matter how good your ingredients are, you need something to put them on, right?”
Dr. Frontend started drawing on the chalkboard:
Put the components (ingredients) in
↓
[ createApp function ]
↓
The application (the finished plate)Dr. Frontend: “By placing your component ‘ingredients’ into the application ‘bowl,’ you end up with a complete, delicious dish—your web app!”
Ponkichi:
“I get it! So the data and template I always write are the ingredients, and createApp puts them all together into an app ‘bowl’!”
Dr. Frontend:
“That’s right! And once the bowl is ready, you use mount('#app') to actually serve it up on the screen.”
Ponkichi’s face lit up with understanding, and he began hopping up and down.
Ponkichi:
“Boing! I get it now! That createApp I always wrote without thinking was a super important function that turns components into an application bowl!”
Dr. Frontend:
“Exactly! But actually, there are even deeper secrets to createApp.”
Ponkichi: “Secrets? What kind of secrets?”
Dr. Frontend: “For example, if you try to pass the wrong kind of component, it will tell you ‘that’s not right!’ This is done with a mechanism called TypeScript’s ‘types.’”
Ponkichi: “Types…?”
Dr. Frontend: “Yep! Don’t worry about the details for now—it’s your first day, after all. But ‘types’ are a way of labeling data, like putting a tag on it that says ‘this is a string’ or ‘this is a number.’”
Ponkichi scribbled notes with all his might.
Dr. Frontend: “Next time, why don’t we try building a Vue app together on your own computer?”
Ponkichi: “I’d love to! But… will I really be able to do it?”
Dr. Frontend: “Of course! Everyone starts as a beginner. What matters is curiosity and taking one step at a time.”
Ponkichi wagged his tail in delight.
Ponkichi: “Thank you, Doctor! Can I come back again tomorrow?”
Dr. Frontend:
“Of course! Next time, you’ll get to write createApp yourself. And we’ll look a bit more closely at the magic behind it.”
Ponkichi: “Yay! I can’t wait! Boing!”
Ponkichi left the lab, bursting with excitement for tomorrow’s lesson. Dr. Frontend, too, looked happy to have a new apprentice.
🌟 Today’s Takeaways
createAppis the magic function that creates a Vue.js application- Just like a recipe, if you provide the right ingredients (settings), you’ll get an app
- TypeScript types are like labels for your data, helping prevent mistakes
- Programming is something anyone can learn, step by step!
Next Episode Preview:
Ponkichi’s First createApp Experience Ponkichi tries writing code himself and experiences the mysterious power of the createApp function!
👨🏫 Doctor’s Note
Ponkichi may not have noticed yet, but today’s code used an unusual import:
import { h, createApp } from "@vue/runtime-dom";
Normally, most documentation uses import { createApp } from 'vue'.
So, why did I deliberately import from @vue/runtime-dom this time?
Actually, the ‘vue’ package Ponkichi usually uses is made up of several smaller packages. Among them, @vue/runtime-dom provides the essential features needed to run Vue apps in the browser, like the renderer and DOM manipulation APIs.
In other words, when you write import { createApp } from 'vue', Vue is internally bringing in createApp from @vue/runtime-dom for you.
Today, I wanted you to get a sense of Vue’s internal structure, so I had us import directly from the core.
Someday, I’ll explain all about @vue/runtime-dom in a special bonus episode. For now, just remember—there’s a whole world hidden behind the ‘vue’ package you use every day!
End of Episode 1