Updates to Nuxt 3 integration guide (#1520)

Author: JPF3N998

docs/guide/integrations/nuxt3.md

@@ -1,6 +1,6 @@
 # Nuxt 3 integration
 
-We will introduce Vue I18n integration for Nuxt 3.
+We will introduce Vue I18n integration with Nuxt 3.
 
 The following is a tutorial on setting up a Nuxt 3 application from the initial configuration.
 
@@ -39,7 +39,7 @@ Run the following command to create a Nuxt 3 application:
 npx nuxi init nuxt3-app-vue-i18n
 ```
 
-We will have run the above command, it will be created  Nuxt 3 initial project with the following directory structure:
+Once we have run the above command, the created Nuxt 3 initial project will have the following directory structure:
 
 ```
 cd nuxt3-app-vue-i18n
@@ -62,21 +62,19 @@ npm install --save-dev vue-i18n
 
 ### Setup Nuxt plugin
 
-We will set up the Nuxt plugin.
-
 Create a `plugins` directory as follows:
 
 ```sh
 mkdir plugins
 ```
 
-Next, create a Nuxt plugin file to implement for setting up Vue I18n.
+Next, create a Nuxt plugin file to set up Vue I18n.
 
 ```sh
 touch plugins/i18n.ts
 ```
 
-When we have created it, edit it with the below codes:
+Once created, define the plugin as follows:
 
 ```ts
 import { createI18n } from 'vue-i18n'
@@ -97,9 +95,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
 })
 ```
 
-We aim to set up Vue I18n in the implementation here.
-
-Configure up locale resources to localize a Nuxt 3 application is described in the next section.
+Configuration of locale resources to localize a Nuxt 3 application is described in the [next section](#localize-your-nuxt-3-application)
 
 ### Run the Nuxt 3 application
 
@@ -116,24 +112,25 @@ We will edit `app.vue` of the setup Nuxt 3 application as follows:
 </template>
 ```
 
-We have edited and saved, run the following command to run the Nuxt 3 application at local:
+We have edited and saved, run the following command to run the Nuxt 3 application in local:
 
 ```sh
 npm run dev
 ```
 
-After we will run the command and access to `http://localhost:3000`, you can see the display similar to the following:
+Once the application is served on `http://localhost:3000`, we'll see the following:
 
 ![Nuxt3 setup](/nuxt3-setup.png)
 
 ## Localize your Nuxt 3 application
 
-So far we have been able to integrate Vue I18n into our Nuxt 3 application.
-Next, we will implement language switching and import locale resources from outside.
+So far, we have been able to integrate Vue I18n into our Nuxt 3 application. Let's implement language switching and import locale resources from outside.
 
-By implementing language switching, we can i18n our Nuxt 3 application. Also, when we will be separating locale resources from the source code and externalizing them, we can be localized in a separate workflow using the Localization service.
+By implementing language switching we are effectively, i18n our Nuxt 3 application. 🌎 🌍 🌏
 
-In the following sections, we will work on Nuxt 3 applications that support English, French, and Japanese.
+Also, when we separate the locale resources from the source code (externalizing them), we can use a separate workflow with the help of the Localization service in order to localize the app.
+
+In the following sections, we will enable support for English, French, and Japanese on out Nuxt 3 app.
 
 ### Add language switching
 
@@ -162,25 +159,25 @@ The value of each option defines the value of the locale code, which will be exp
 
 ### Externalize locale resources
 
-We will define the locale resources as externalizing.
+We will define the locale resources as external.
 
-There are several file formats for resources supported by Vue I18n, so we will use the json format in here.
+There are several file formats for resources supported by Vue I18n, we'll opt for JSON in this particular case.
 
-These are managed separately from the directories managed by Nuxt 3 by creating `locales` directories as follows:
+Let's create a non-"Nuxt-3-standard" directory named `locales` by running:
 
 ```sh
 mkdir locales
 ```
 
-Then, We will have created a file defining locale resources for English, French, and Japanese as follows:
+Now, let's create the JSON files for each of the locales we want to support:
 
 ```sh
 touch locales/en.json # for english
 touch locales/fr.json # for french
 touch locales/ja.json # for japanese
 ```
 
-And more then, We will have saved each created locale resource file for each language as follows:
+Let's populate them with the follwing:
 
 For english at `locales/en.json`:
 
@@ -211,9 +208,7 @@ For japanese at `locales/ja.json`:
 
 ### Import locale resources
 
-We will import locale resources that is defined in the `locales` directory for use with Vue I18n.
-
-And then, change `plugins/i18n.ts` as follows:
+Let's "register" the locales in our plugin (`plugins/i18n.ts`) as follows:
 
 ```js
 import { createI18n } from 'vue-i18n'
@@ -240,23 +235,23 @@ export default defineNuxtPlugin(({ vueApp }) => {
 })
 ```
 
-It’s set locale resources for each imported language to `messages` option, so you can manage locale resources with separating from code in the `locales` directory. It also facilitates integration with the localization service.
+The `messages` option will be the one holding the local resources we register to it and being as fine-grained as we want. This granularity facilitates integration with the localization service.
 
-Let's run `npm run dev` to see if the fixes so far work. When we will have run the command and have be access to `http://localhost:3000`, you can see the display similar to the following:
+Let's run `npm run dev` and head to `http://localhost:3000` to see if the changes so far work.
 
 ![Setup i18n on Nuxt3](/nuxt3-setup-i18n.gif)
 
-Your Nuxt 3 application is now ready for basic internationalization!
+The Nuxt 3 application is now ready for basic internationalization! 🎉
 
 ## Optimize with `@intlify/unplugin-vue-i18n`
 
-So far, you have been able to use Vue I18n to support language switching for your Nuxt 3 application. Also, by externalizing the locale resources, you have separated them from the code, making it easier to manage locale resources and integrate with the localization service.
+So far, you have been able to use Vue I18n to support language switching on the Nuxt 3 application. Also, by externalizing the locale resources, you have separated them from the source code, making it easier to manage locale resources and integrate with the localization service.
 
-However, as described in the [Optimization](../advanced/optimization), your Nuxt 3 application prepared so far is not optimized for bundle size.
+However, as described in [Optimization](../advanced/optimization), the Nuxt 3 application prepared so far is sub-optimal in its bundle size.
 
 Since Vue I18n v9, the message compiler allows pre-compiling of locale resources for improved performance, but has not yet been optimized for that performance.
 
-Finally, we would to introduce with you [@intlify/unplugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n) a Vue I18n to optimize performance.
+Enter [@intlify/unplugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n), a Vue I18n to optimize performance.
 
 ### Install `@intlify/unplugin-vue-i18n`
 
@@ -294,9 +289,9 @@ In `vite.plugins`, the plugin for `@intlify/unplugin-vue-i18n` is configured. As
 
 ### Inside of bundling with optimization
 
-When you have finished the setup, let’s run `npm run dev` to check it out!
+Once finished with the setup, run `npm run dev` to check it out!
 
-When you will access to `http://localhost:3000`, the behavior of the Nuxt 3 application remains the same, but there is a change in the bandwidth of the Nuxt 3 application.
+After accessing `http://localhost:3000`, the behavior of the Nuxt 3 application remains the same, but there is a change in the bandwidth of the Nuxt 3 application.
 
 The following is a comparison of bundle sizes measured in the network tab of devtools with and without `@intlify/unplugin-vue-i18n`:
 
@@ -308,14 +303,14 @@ By setting up this plugin, the plugin will internally set up a Vue I18n module t
 
 About details, see `@intlify/unplugin-vue-i18n` [docs](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#runtimeonly)
 
-Also, you can see the changing in the bandling of locale resources.
+Also, you can see the changes in the bundling of locale resources.
 
 Code for locale resources, depending on whether or not the `@intlify/unplugin-vue-i18n` plugin to `vite.plugins` is set. Below:
 
 ![Pre-compile](/nuxt3-pre-compile.png)
 
 Without the `@intlify/unplugin-vue-i18n` plugin to `vite.plugins`, locale resources are bundled as **json**, but with this plugin set, locale resources are **converted from json to JavaScript code** for bandwidth.
 
-Vue I18n just call the functions! if the locale resource is a function, since it has already been compiled.
+Vue I18n just call the functions since they have already been compiled.
 
-In this tutorial,  the Nuxt 3 application is small, so we can not enough experience the performance of this optimization, but as the application gets larger, it will benefit from it.
+In this guide, the Nuxt 3 application is small, so we can not enough experience the performance of the optimization but as the application gets larger, it will definitely benefit from it.