Update examples/with-typescript #8

examples/with-typescript/README.md

@@ -1,18 +1,18 @@
-<p align="center"><img src="https://i.imgur.com/Nt6SNJb.png"></p>
+<p align="center"><img src="https://i.imgur.com/PTqXTbx.png"></p>
 
 ## Usage
 
 ```bash
+# create an app
 $ nuxtron init my-app --example with-typescript
 
+# install dependencies
 $ cd my-app
-
-# Install dependencies
 $ yarn (or `npm install`)
 
-# Run development mode
+# development mode
 $ yarn dev (or `npm run dev`)
 
-# Build packages
+# production build
 $ yarn build (or `npm run build`)
 ```

examples/with-typescript/electron-builder.yml

@@ -1,6 +1,12 @@
 appId: com.example.nuxtron
 productName: My Nuxtron App
-copyright: Copyright © 2018 Yoshihide Shiono
+copyright: Copyright © 2019 Shiono Yoshihide
 directories:
   output: dist
   buildResources: resources
+files:
+  - from: .
+    filter:
+      - package.json
+      - app
+publish: null

examples/with-typescript/package.json

@@ -3,34 +3,23 @@
   "name": "with-typescript",
   "description": "My application description",
   "version": "1.0.0",
-  "author": "Yoshihide Shiono <[email protected]>",
+  "author": "Shiono Yoshihide <[email protected]>",
   "main": "app/background.js",
   "scripts": {
-    "dev": "node build/nuxtron.js",
-    "build": "node build/nuxtron.js build"
+    "dev": "nuxtron",
+    "build": "nuxtron build"
   },
   "dependencies": {
-    "electron-store": "^3.2.0",
-    "nuxt": "2.8.1"
+    "electron-serve": "^0.4.0",
+    "electron-store": "^5.0.0"
   },
   "devDependencies": {
-    "@nuxt/typescript": "2.8.1",
-    "@types/cross-spawn": "^6.0.0",
-    "@types/fs-extra": "^7.0.0",
-    "@types/node": "^12.0.3",
-    "@types/webpack": "^4.4.32",
-    "arg": "^4.1.0",
-    "chalk": "^2.4.2",
-    "electron": "5.0.3",
-    "electron-builder": "20.43.0",
-    "fast-glob": "^2.2.6",
-    "friendly-errors-webpack-plugin": "^1.7.0",
-    "fs-extra": "^8.0.1",
-    "node-npx": "^1.3.1",
-    "ora": "^3.4.0",
-    "ts-node": "^8.1.0",
-    "typescript": "^3.5.1",
-    "webpack": "^4.33.0",
-    "webpack-merge": "^4.2.1"
+    "@nuxt/typescript": "^2.8.1",
+    "@types/node": "^12.7.12",
+    "electron": "^6.0.12",
+    "electron-builder": "^21.2.0",
+    "nuxt": "^2.10.1",
+    "nuxtron": "^0.1.31",
+    "typescript": "^3.6.4"
   }
 }

examples/with-typescript/renderer/nuxt.config.js

@@ -1,9 +1,10 @@
 export default {
+  head: {
+    title: 'Nuxtron (with-typescript)',
+  },
   build: {
-    extend: config => {
+    extend: (config) => {
       config.target = 'electron-renderer';
     },
-    extractCSS: true,
   },
-  plugins: ['~/plugins/nuxtron'],
-};
+}

examples/with-typescript/renderer/pages/about.vue

@@ -1,13 +1,26 @@
 <template>
   <div class="container">
-    <img :src="resolve('static/nuxt-black.png')">
+    <img src="/nuxt-black.png">
     <h2>Thank you for testing Nuxtron</h2>
+    <p>Loaded from the {{ name }}</p>
     <p>
-      <a :href="resolve('home')">Back home</a>
+      <NuxtLink to="/">
+        Back home
+      </NuxtLink>
     </p>
   </div>
 </template>
 
+<script>
+export default {
+  asyncData ({ req }) {
+    return {
+      name: process.static ? 'static' : (process.server ? 'server' : 'client'),
+    }
+  }
+}
+</script>
+
 <style scoped>
 .container {
   position: absolute;
@@ -18,10 +31,10 @@
   background: black;
   color: white;
   font-family: "Lucida Console", Monaco, monospace;
-  padding-top: 130px;
+  padding-top: 100px;
   text-align: center;
 }
 a {
-  color: silver;
+  color: white;
 }
-</style>
+</style>

examples/with-typescript/renderer/pages/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <img src="/nuxt.png">
+    <h2>Hello Nuxtron.</h2>
+    <p>Loaded from the {{ name }}</p>
+    <p>
+      <NuxtLink to="/about">
+        About
+      </NuxtLink>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ req }) {
+    return {
+      name: process.static ? 'static' : (process.server ? 'server' : 'client'),
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: white;
+  color: black;
+  font-family: "Lucida Console", Monaco, monospace;
+  padding-top: 100px;
+  text-align: center;
+}
+a {
+  color: black;
+}
+</style>

examples/with-typescript/tsconfig.json

@@ -3,13 +3,15 @@
     "target": "esnext",
     "module": "commonjs",
     "moduleResolution": "node",
-    "strict": true,
     "jsx": "preserve",
+    "strict": true,
+    "sourceMap": true,
     "importHelpers": true,
     "esModuleInterop": true,
-    "sourceMap": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true
   },
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }