Skip to content

Commit 666af29

Browse files
ikoevskarigor789
authored andcommitted
Proof-reading and re-formatting content (#150)
* Fixed typos in introduction * Fixed product name in Quick Start * Fixed phrasing in Installation guide * Proofreading and formatting for Templates * Proofreading and re-formatting of NS plugins * Removed code formatting from section title * Proof-reading and re-formatting * Updated content * Updated template descriptions * Update 4-templates.md * Switched from headings to bold formatting
1 parent 15a6a63 commit 666af29

File tree

6 files changed

+83
-61
lines changed

6 files changed

+83
-61
lines changed

content/docs/en/getting-started/1-quick-start.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Quick Start
33
contributors: [rigor789, eddyverbruggen, damain, ikoevska]
44
---
55

6-
If you don't want the hassle of installing and configuring your system before you can have a taste of NativeScript + Vue.js development, the [NativeScript Playground](/en/docs/getting-started/playground-tutorial) has you covered.
6+
If you don't want the hassle of installing and configuring your system before you can have a taste of NativeScript-Vue, the [NativeScript Playground](/en/docs/getting-started/playground-tutorial) has you covered.
77

88
But if [you already have your system ready for native development](/en/docs/getting-started/installation), you can start by using a template:
99

@@ -22,4 +22,4 @@ $ npm run watch:<platform>
2222

2323
where platform is `ios` or `android`.
2424

25-
For more information about the available templates, see the [templates documentation](/en/docs/getting-started/templates).
25+
For more information about the available templates, see the [templates documentation](/en/docs/getting-started/templates).

content/docs/en/getting-started/3-installation.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ To use NativeScript-Vue, you need to set up your system to compile your apps.
1515

1616
### Node.js
1717

18-
Download and install the latest _LTS_ version of Node.js from [https://nodejs.org/](https://nodejs.org/). Restart your terminal and verify the installation was successful with the command `node --version`.
18+
Download and install the latest _LTS_ version of Node.js from [https://nodejs.org/](https://nodejs.org/). Restart your terminal and verify the installation was successful by running `node --version`.
1919

2020
### NativeScript CLI
2121

@@ -25,23 +25,22 @@ To install the NativeScript CLI, open your terminal and run:
2525
$ npm install -g nativescript
2626
```
2727

28-
You can verify the installation was successful by running `tns` in your terminal. You should see a list of all the available commands.
29-
28+
Verify the installation was successful by running `tns` in your terminal. You should see a list of the available commands.
3029

3130
### Windows
3231

33-
System requirements and setup instructions for the Android SDK on Windows:
32+
Check the system requirements and follow the setup instructions for the Android SDK on Windows:
3433

3534
[Advanced setup: Windows](https://docs.nativescript.org/start/ns-setup-win)
3635

3736
### macOS
3837

39-
System requirements and setup instructions for Xcode and the Android SDK for your Mac:
38+
Check the system requirements and follow the setup instructions for Xcode and the Android SDK on macOS:
4039

4140
[Advanced setup: macOS](https://docs.nativescript.org/start/ns-setup-os-x)
4241

4342
### Linux
4443

45-
System requirements and setup instructions for the Android SDK on Linux:
44+
Check the system requirements and follow the setup instructions for the Android SDK on Linux:
4645

47-
[Advanced setup: Linux](https://docs.nativescript.org/start/ns-setup-linux)
46+
[Advanced setup: Linux](https://docs.nativescript.org/start/ns-setup-linux)

content/docs/en/getting-started/4-templates.md

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
---
22
title: Templates
3-
contributors: [rigor789, tralves, jlooper, lewebsimple]
3+
contributors: [rigor789, tralves, jlooper, lewebsimple, ikoevska]
44
outdated: false
55
---
66

7-
This page serves as an overview of the currently supported templates that you can use to get started with NativeScript-Vue.
8-
It is also assumed that you have [set up your system for NativeScript development](/en/docs/getting-started/installation).
7+
This page provides an overview of the templates that you can use to develop apps with NativeScript-Vue. The list is updated as new templates come up or old templates become deprecated.
98

10-
> This list will be updated as new templates come up, or old templates get deprecated.
9+
> **NOTE:** To use any of the listed templates, you need to [set your system up for NativeScript development](/en/docs/getting-started/installation).
1110
1211
**Currently supported templates:**
1312

@@ -20,17 +19,22 @@ It is also assumed that you have [set up your system for NativeScript developmen
2019

2120
## nativescript-vue/vue-cli-template
2221

23-
Project link: [https://github.com/nativescript-vue/vue-cli-template](https://github.com/nativescript-vue/vue-cli-template)
22+
**Project link:** [https://github.com/nativescript-vue/vue-cli-template](https://github.com/nativescript-vue/vue-cli-template)
23+
24+
**Features**
2425

25-
**Features:**
2626
* `.vue` single file components
27-
* Vuex &mdash; state management (opt-in)
28-
* VueRouter &mdash; routing (opt-in) &mdash; **experimental!**
27+
* Vuex&mdash;state management (opt-in)
28+
* Vue Router&mdash;routing (opt-in)&mdash;**experimental**
2929
* NativeScript themes
3030

31-
You can use [Vue CLI](https://github.com/vuejs/vue-cli) to bootstrap your NativeScript-Vue app. Out of the box, this template provides support for [Vuex](https://vuex.vuejs.org/en/), the [Vue Router](https://github.com/vuejs/vue-router), and [NativeScript themes](https://docs.nativescript.org/ui/theme). Originally built by [Pascal Martineau](https://github.com/lewebsimple/), this template is now officially supported for NativeScript-Vue development.
31+
Use this template to develop your app from the [Vue CLI](https://github.com/vuejs/vue-cli) and design it around `.vue` file components. Out-of-the-box, the template also provides advanced Vue functionality ([Vuex](https://vuex.vuejs.org/en/) and [Vue Router](https://github.com/vuejs/vue-router)) and support for [NativeScript themes](https://docs.nativescript.org/ui/theme).
32+
33+
Functionality-wise, the template is a spin-off of the basic template for NativeScript development and implements a simple button-controlled counter.
34+
35+
Originally built by [Pascal Martineau](https://github.com/lewebsimple/), this template is now officially supported for NativeScript-Vue.
3236

33-
**Usage:**
37+
**Usage**
3438

3539
```shell
3640
$ npm install -g @vue/cli @vue/cli-init
@@ -44,15 +48,18 @@ $ npm run watch:ios
4448

4549
## nativescript-vue/nativescript-vue-template
4650

47-
Project link: [https://github.com/nativescript-vue/nativescript-vue-template](https://github.com/nativescript-vue/nativescript-vue-template)
51+
**Project link:** [https://github.com/nativescript-vue/nativescript-vue-template](https://github.com/nativescript-vue/nativescript-vue-template)
4852

49-
**Features:**
50-
* Pure JS &mdash; no `.vue` files
53+
**Features**
54+
55+
* Pure JavaScript&mdash;no `.vue` files
5156
* NativeScript themes
5257

53-
This template is the simplest way you can develop your app with NativeScript-Vue. It does not require an extra build step, because the components / application is written in pure `.js` files.
58+
Use this template to develop your app from the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli), using only JavaScript.
59+
60+
Functionality-wise, the template is a spin-off of the basic template for NativeScript development and implements a simple button-controlled counter.
5461

55-
**Usage:**
62+
**Usage**
5663

5764
```shell
5865
$ tns create <project-name> --template nativescript-vue-template

content/docs/en/getting-started/5-nativescript-plugins.md

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,41 @@
11
---
22
title: Using NativeScript Plugins
3-
contributors: [EddyVerbruggen, naderio, rigor789]
3+
contributors: [EddyVerbruggen, naderio, rigor789, ikoevska]
44
---
55

6-
Plugins work as in any other NativeScript app, but you may wonder how *UI* plugins would work with Vue.
6+
Plugins work as in [any other NativeScript app](https://docs.nativescript.org/plugins/plugins), but you may wonder how *UI* plugins work with Vue.
77

8-
UI plugins work almost identically to how you'd use a NativeScript UI plugin in an Angular app. For instance consider this example usage of [nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient) which is used in the [listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js):
8+
UI plugins work almost identically to how you'd [use a NativeScript UI plugin in an Angular app](https://docs.nativescript.org/angular/plugins/plugins).
99

10-
Install the plugin using the NativeScript CLI:
10+
## Sample use: nativescript-gradient
11+
12+
Let's review how you can use [nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient). You can also check its use in the [listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js).
13+
14+
### Install the plugin using the NativeScript CLI
15+
16+
After you have [set up your system for NativeScript development](/en/docs/getting-started/installation), run the following command:
1117

1218
```shell
1319
$ npm install --save nativescript-gradient
1420
```
1521

16-
**NOTE:** If you are using the [vue-cli-template](/en/docs/getting-started/templates/#nativescript-vuevue-cli-template) you may have to run the following:
22+
> **NOTE:** If you are using the [vue-cli-template](/en/docs/getting-started/templates/#nativescript-vuevue-cli-template), you may have to run the following:
1723
1824
```shell
1925
$ npm run clean
2026
```
2127

22-
Open your app entry file and add the following to the top:
28+
### Register the plugin in your app
29+
30+
Open your app entry file (llikely `app.js` or `main.js`) and add the following line at the top:
2331

24-
```js
32+
```JavaScript
2533
Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient)
2634
```
2735

28-
Then in your template, you can use the newly registered element:
36+
### Use the plugin in your app
2937

30-
```html
38+
```HTML
3139
<Gradient direction="to right" colors="#FF0077, red, #FF00FF">
3240
<Label text="Best gradient." horizontalAlignment="center"
3341
style="color: white; padding: 20" />

content/docs/en/getting-started/6-vue-plugins.md

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,63 @@
11
---
22
title: Using Vue Plugins
3-
contributors: [jlooper]
3+
contributors: [jlooper, ikoevska]
44
---
55

6-
## vue-router
6+
This page provides an overview of the currently supported Vue plugins that work with NativeScript-Vue.
77

8-
VueRouter is a Vue plugin to handle URL based routing.
9-
An experimental integration with vue-router has been added to Nativescript-Vue.
8+
* [Vue Router](#vue-router)
9+
* [Vuex](#vuex)
1010

11-
Keep in mind, the routing strategy on mobile is not exactly same as URL and History API used in a browser.
11+
## Vue Router
1212

13-
Router links, as you are familiar in Vue like the following **will not work** in NativeScript
13+
> Currently, integration with Vue Router is **experimental**. For more information, see [the Vue Router page](/en/docs/routing/vue-router/).
1414
15-
```html
16-
<!-- does not work -->
17-
<router-link to="/foo">Go to Foo</router-link>
18-
```
15+
### Install and require the plugin
16+
17+
For detailed information about how to install the plugin and make it available in your NativeScript-Vue app, see [the Vue Router page](/en/docs/routing/vue-router/).
18+
19+
### Usage notes
20+
21+
The routing strategy on mobile is different than the routing strategy in the browser and the familiar Vue format of router links does not work with NativeScript-Vue.
1922

20-
Instead we have to change to a new route using the `route.push` method. For example when using a button we can use the `tap` event to change the route:
23+
Instead, you need to **change to a new route using the `route.push` method**. The following example shows how to use the `tap` event to change the route.
2124

22-
```html
25+
```HTML
2326
<Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>
24-
```
27+
```
2528

26-
For a more in depth documentation about the router [go to the VueRouter page](/en/docs/routing/vue-router/).
29+
For detailed information about how to use the plugin in your NativeScript-Vue app, see [the Vue Router page](/en/docs/routing/vue-router/).
2730

2831
## Vuex
2932

30-
Vuex is Vue.js's state management pattern and library. It serves as a store for all the components in an application and implements rules to ensure that state is mutated in a predictable fashion. Vuex can be used in NativeScript apps; for an example, see the [NativeScript Groceries Vue sample](https://github.com/tralves/groceries-ns-vue).
33+
Vuex is a state management pattern and library. It serves as a store for all the components in an app and implements rules to ensure that state is mutated in a predictable fashion.
3134

32-
### Install
35+
### Install the plugin
3336

3437
Install Vuex as you would normally in your Vue.js app. With npm, for example:
3538

3639
```shell
3740
$ npm install --save vuex
3841
```
3942

40-
The most recent version of Vuex will be added to your package.json file.
43+
The most recent version of Vuex will be added to your `package.json`.
4144

42-
### Import
45+
### Import the plugin
4346

44-
In your app's `main.js` file, import Vuex at the top:
47+
Open your app entry file (llikely `app.js` or `main.js`) and add the following line at the top:
4548

4649
```js
4750
import Vuex from 'vuex'
4851
Vue.use(Vuex)
4952
```
50-
Now you can use Vuex in the app similar to how you would use it in a standard Vue app for the web to manage your app's state.
5153

52-
### Create a Store
54+
Now you can use Vuex to manage the state of your mobile app, similar to how you would use it in a standard Vue web app.
55+
56+
### Usage: Create a store
5357

54-
Above your creation of a new Vue instance, or in a separate folder (for example `/store` in your app folder), create a new constant to store your state. This is where you will invoke Vuex API calls. A simple store constant would include the state of a counter whose state you control throughout your app by means of tracking its mutations:
58+
You need to create a new constant to store your state and invoke Vuex API calls. You can do that in the app entry file after the creation of the Vue instance or in a separate folder (for example, `/store`).
59+
60+
In the following example, a simple store constant includes the state of a counter and tracks its mutations:
5561

5662
```js
5763
const store = new Vuex.Store({
@@ -65,9 +71,9 @@ const store = new Vuex.Store({
6571
})
6672
```
6773

68-
### Use the Store
74+
### Usage: Use the store
6975

70-
Now you can manage state by calling the store you just created. In the example below, the app tracks the count value as you press a '+' or '-' button. Note that you don't manipulate the state itself, but rather call mutations to increment and decrement its value.
76+
Now you can manage state by calling the store you just created. In the following example, the app tracks the count value as you press a '+' or '-' button. Note that you don't manipulate the state itself, but call mutations to increment and decrement its value.
7177

7278
```js
7379
new Vue({
@@ -100,4 +106,6 @@ new Vue({
100106
}).$start()
101107
```
102108

103-
More information about Vuex and how to manage state can be found in [the Vuex documentation](https://vuex.vuejs.org/en/core-concepts.html). A good architecture to manage the various elements of Vuex can be found in the Groceries app in the [`/store` folder](https://github.com/tralves/groceries-ns-vue/tree/master/src/store/).
109+
For more information about Vuex, see [the Vuex documentation](https://vuex.vuejs.org/en/core-concepts.html).
110+
111+
For more examples about how to manage the elements of Vuex, explore the [`/store` folder](https://github.com/tralves/groceries-ns-vue/tree/master/src/store/) of the NativeScript-Vue Groceries sample.

content/docs/en/introduction.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ contributors: [rigor789, tjvantoll]
55

66
## What is [NativeScript](https://www.nativescript.org/)?
77

8-
NativeScript is an open source framework for building truly native mobile application using JavaScript.
8+
NativeScript is an open source framework for building truly native mobile applications using JavaScript.
99

1010
## What is [Vue.js](https://vuejs.org/)?
1111

@@ -21,7 +21,7 @@ If you have used Vue.js before you will feel right at home with NativeScript-Vue
2121

2222
There are many options to build mobile apps. Here are some situations where we think NativeScript-Vue is a great fit.
2323

24-
* **You need a truly native iOS and Android app**: NativeScript builds your apps using native user interface components on iOS and Android. The apps you build are not web based, and therefore are not subject to the limitations inherent in WebView-based application frameworks. NativeScript also provides [an extensive collection of plugins](http://market.nativescript.org/) to tie into native device features. So if you need to tie into an iOS or Android API or feature as part of your app, you can do that with NativeScript.
24+
* **You need a truly native iOS and Android app**: NativeScript builds your apps using native user interface components on iOS and Android. The apps you build are not web-based, and therefore are not subject to the limitations inherent in WebView-based application frameworks. NativeScript also provides [an extensive collection of plugins](http://market.nativescript.org/) to tie into native device features. So if you need to tie into an iOS or Android API or feature as part of your app, you can do that with NativeScript.
2525
* **You like JavaScript**: With NativeScript you write your mobile applications in JavaScript — not Objective-C, not Swift, and not Java. If you like JavaScript, you’ll love writing native iOS and Android apps with the same language you use in your Web and/or Node apps.
2626
* **You like Vue**: Vue is known for its simple approach to the view layer. If you like building web apps with Vue, you’ll be right at home with NativeScript-Vue, as you’ll be using the same syntax for handling common tasks like data binding and event handling.
2727

@@ -40,7 +40,7 @@ NativeScript-Vue is an open source project and contributions are very much encou
4040

4141
## How stable is this project?
4242

43-
NativeScript-Vue is relatively feature complete. At this time we’re focusing on two things:
43+
NativeScript-Vue is relatively feature-complete. At this time we’re focusing on two things:
4444

4545
* **Documentation**: Not everything you can do in NativeScript-Vue is documented on this site. We’re actively adding samples and use cases to this site, and contributions are welcome.
4646
* **Sample apps**: We’re looking for people to put this plugin through its paces and send feedback our way. If you’re interested, join the [NativeScript Community Slack](https://developer.telerik.com/wp-login.php?action=slack-invitation) and let us know in the #vue channel.

0 commit comments

Comments
 (0)