Take a look into the following codepen which generates some delicious membrillos. We’ll use it to go through the different stages of a Vue component.

https://codepen.io/AjitsinghKamal/pen/oNyRXbg

The first step - setting up our Vue app.

Preparation

Let's start making some membrillos. To prepare them we must follow a good recipe. A .vue file is that recipe. It basically describes what we need and how we need it.

On the other hand, the browser is like the oven which will process everything and gives us the delicious treats we deserve.

Cool, but who’s the chef then? Well, the Vue compiler is the chef. It knows how to read the recipe in .vue format and transforms our ingredients into something that the browser can understand and work upon.

As a part of this process, we must first get our chef in the house.

• This is basically described in this section of the Vue guide.

Let’s take a detour to the guide and go step by step to understand it.

To bring in our chef(or Vue compiler) we use tools like vue-cli or vite.

npm init vue@latest 

The above command starts the process and once you run it, it will create the project for us which is synonymous with setting up our kitchen 😃

Now you might find this piece of code in the built project.

import { createApp } from 'vue'

createApp().mount('#app')