docs: typos & grammar improvments (#117)

Author: arashsheyda

content/0.index.md

@@ -19,9 +19,9 @@ Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an
 
 ## Getting Started
 
-With this tutorial, we assume you are already familiar with the basic concept of HTML, CSS, JavaScript. Nuxt is a full-stack framework built on top of [Vue](https://vuejs.org), we also include a simple Vue tutorial to help you get started quickly.
+With this tutorial, we assume you are already familiar with the basic concepts of HTML, CSS and JavaScript. Nuxt is a full-stack framework built on top of [Vue](https://vuejs.org), we also include a simple Vue tutorial to help you get started quickly.
 
-Start learning by click the topics below:
+Start learning by clicking the topics below:
 
 ::div{.flex.flex-wrap.gap-2}
 :content-card{to="/vue" title="Vue Basics" description="If you are not familiar with Vue, we recommend you to learn the basics of Vue first." icon="i-logos-vue"}
@@ -30,7 +30,7 @@ Start learning by click the topics below:
 
 ## Case Studies
 
-Once you are already familiar the concepts of Vue and Nuxt, we provided some case studies to help you understand how to use Nuxt in real-world applications:
+Once you are already familiar with the concepts of Vue and Nuxt, we provide some case studies to help you understand how to use Nuxt in real-world applications:
 
 ::div{.flex.flex-wrap.gap-2}
 :content-card{to="/" wip title="GitHub Profile" description="Build an website to generate custom user profile from GitHub" icon="i-ph-user-circle-duotone"}

content/1.vue/1.index.md

@@ -8,12 +8,12 @@ Nuxt integrates [Vue 3](https://vuejs.org/), a progressive framework for buildin
 
 What you see in the editor is a [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html)(SFC).
 
-An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. It's composed with a [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)) block to define the JavaScript logic, a `<template>` block to define the HTML template and optional `<style>` blocks to define the CSS style. You can play with it using it the playground on the right, or read more about it in the [official Vue documentation](https://v3.vuejs.org/guide/single-file-component.html).
+An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a `.vue` file. It's composed with a [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) block to define the JavaScript logic, a `<template>` block to define the HTML template and optional `<style>` blocks to define the CSS style. You can play with it using the playground on the right, or read more about it in the [official Vue documentation](https://v3.vuejs.org/guide/single-file-component.html).
 
-In Nuxt, we supports Vue SFC out-of-box and highly recommend you to use it to build your application. One thing that is different from Vue's default Vue SFC is that in Nuxt we [auto-imports the Vue utilities](https://nuxt.com/docs/guide/concepts/auto-imports) for you, so you can use `ref`, `computed` and other Vue APIs directly without importing them.
+In Nuxt, we support Vue SFC out-of-the-box and highly recommend you to use it to build your application. One thing that is different from Vue's default Vue SFC is that in Nuxt we [auto-import the Vue utilities](https://nuxt.com/docs/guide/concepts/auto-imports) for you, so you can use `ref`, `computed` and other Vue APIs directly without importing them.
 
 ::note
-**Tips**: You might heard that there are a few different ways to define a Vue component. In general, we recommend using [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) with [Composition API](https://vuejs.org/guide/introduction.html#composition-api) to get the best developer experience. If you are new to Vue, don't worry too much about understanding all different choices, you can follow what we recommend as we believe it's also the most intuitive way to get started with Vue.
+**Tips**: You might have heard that there are a few different ways to define a Vue component. In general, we recommend using [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) with [Composition API](https://vuejs.org/guide/introduction.html#composition-api) to get the best developer experience. If you are new to Vue, don't worry too much about understanding all different choices, you can follow what we recommend as we believe it's also the most intuitive way to get started with Vue.
 ::
 
 Going forward, we will cover the following topics:

content/1.vue/2.reactivity/index.md

@@ -4,27 +4,27 @@ ogImage: true
 
 # Reactivity Part 1
 
-Vue provides [a great reactivity system](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) that tracks changes to the data and triggers updates automatically, allowing you have your UI always up-to-date with the data. Vue's reactivity comes with a few primitives: `ref`, `reactive`, `computed` and `watch`.
+Vue provides [a great reactivity system](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) that tracks changes to the data and triggers updates automatically, allowing you to have your UI always up-to-date with the data. Vue's reactivity comes with a few primitives: `ref`, `reactive`, `computed` and `watch`.
 
-- [`ref()`](https://vuejs.org/api/reactivity-core.html#ref) creates a container to hold a single value, that can be tracked automatically when the value changes. Value can be accessed or updated via `.value` property.
+- [`ref()`](https://vuejs.org/api/reactivity-core.html#ref) creates a container to hold a single value, that can be tracked automatically when the value changes. The value can be accessed or updated via `.value` property.
 
 - [`computed()`](https://vuejs.org/api/reactivity-core.html#computed) takes a getter function and returns a `ref` object, that reflects the return value of the getter function.
 
-Here in the playground, we created a ref object `count` to hold a number, a computed object `double` that calculates the double of `count`. Vue will smartly know that `double` depends on `count`, so whenever `count` changes, `double` will re-calculate automatically.
+Here in the playground, we've created a ref object named `count` to hold a number, and a computed object named `double` that calculates the double of `count`. Vue will smartly know that `double` depends on `count`, so whenever `count` changes, `double` will re-calculate automatically.
 
-Try click the button to increase the `count` value - you will see the value of `double` also reflects the change.
+Try clicking the button to increase the `count` value - you will see that the value of `double` also reflects the change.
 
 ::note
-**Note**: Refs will be [auto unwrapped by Vue](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state-1) when referenced in the `<template>`, `.value` is only needed when accessing the ref in `<script>` or JavaScript outside of Vue components.
+**Note**: Refs will be [auto unwrapped by Vue](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state-1) when referenced in the `<template>`, The `.value` is only needed when accessing the ref in `<script>` or JavaScript outside of Vue components.
 ::
 
 ## Challenge
 
-Now let's get our hands on it! Try to modify the code, make the multiplier also reactively updatable (current hard-coded as `2`).
+Now let's get our hands on it! Try modifying the code to make the multiplier also reactively updatable (current hard-coded as `2`).
 
 To do that, you can:
 
-1. Create a variable `multiplier` with `ref()` and set it to `2`
+1. Create a variable named `multiplier` with `ref()` and set it to `2`
 2. Rename `double` to `result` in both the `<script>` and `<template>`
 3. Update the implementation of `result` to return `count.value * multiplier.value`{lang=js}
 4. Add another button to increase the `multiplier` value
@@ -35,4 +35,4 @@ If you get stuck, you can check the solution by clicking the button below, or on
 
 :ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
-Feel free to play more to explore your ideas! Once you are done, let's move on to the next section to learn a bit more about the reactivity system.
+Feel free to play more to explore your ideas! Once you're are done, let's move on to the next section to learn a bit more about the reactivity system.

content/1.vue/5.summary/index.md

@@ -1,5 +1,5 @@
 # Vue Basics Summary
 
-Great! You've learned the basics of Vue. If you are interested in learnmore more about Vue, check out the [official Vue documentation](https://vuejs.org/) for more in-depth guides and tutorials.
+Great! You've learned the basics of Vue. If you are interested in learning more about Vue, check out the [official Vue documentation](https://vuejs.org/) for more in-depth guides and tutorials.
 
 Up next, let's start to explore how Nuxt would make your development experience even better.

content/2.concepts/1.index.md

@@ -10,7 +10,7 @@ Nuxt is a free and open-source framework with an intuitive and extendable way to
 
 ## Automation and Conventions
 
-Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.
+Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still be customized and override its default behaviors.
 
 - [**File-based routing**](/concepts/routing): define routes based on the structure of your [`pages/` directory](/docs/guide/directory-structure/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
 - [**Auto-imports**](/concepts/auto-imports): write Vue composables and components in their respective directories and use them without having to import them with the benefits of tree-shaking and optimized JS bundles.
@@ -24,6 +24,6 @@ Nuxt takes care of these and provides both frontend and backend functionality so
 
 ## Getting Started
 
-This playground has Nuxt installed and configured for you, so we could directly start with the creation of our application. If you want to install Nuxt locally on yourself, please follow the [installation guide](https://nuxt.com/docs/getting-started/installation).
+This playground has Nuxt installed and configured for you, so we can directly start with the creation of our application. If you want to install Nuxt locally on your own machine, please follow the [installation guide](https://nuxt.com/docs/getting-started/installation).
 
 To get started, let's learn about how your [Nuxt application entry is defined](/concepts/app-vue).

content/2.concepts/2.app-vue/index.md

@@ -4,7 +4,7 @@ ogImage: true
 
 # Application Entry
 
-To give you the full control of your application, Nuxt allows you to define your down application entry `app.vue` to start minimal (optional).
+To give you the full control of your application, Nuxt allows you to define your own application entry `app.vue` to start minimal (optional).
 
 // TODO: