Update examples/with-javascript (development mode) #8

examples/with-javascript/README.md

@@ -3,16 +3,16 @@
 ## Usage
 
 ```bash
+# create an app
 $ nuxtron init my-app --example with-javascript
 
+# 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-javascript/package.json

@@ -16,24 +16,17 @@
     "publish": null
   },
   "scripts": {
-    "dev": "node build/nuxtron.js",
-    "build": "node build/nuxtron.js build"
+    "dev": "nuxtron",
+    "build": "nuxtron build"
   },
   "dependencies": {
-    "fs-jetpack": "^2.2.2",
-    "nuxt": "2.8.1"
+    "electron-serve": "^0.4.0",
+    "electron-store": "^5.0.0"
   },
   "devDependencies": {
-    "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",
-    "webpack": "^4.33.0",
-    "webpack-merge": "^4.2.1"
+    "electron": "^6.0.12",
+    "electron-builder": "^21.2.0",
+    "nuxt": "^2.10.1",
+    "nuxtron": "^0.1.31"
   }
 }

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

@@ -5,7 +5,4 @@ export default {
     },
     extractCSS: true,
   },
-  plugins: [
-    '~/plugins/nuxtron',
-  ],
 }

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

@@ -1,11 +1,26 @@
 <template>
   <div class="container">
-    <img :src="resolve('static/nuxt-black.png')">
+    <img src="~static/nuxt-black.png">
     <h2>Thank you for testing Nuxtron</h2>
-    <p><a :href="resolve('home')">Back home</a></p>
+    <p>Loaded from the {{ name }}</p>
+    <p>
+      <NuxtLink to="/home">
+        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;
@@ -16,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-javascript/renderer/pages/home.vue

@@ -1,15 +1,40 @@
 <template>
   <div class="container">
-    <img :src="resolve('static/nuxt.png')">
-    <h2>Hello World.</h2>
-    <p><a :href="resolve('about')">About</a></p>
+    <img src="~static/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 {
-  font-family: sans-serif;
-  padding-top: 130px;
+  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>