Translate: essentials/application

src/guide/essentials/application.md

@@ -1,32 +1,32 @@
-# Creating a Vue Application {#creating-a-vue-application}
+# Tạo một ứng dụng Vue {#creating-a-vue-application}
 
-## The Application Instance {#the-application-instance}
+## Instance của ứng dụng {#the-application-instance}
 
-Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function:
+Mỗi ứng dụng Vue bắt đầu bằng việc tạo một **application instance (instance ứng dụng)** mới với hàm [`createApp`](/api/application#createapp):
 
 ```js
 import { createApp } from 'vue'
 
 const app = createApp({
-  /* root component options */
+  /* root component options (các tùy chọn của component gốc) */
 })
 ```
 
-## The Root Component {#the-root-component}
+## Root Component (Component gốc) {#the-root-component}
 
-The object we are passing into `createApp` is in fact a component. Every app requires a "root component" that can contain other components as its children.
+Đối tượng mà chúng ta truyền vào `createApp` thực chất là một component. Mỗi app đều cần một "root component (component gốc)" có thể chứa các component khác như là các phần tử con của nó.
 
-If you are using Single-File Components, we typically import the root component from another file:
+Nếu bạn đang sử dụng Single-File Components (SFC - component trong một file), thông thường chúng ta import root component từ một file khác:
 
 ```js
 import { createApp } from 'vue'
-// import the root component App from a single-file component.
+// import root component App từ một single-file component.
 import App from './App.vue'
 
 const app = createApp(App)
 ```
 
-While many examples in this guide only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this:
+Trong khi nhiều ví dụ trong hướng dẫn này chỉ cần một component, hầu hết các ứng dụng thực tế được tổ chức thành một cây (tree) gồm nhiều component lồng nhau và có thể tái sử dụng. Ví dụ, cây component của một ứng dụng Todo có thể trông như sau:
 
 ```
 App (root component)
@@ -39,11 +39,11 @@ App (root component)
    └─ TodoStatistics
 ```
 
-In later sections of the guide, we will discuss how to define and compose multiple components together. Before that, we will focus on what happens inside a single component.
+Ở các phần sau của hướng dẫn, chúng ta sẽ bàn về cách định nghĩa và kết hợp (compose) nhiều component lại với nhau. Trước đó, chúng ta sẽ tập trung vào những gì xảy ra bên trong một component đơn lẻ.
 
-## Mounting the App {#mounting-the-app}
+## Mounting App (gắn ứng dụng vào DOM) {#mounting-the-app}
 
-An application instance won't render anything until its `.mount()` method is called. It expects a "container" argument, which can either be an actual DOM element or a selector string:
+Một application instance sẽ không render (hiển thị) gì cho đến khi phương thức `.mount()` của nó được gọi. Nó yêu cầu một đối số "container (phần tử chứa)", có thể là một DOM element thật hoặc một chuỗi selector:
 
 ```html
 <div id="app"></div>
@@ -53,13 +53,13 @@ An application instance won't render anything until its `.mount()` method is cal
 app.mount('#app')
 ```
 
-The content of the app's root component will be rendered inside the container element. The container element itself is not considered part of the app.
+Nội dung của root component của app sẽ được render bên trong phần tử container. Bản thân phần tử container không được xem là một phần của app.
 
-The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.
+Phương thức `.mount()` luôn phải được gọi sau khi tất cả cấu hình của app và việc đăng ký asset (tài nguyên) đã hoàn tất. Ngoài ra lưu ý rằng giá trị trả về của nó, khác với các phương thức đăng ký asset, là instance của root component thay vì application instance.
 
-### In-DOM Root Component Template {#in-dom-root-component-template}
+### Template của Root Component trong DOM (In-DOM Root Component Template) {#in-dom-root-component-template}
 
-The template for the root component is usually part of the component itself, but it is also possible to provide the template separately by writing it directly inside the mount container:
+Template của root component thường là một phần của chính component đó, nhưng cũng có thể cung cấp template riêng bằng cách viết trực tiếp nó bên trong container được mount:
 
 ```html
 <div id="app">
@@ -81,33 +81,33 @@ const app = createApp({
 app.mount('#app')
 ```
 
-Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
+Vue sẽ tự động sử dụng `innerHTML` của container làm template nếu root component chưa có tùy chọn `template`.
 
-In-DOM templates are often used in applications that are [using Vue without a build step](/guide/quick-start.html#using-vue-from-cdn). They can also be used in conjunction with server-side frameworks, where the root template might be generated dynamically by the server.
+Template trong DOM (In-DOM templates) thường được dùng trong các ứng dụng [sử dụng Vue mà không có build step (bước build)](/guide/quick-start.html#using-vue-from-cdn). Chúng cũng có thể được dùng cùng với các framework phía server (server-side frameworks), nơi mà template gốc có thể được tạo động bởi server.
 
-## App Configurations {#app-configurations}
+## Cấu hình App {#app-configurations}
 
-The application instance exposes a `.config` object that allows us to configure a few app-level options, for example, defining an app-level error handler that captures errors from all descendant components:
+Application instance cung cấp một object `.config` cho phép chúng ta cấu hình một số tùy chọn ở cấp độ app, ví dụ như định nghĩa một error handler (bộ xử lý lỗi) cấp app để bắt lỗi từ tất cả các component con:
 
 ```js
 app.config.errorHandler = (err) => {
-  /* handle error */
+  /* xử lý lỗi */
 }
 ```
 
-The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:
+Application instance cũng cung cấp một số phương thức để đăng ký các asset (tài nguyên) ở phạm vi app. Ví dụ, đăng ký một component:
 
 ```js
 app.component('TodoDeleteButton', TodoDeleteButton)
 ```
 
-This makes the `TodoDeleteButton` available for use anywhere in our app. We will discuss registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its [API reference](/api/application).
+Điều này giúp `TodoDeleteButton` có thể được sử dụng ở bất kỳ đâu trong app của chúng ta. Chúng ta sẽ thảo luận về việc đăng ký component và các loại asset khác ở các phần sau của hướng dẫn. Bạn cũng có thể xem toàn bộ danh sách API của application instance trong phần [API reference (tài liệu API)](/api/application).
 
-Make sure to apply all app configurations before mounting the app!
+Hãy đảm bảo áp dụng tất cả cấu hình của app trước khi mount app!
 
-## Multiple Application Instances {#multiple-application-instances}
+## Nhiều Application Instance {#multiple-application-instances}
 
-You are not limited to a single application instance on the same page. The `createApp` API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:
+Bạn không bị giới hạn chỉ một application instance trên cùng một trang. API `createApp` cho phép nhiều ứng dụng Vue cùng tồn tại trên một trang, mỗi ứng dụng có phạm vi cấu hình và asset global riêng:
 
 ```js
 const app1 = createApp({
@@ -121,4 +121,4 @@ const app2 = createApp({
 app2.mount('#container-2')
 ```
 
-If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.
+Nếu bạn sử dụng Vue để tăng cường (enhance) HTML được render từ server và chỉ cần Vue kiểm soát một số phần cụ thể của trang lớn, hãy tránh mount một application instance duy nhất cho toàn bộ trang. Thay vào đó, tạo nhiều application instance nhỏ và mount chúng vào các phần tử mà chúng chịu trách nhiệm quản lý.