frontendBaby
🇯🇵 日本語

Published

- 5 min read

Episode 4: What createApp Returns

Vue Ponkichi Ponkichi and Vue Tech Light Novel

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 4🦝: What createApp Returns

Ponkichi arrived energetically at the lab today. While reviewing the code they’d written so far with the doctor, he suddenly noticed something.

Ponkichi: “Doctor, we’ve always been writing createApp(App).mount('#app') as one line, but…”

Ponkichi pointed to the code on the monitor.

Ponkichi: “This createApp(App) before .mount()—what exactly does it become after it’s executed? Since it connects directly to .mount(), something must be getting returned, right?”

The doctor was impressed by Ponkichi’s sharp observation and smiled warmly.

Dr. Frontend: “Excellent question, Ponkichi! You’re absolutely right! The createApp function returns something when it’s executed. Understanding what that something is will be the key to understanding Vue applications more deeply.”

Dr. Frontend: “It’s called an ‘application instance.’ Seeing is believing, so let’s try this.”

The doctor modified the code slightly.

import { createApp, h } from 'vue'

const App = {
  render() {
    return h('h1', 'The True Identity of the Application Instance!')
  }
}

// Let's store what createApp returns in a variable called app
const app = createApp(App)
console.log(app) // Let's look at what's inside in the console

app.mount('#app')

Ponkichi: “Oh! What was one line became two lines! You put it in a variable called app.”

Dr. Frontend: “That’s right. Now, take a look at the browser’s developer tools console.”

When Ponkichi peered at the console, he saw Object displayed there, filled with many properties like component, directive, mount, unmount, use, and provide.

Ponkichi: “Wow! It’s not just a function—it returned an object packed with lots of features! mount was just one of them!”

Dr. Frontend: “Exactly! This app instance is like a ‘command center’ for your entire application. For example, you can use app.component() to register ‘global components’ that can be called from any component. With app.use(), you can add useful plugins to extend your entire application’s functionality.”

Ponkichi: “Command center…! I see! So before mounting the application, you can set up all sorts of configurations on this app!”

The doctor nodded with satisfaction.

Dr. Frontend: “That’s right. createApp isn’t just magic that creates an application ‘container’—it’s also magic that creates a powerful ‘command center’ to manage and configure that container.”

Ponkichi was amazed to discover that behind the single line of code he’d been casually writing lay such a vast world, and he couldn’t hide his excitement.

Ponkichi: “Thank you, Doctor! Now I understand what createApp really is! Boing!”

Dr. Frontend: “Good. Next time, let’s learn about how components talk to each other—the foundation called ‘Props.’”

Ponkichi: “Yes! I look forward to it!”

Having gained the command center of applications, Ponkichi’s adventure was just beginning.

🌟 Today’s Takeaways

  • createApp(App) isn’t just a function call—it returns a special object called an application instance.
  • This instance serves as the “command center” for your entire application.
  • You can use methods like app.component() and app.use() to configure and extend functionality across your entire app.
  • .mount() is just one of many features this command center provides.

Next Episode Preview: “Breathing Life into Components with ‘Props’”

Components can’t live alone? We’ll explore the mystery of “Props,” the magic that allows parent and child components to exchange data!

👨‍🏫 Doctor’s Note

It seems Ponkichi is beginning to understand the convenience of the “application instance” returned by createApp. Adding plugins with app.use(), registering global components with app.component()… These are all features for creating rich applications in the browser (DOM) world.

But what if Vue’s domain wasn’t limited to just browsers?

Do you remember in Episode 1’s note when I mentioned that createApp comes from a package called @vue/runtime-dom? Actually, at the heart of Vue lies another, even more important package: @vue/runtime-core.

If @vue/runtime-dom is “functionality for running Vue in the browser world,” then @vue/runtime-core is like “Vue’s soul”—a package containing only Vue’s purest functionality (reactivity system, virtual DOM, etc.) that doesn’t depend on any specific environment.

And hidden within this @vue/runtime-core is a function that could be called the ultimate magic: createRenderer.

This createRenderer is a function that creates the “rendering engine” itself—the thing that actually draws Vue component trees in some form. createApp is actually just a convenient shortcut provided to us with a “browser DOM rendering engine” pre-built using this createRenderer.

So what happens if we use createRenderer directly? By defining custom rendering logic, we can even run Vue components outside the browser world.

In fact, clever developers around the world have used this mechanism to achieve things like:

  • 🎨 Vue components that render to Canvas - Drawing shapes and graphics on Canvas instead of DOM elements
  • 📦 Building UIs with Vue for CLI tools - Interactive command-line tools that run in terminals
  • 📱 Using Vue for native apps or WebGL - Leveraging Vue components in mobile apps or 3D graphics worlds
  • 🧪 Testing and experimenting with Vue’s rendering behavior - Performing virtual rendering in test environments to verify Vue’s behavior

In other words, the Vue component writing techniques Ponkichi is learning aren’t just for creating web pages. When you put your mind to it, they have universal power to build UIs anywhere.

Well, this might be too grand a story for now. But I’d be happy if you kept in the back of your mind that beyond the knowledge you’re learning lies infinite possibilities that transcend the boundaries of browsers.

End of Episode 4