Skip to content

Commit 44f4a8a

Browse files
rigor789rigor789
committed
Merge branch 'master' of github.com:rigor789/nativescript-vue
2 parents a69a582 + eb9eda0 commit 44f4a8a

File tree

4 files changed

+63
-30
lines changed

4 files changed

+63
-30
lines changed

‎CONTRIBUTING.md

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ We will re-iterate these guidelines as the project matures.
1313
# Development setup
1414
You will need Node.js installed, as well as Nativescript
1515

16-
Please make sure you are using Nativescript 3.0 (3.0.0-rc.2)
17-
18-
[Here is a guide to upgrade](https://www.nativescript.org/blog/nativescript-3.0-release-candidate-available-today)
16+
Please make sure you are using Nativescript 3.x
1917

2018
After cloning the repo, run:
2119

@@ -32,44 +30,45 @@ $ npm run dev
3230

3331
# Testing with the sample application
3432

35-
To test out changes, you will have to link `nativescript-vue` via npm's `link feature`:
36-
37-
Inside the `nativescript-vue` folder run:
38-
39-
`npm link`
33+
First, **[link](https://docs.npmjs.com/cli/link) the development version** to make it available globally.
4034

41-
This will create a symbolic link in your global node_modules folder, pointing to this location
35+
```
36+
cd nativescript-vue
37+
npm link
38+
```
4239

43-
And then you will have to go into the `samples` folder and run:
40+
This will create a symbolic link in your global `node_modules` folder, pointing to this location.
4441

45-
`npm link nativescript-vue`
42+
Then, **run the sample app** after linking it to the development code.
4643

47-
Note: You only need to run this once
44+
```
45+
cd samples
46+
npm link nativescript-vue
47+
```
4848

49-
If all went well, `node_modules/nativescript-vue` should be a link to your global `node_modules/nativescript` folder, which is is also a link to the actual package.
49+
If all went well, `samples/node_modules/nativescript-vue` should be a link to your global `node_modules/nativescript` folder, which is is also a link to the actual package.
5050

51-
Finally, you can run the application via:
52-
`tns run android`
51+
Finally, run the application :
5352

54-
If you want to reload the application, every time the `nativescript-vue` module changes, use the `--syncAllFiles` option:
53+
```
54+
npm install
55+
tns run android --syncAllFiles
56+
```
5557

56-
`tns run android --syncAllFiles`
58+
The `--syncAllFiles` option reloads the application every time the `nativescript-vue` module changes.
5759

5860
# Project Structure
5961

6062
- `dist`: Directory for the bundled code
61-
- `nativescript-vue`: This folder is the root of the module.
62-
- `index.js`: Entry file for the rollup build
63-
- `rollup.config.js`: rollup config for the build
64-
- `platform/nativescript`: Contains `nativescript` specific platform code
65-
- `compiler`: This is where template compilation logic will go (vue template -> render function)
66-
- `renderer`: The renderer that handles rendering vdom into actual elements in {N}
67-
- `runtime`: {N} specific Vue backend
68-
- `util`: Utilities
69-
- `element-registry.js`: Registry of supported elements
70-
- `framework.js`: Entry file for the platform
71-
72-
- `vue-sample`: Sample {N} application for testing
63+
- `platform/nativescript`: Contains `nativescript` specific platform code
64+
- `compiler`: This is where template compilation logic will go (vue template -> render function)
65+
- `renderer`: The renderer that handles rendering vdom into actual elements in {N}
66+
- `runtime`: {N} specific Vue backend
67+
- `util`: Utilities
68+
- `element-registry.js`: Registry of supported elements
69+
- `framework.js`: Entry file for the rollup build
70+
- `samples`: Sample {N} applications for testing
71+
- `rollup.config.js`: rollup config for the build
7372

7473
# Troubleshooting
7574

‎README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,29 @@ This project is in its very early stages, so please don't try to use it for any
1111
If you feel like contributing to this project, that’s awesome! Start by reading [this repo’s `CONTRIBUTING.MD`](https://github.com/rigor789/nativescript-vue/blob/master/CONTRIBUTING.md) file for details on the required development setup, how to send pull requests, and how to run this repo’s sample app.
1212

1313
If you’d like to get involved with making Vue integration for NativeScript happen, join us in the #vue channel on the [NativeScript community Slack](http://tinyurl.com/nativescriptSlack).
14+
15+
## Using other plugins
16+
Plugins work as in any other NativeScript app, but you may wonder how UI plugin would work with Vue.
17+
18+
UI plugins work almost identical 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](samples/app/app-with-list-view.js):
19+
20+
Install the plugin by running this command in the samples folder:
21+
22+
```sh
23+
tns plugin add nativescript-gradient
24+
```
25+
26+
Open your vue file and right after the imports at the top, do:
27+
28+
```js
29+
Vue.registerElement("gradient", () => require("nativescript-gradient").Gradient);
30+
```
31+
32+
Then in your view template, add this to recreated the gradient in the sample:
33+
34+
```xml
35+
<gradient direction="to right" colors="#FF0077, red, #FF00FF" class="p-15">
36+
<label class="p-5 c-white" horizontalAlignment="center" text="My gradients are the best." textWrap="true"></label>
37+
<Label class="p-5 c-white" horizontalAlignment="center" text="It's true." textWrap="true"></Label>
38+
</gradient>
39+
```

‎samples/app/app-with-list-view.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const Label = require('ui/label').Label
88
const Button = require('ui/button').Button
99

1010
Vue.prototype.$http = http
11+
Vue.registerElement('gradient', () => require('nativescript-gradient').Gradient);
1112

1213
new Vue({
1314
data: {
@@ -26,7 +27,13 @@ new Vue({
2627
<action-item text="change" android.position="popup" ios.position="right" @tap="chooseSubreddit"></action-item>
2728
</action-bar>
2829
<stack-layout>
29-
<list-view :items="items" class="list-group" :templateSelector="templateSelector" separatorColor="red" @itemTap="onItemTap" @loaded="onLoaded" @loadMoreItems="onLoadMoreItems">
30+
31+
<gradient direction="to right" colors="#FF0077, red, #FF00FF" class="p-15">
32+
<label class="p-5 c-white" horizontalAlignment="center" text="My gradients are the best." textWrap="true"></label>
33+
<Label class="p-5 c-white" horizontalAlignment="center" text="It's true." textWrap="true"></Label>
34+
</gradient>
35+
36+
<list-view :items="items" class="list-group" :templateSelector="templateSelector" separatorColor="red" @itemTap="onItemTap" @loaded="onLoaded" @loadMoreItems="onLoadMoreItems">
3037
<template scope="item">
3138
<stack-layout orientation="horizontal" class="list-group-item">
3239
<image :src="item.image" class="thumb"></image>

‎samples/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
}
1414
},
1515
"dependencies": {
16+
"nativescript-gradient": "^2.0.0",
1617
"nativescript-theme-core": "~1.0.2",
1718
"nativescript-vue": "^0.1.3",
1819
"tns-core-modules": "^3.0.0",

0 commit comments

Comments
 (0)