Create a Vue app

1. Application example​

EachVueAll applications are throughcreateAppFunction creates a newApplication example：

import { createApp } from 'vue'




 



const app = createApp({



  /*Root Component Options*/




})

AI writing code

2. RootComponents ​

We're passing increateAppThe object of   is actually a component, and each application requires a "root component" and other components will serve as itsSubcomponents。

If you are usingSingle file component, we can import the root component directly from another file.

import { createApp } from 'vue'




// Import the root component from a single file component




import App from './'




 




const app = createApp(App)

AI writing code

While many of the examples in this guide require only one component, most real applications consist of a nested, reusable component tree. For example, a component tree for a Todos application might look like this:

App (root component)



├─ TodoList



│  └─ TodoItem



│     ├─ TodoDeleteButton



│     └─ TodoEditButton



└─ TodoFooter



   ├─ TodoClearButton



   └─ TodoStatistics

AI writing code

We will discuss how to define and combine multiple components in subsequent chapters of the guide. Before that, we have to focus on what is happening within a component.

3. Mount the application​

The application instance must be called.mount()The method will be rendered only after it is done. This method receives a "container" parameter, which can be an actual DOM element or a CSS selector string

<div id="app"></div>
AI writing code

('#app')
AI writing code

The contents of the application root component will be rendered in the container element. The container element itselfWon'tConsidered as part of the application.

.mount()Methods should always be called after the entire application configuration and resource registration are completed. Also note that unlike other resource registration methods, its return value is the root component instance rather than the application instance.

Root component intemplate ​

The template for the root component is usually part of the component itself, but it can also be provided separately directly by writing the template inside the mount container:

<div id="app">




  <button @click="count++">{{ count }}</button>





</div>


AI writing code

import { createApp } from 'vue'




 




const app = createApp({



  data() {



    return {



      count: 0




    }



  }



})



 



app.mount('#app')

AI writing code

When the root component is not settemplateWhen the option is selected, Vue will automatically use the container'sinnerHTMLAs a template.

DOM internal templates are usually used forNo build stepsVue app. They can also be used with server-side frameworks where the root template may be dynamically generated by the server.

5. Application configuration​

An application example will be exposed.configObjects allow us to configure some application-level options, such as defining an application-levelError handling, used to catch errors on all subcomponents:

 = (err) => {



  /*Handling errors*/




}

AI writing code

Application instances also provide some methods to register available resources within the application scope, such as registering a component:

('TodoDeleteButton', TodoDeleteButton)
AI writing code

This makesTodoDeleteButtonAvailable anywhere in the application. We will discuss registration of components and other resources in subsequent chapters of the guide. You can alsoAPI ReferenceView the complete list of the application instance APIs in .

Make sure that all application configurations are completed before mounting the application instance!

6. Multiple application examples​

Application instances are not limited to only one.createAppThe API allows you to create multiple coexisting Vue applications in the same page, and each application has its own scope for configuration and global resources.

const app1 = createApp({



  /* ... */




})



app1.mount('#container-1')



 



const app2 = createApp({



  /* ... */




})



app2.mount('#container-2')

AI writing code

If you are using Vue to enhance server rendering HTML and want Vue to control a special small part of a large page, you should avoid mounting a separate Vue application instance to the entire page, but instead create multiple small application instances to mount them separately to the required elements.