|
2 | 2 | title: Templates |
3 | 3 | --- |
4 | 4 |
|
5 | | -Following NativeScript templates extends `nativescript-vue` with more features such as support for Vue.js Single File Component (`.vue`). Use by creating app by running |
| 5 | +You can also use NativeScript's [template system](https://docs.nativescript.org/tooling/app-templates) to help you bootstrapping your `nativescript-vue` app. All these templates generate NativeScript app that uses the `nativescript-vue` plug-in. Some templates are equipped with more features such as support for Vue.js Single File Component (`.vue`) and livereload. |
| 6 | + |
| 7 | +## nativescript-vue-template |
| 8 | + |
| 9 | +#### Project link |
| 10 | + |
| 11 | +https://github.com/tralves/nativescript-vue-template |
| 12 | + |
| 13 | +#### Description |
| 14 | + |
| 15 | +This one the most basic template. It contains a number of app samples that you can use as the starting point of your app. To try them, copy and paste the code from `app-with-list-view.js`, `app-with-router.js`, `app-with-tab-view.js`, or `app-with-vmodel.js` into your app’s `app.js` file. |
| 16 | + |
| 17 | +#### Installation |
6 | 18 |
|
7 | 19 | ```sh |
8 | | -tns create sample-app --template TEMPLATE_URL |
| 20 | +tns create sample-app --template nativescript-vue-template |
9 | 21 | ``` |
| 22 | +*Follow the [project link](https://github.com/tralves/nativescript-vue-template) for further instructions.* |
10 | 23 |
|
11 | | -- https://github.com/tralves/nativescript-vue-template |
12 | | -- https://github.com/tralves/nativescript-vue-webpack-template |
13 | | -- https://github.com/rigor789/nativescript-vue-rollup-template |
14 | | -- https://github.com/tralves/nativescript-vue-rollup-template |
| 24 | +## nativescript-vue-rollup-template |
| 25 | + |
| 26 | +#### Project link |
| 27 | + |
| 28 | +https://github.com/tralves/nativescript-vue-rollup-template |
| 29 | + |
| 30 | +#### Description |
| 31 | +Originally a [fork from rigor789's](https://github.com/rigor789/nativescript-vue-rollup-template), this template is currently the most stable and feature complete. You can see it in action in the [🍏 🍍 🍓 Groceries Vue](https://github.com/tralves/groceries-ns-vue) app. |
| 32 | +It supports: |
| 33 | + |
| 34 | +- livereload; |
| 35 | +- .vue Single-File Components; |
| 36 | +- scss imports and scss inside `<style>` tags in .vue files; |
| 37 | +- root imports (imports starting with `/ `refer to the root of the app folder); |
| 38 | +- babel with `es2015` and `stage-2` presets; |
| 39 | + |
| 40 | +#### Installation |
| 41 | +```sh |
| 42 | +tns create sample-app --template nativescript-vue-rollup-template |
| 43 | +``` |
| 44 | +*Follow the [project link](https://github.com/tralves/nativescript-vue-rollup-template) for further instructions.* |
| 45 | + |
| 46 | +## nativescript-vue-webpack-template |
| 47 | + |
| 48 | +#### Project link |
| 49 | + |
| 50 | +https://github.com/tralves/nativescript-vue-webpack-template |
| 51 | + |
| 52 | +#### Description |
| 53 | + |
| 54 | +The webpack template leverages webpack to provide the same functionality as the rollup counterpart. It is evolving to support code sharing, i.e., create projects that share as much of the logic as possible between a web build and the native (android/iOS) builds. |
| 55 | + |
| 56 | + Features: |
| 57 | + |
| 58 | +- livereload; |
| 59 | +- .vue Single-File Components; |
| 60 | +- scss imports and scss inside `<style>` tags in .vue files; |
| 61 | +- babel with `es2015` and `stage-2` presets; |
| 62 | +- (soon) native/web code sharing; |
| 63 | + |
| 64 | +#### Installation |
| 65 | +```sh |
| 66 | +tns create sample-app --template https://github.com/tralves/nativescript-vue-webpack-template |
| 67 | +``` |
| 68 | +*Follow the [project link](https://github.com/tralves/nativescript-vue-webpack-template) for further instructions.* |
15 | 69 |
|
16 | 70 | # What's next? |
17 | 71 |
|
|
0 commit comments