nos · DalderupMaurice · Jul 22, 2018
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
 # nos-dapp-starterkit
-A React starterkit to create a dApp on nOs!
+A Vuejs starterkit to create a dApp on nOs!
diff --git a/packages/vuejs/.babelrc b/packages/vuejs/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "env"
+  ],
+  "plugins": ["transform-runtime"]
+}
diff --git a/packages/vuejs/.eslintrc.js b/packages/vuejs/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: [
+    "standard"
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/essential',
+    'standard'
+  ]
+}
diff --git a/packages/vuejs/.gitignore b/packages/vuejs/.gitignore
@@ -0,0 +1,4 @@
+.idea/
+node_modules/
+dist/
+.cache/
diff --git a/packages/vuejs/LICENSE b/packages/vuejs/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/vuejs/README.md b/packages/vuejs/README.md
@@ -0,0 +1,65 @@
+<p align="center">
+  <img src="./src/assets/logo.png" width="150px" /> 
+</p>
+
+<h1 align="center">Vuejs dApp Starter Kit</h1>
+
+<p align="center">
+  This is a starter-kit for creating a <strong>dApp</strong> on the <strong>nOS</strong> platform
+</p>
+
+<p align="center">
+  <a href="https://github.com/nos/create-nos-dapp/releases">
+    <img src="https://img.shields.io/github/tag/nos/create-nos-dapp.svg?style=flat">
+  </a>
+  <a href="https://standardjs.com" rel="nofollow">
+    <img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide">
+  </a>
+</p>
+
+## Getting started
+To get started, you can check out the nOS [API documentation](https://github.com/nos/client/blob/develop/docs/api.md)
+
+## Purpose
+The goal of this project is to provide a quickstart for creating nOS dApps with Vuejs and various dependencies already installed and configured.
+
+In this repo you can find NEO specific tooling:
+* nOS functions exposed in a store
+* neon-js, providing extra NEO functionality
+
+Also general frameworks and tooling:
+* Vuejs, our framework of choice
+* Babel and Parcel, transpiling and compiling
+* ESLint linting support
+
+## Setup
+```bash
+$ cd my-dapp-name
+$ yarn start
+```
+
+Change `README.md` and `package.json` to fit your project needs. Delete `LICENSE` if not applicable.
+
+## Document structure
+```
+react-stack-boilerplate
+├── src
+│   ├── main
+│   ├── App
+│   ├── assets
+│   ├── components
+│   │   ├── app-header
+│   │   └── main-page
+│   └── router
+│       └── index
+├── .babelrc
+├── .eslintrc
+├── .gitignore
+├── LICENSE
+├── package.json
+├── README.md
+└── yarn.lock
+```
+
+## Known issues
+ * Build assets to dedicated subdirectory https://github.com/parcel-bundler/parcel/issues/233
diff --git a/packages/vuejs/index.html b/packages/vuejs/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>nOS dapp</title>
+    <link href='https://fonts.googleapis.com/css?family=IBM Plex Mono' rel='stylesheet'>
+</head>
+<style>
+    body {
+    font-family: 'Ubuntu Mono',serif;font-size: 14px;
+    margin: 0;
+    }
+</style>
+<body>
+<div id="app"></div>
+<!-- Note the reference to src here. Parcel will rewrite it on build. -->
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/packages/vuejs/package.json b/packages/vuejs/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "nos-dapp",
+  "version": "0.5.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "npx parcel index.html",
+    "lint": "eslint --fix --ext .js,.vue src"
+  },
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/nos/create-nos-dapp/issues"
+  },
+  "homepage": "https://github.com/nos/create-nos-dapp#readme",
+  "license": "MIT",
+  "keywords": [
+    "nOS",
+    "NEO",
+    "Blockhain",
+    "Vuejs",
+    "Parcel",
+    "JS",
+    "HTML",
+    "starter"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nos/create-nos-dapp.git"
+  },
+  "dependencies": {
+    "@nosplatform/api-functions": "^0.2.2",
+    "react": "^16.4.1",
+    "vue": "^2.5.16",
+    "vue-hot-reload-api": "^2.3.0",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/component-compiler-utils": "^2.1.0",
+    "babel-preset-env": "^1.7.0",
+    "eslint": "^5.0.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "eslint-plugin-vue": "^4.5.0",
+    "parcel-bundler": "^1.9.4",
+    "vue-template-compiler": "^2.5.16"
+  }
+}
diff --git a/packages/vuejs/src/App.vue b/packages/vuejs/src/App.vue
@@ -0,0 +1,32 @@
+<template>
+    <div id="app">
+        <div v-if="nos.exists">
+            <app-header :title="title" :nos="nos"></app-header>
+            <router-view :nos="nos"/>
+        </div>
+        <div v-else>
+            Launch me through nOS client, please!
+        </div>
+    </div>
+</template>
+
+<script>
+import AppHeader from './components/app-header'
+import nosApi from '@nosplatform/api-functions'
+
+export default {
+  name: 'app',
+  components: { AppHeader },
+  created () {
+  },
+  data: function () {
+    return {
+      nos: nosApi,
+      title: 'nOS dapp'
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>
diff --git a/packages/vuejs/src/assets/logo.png b/packages/vuejs/src/assets/logo.png
diff --git a/packages/vuejs/src/components/app-header.vue b/packages/vuejs/src/components/app-header.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="header">
+        <h1>{{ title }}</h1>
+        <div class="logo-box">
+            <img class="nos-logo" src="../assets/logo.png"/>
+        </div>
+        <div v-if="address !== ''">welcome {{ address }}</div>
+        <div v-if="balance !== null">your balance is: {{ balance }}</div>
+    </div>
+</template>
+
+<script>
+  const gas = "602c79718b16e442de58778e148d0b1084e3b2dffd5de6b7b16cee7969282de7";
+
+export default {
+  name: 'AppHeader',
+  props: {
+    title: {
+      required: true
+    },
+    nos: {
+      required: true
+    }
+  },
+  created () {
+    this.setAddress()
+  },
+  methods: {
+    setAddress: async function () {
+      this.address = await this.nos.getAddress()
+      this.balance = await this.nos.getBalance({asset: gas})
+    }
+  },
+  data () {
+    return {
+      address: '',
+      balance: null
+    }
+  }
+}
+</script>
+
+<style scoped>
+    .header {
+        text-align: center;
+    }
+    .nos-logo {
+        animation: nOS-logo-spin infinite 3s linear;
+        width: 100%;
+    }
+    .logo-box {
+        display: block;
+        max-width: 200px;
+        margin: 32px auto;
+        position: relative;
+    }
+    @keyframes nOS-logo-spin {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/packages/vuejs/src/components/main-page.vue b/packages/vuejs/src/components/main-page.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        body
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'MainPage',
+  props: {
+    nos: {
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/vuejs/src/main.js b/packages/vuejs/src/main.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router/index'
+
+const Dapp = new Vue({
+  el: '#app',
+  router,
+  render: h => h(App)
+})
+
+module.exports = Dapp
diff --git a/packages/vuejs/src/router/index.js b/packages/vuejs/src/router/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import MainPage from '../components/main-page'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'MainPage',
+      component: MainPage
+    }
+  ]
+})