You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 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
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.
7
7
8
8
But if [you already have your system ready for native development](/en/docs/getting-started/installation), you can start by using a template:
9
9
@@ -22,4 +22,4 @@ $ npm run watch:<platform>
22
22
23
23
where platform is `ios` or `android`.
24
24
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).
Copy file name to clipboardExpand all lines: content/docs/en/getting-started/3-installation.md
+6-7Lines changed: 6 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ To use NativeScript-Vue, you need to set up your system to compile your apps.
15
15
16
16
### Node.js
17
17
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`.
19
19
20
20
### NativeScript CLI
21
21
@@ -25,23 +25,22 @@ To install the NativeScript CLI, open your terminal and run:
25
25
$ npm install -g nativescript
26
26
```
27
27
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.
30
29
31
30
### Windows
32
31
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:
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.
9
8
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).
11
10
12
11
**Currently supported templates:**
13
12
@@ -20,17 +19,22 @@ It is also assumed that you have [set up your system for NativeScript developmen
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.
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.
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.
7
7
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).
9
9
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:
11
17
12
18
```shell
13
19
$ npm install --save nativescript-gradient
14
20
```
15
21
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:
17
23
18
24
```shell
19
25
$ npm run clean
20
26
```
21
27
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:
Copy file name to clipboardExpand all lines: content/docs/en/getting-started/6-vue-plugins.md
+33-25Lines changed: 33 additions & 25 deletions
Original file line number
Diff line number
Diff line change
@@ -1,57 +1,63 @@
1
1
---
2
2
title: Using Vue Plugins
3
-
contributors: [jlooper]
3
+
contributors: [jlooper, ikoevska]
4
4
---
5
5
6
-
## vue-router
6
+
This page provides an overview of the currently supported Vue plugins that work with NativeScript-Vue.
7
7
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)
10
10
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
12
12
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/).
14
14
15
-
```html
16
-
<!-- does not work -->
17
-
<router-linkto="/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.
19
22
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.
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/).
27
30
28
31
## Vuex
29
32
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.
31
34
32
-
### Install
35
+
### Install the plugin
33
36
34
37
Install Vuex as you would normally in your Vue.js app. With npm, for example:
35
38
36
39
```shell
37
40
$ npm install --save vuex
38
41
```
39
42
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`.
41
44
42
-
### Import
45
+
### Import the plugin
43
46
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:
45
48
46
49
```js
47
50
importVuexfrom'vuex'
48
51
Vue.use(Vuex)
49
52
```
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.
51
53
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
53
57
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:
55
61
56
62
```js
57
63
conststore=newVuex.Store({
@@ -65,9 +71,9 @@ const store = new Vuex.Store({
65
71
})
66
72
```
67
73
68
-
### Use the Store
74
+
### Usage: Use the store
69
75
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.
71
77
72
78
```js
73
79
newVue({
@@ -100,4 +106,6 @@ new Vue({
100
106
}).$start()
101
107
```
102
108
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.
## What is [NativeScript](https://www.nativescript.org/)?
7
7
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.
9
9
10
10
## What is [Vue.js](https://vuejs.org/)?
11
11
@@ -21,7 +21,7 @@ If you have used Vue.js before you will feel right at home with NativeScript-Vue
21
21
22
22
There are many options to build mobile apps. Here are some situations where we think NativeScript-Vue is a great fit.
23
23
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 webbased, 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.
25
25
***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.
26
26
***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.
27
27
@@ -40,7 +40,7 @@ NativeScript-Vue is an open source project and contributions are very much encou
40
40
41
41
## How stable is this project?
42
42
43
-
NativeScript-Vue is relatively featurecomplete. 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:
44
44
45
45
***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.
46
46
***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