expeditaea 1.0.0

package/examples/with-sockets/README.md

@@ -0,0 +1,12 @@
+# Nuxt with [Socket.io](https://socket.io/)
+
+An example for Nuxt with WebSockets over Socket.io.
+
+> Socket.IO enables real-time, bidirectional and event-based communication.
+> It works on every platform, browser or device, focusing equally on reliability and speed.
+
+* Do you use Nuxt programmatically (eg. with Express or Koa)? Take a look into [`server.js`](./server.js) for setting up WS with your implementation
+
+* In case you use Nuxt standalone, check out [`nuxt.config.js`](./nuxt.config.js) and the [io-module](./io/index.js)
+
+* In both situations you should look into the [`index.vue`](./pages/index.vue) where sending and receiving messages is done

package/examples/with-sockets/io/index.js

@@ -0,0 +1,26 @@
+import http from 'http'
+import socketIO from 'socket.io'
+
+export default function () {
+  this.nuxt.hook('render:before', (renderer) => {
+    const server = http.createServer(this.nuxt.renderer.app)
+    const io = socketIO(server)
+
+    // overwrite nuxt.server.listen()
+    this.nuxt.server.listen = (port, host) => new Promise(resolve => server.listen(port || 3000, host || 'localhost', resolve))
+    // close this server on 'close' event
+    this.nuxt.hook('close', () => new Promise(server.close))
+
+    // Add socket.io events
+    const messages = []
+    io.on('connection', (socket) => {
+      socket.on('last-messages', function (fn) {
+        fn(messages.slice(-50))
+      })
+      socket.on('send-message', function (message) {
+        messages.push(message)
+        socket.broadcast.emit('new-message', message)
+      })
+    })
+  })
+}

package/examples/with-sockets/nuxt.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  head: {
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    ]
+  },
+  modules: ['~/io'],
+  env: {
+    WS_URL: process.env.WS_URL || 'http://localhost:3000'
+  }
+}

package/examples/with-sockets/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-with-sockets",
+  "scripts": {
+    "dev": "nodemon -w server.js -w nuxt.config.js server.js",
+    "build": "nuxt build",
+    "start": "NODE_ENV=production node server.js",
+    "post-update": "yarn upgrade --latest"
+  },
+  "dependencies": {
+    "express": "^4.14.0",
+    "nuxt": "latest",
+    "socket.io": "^1.7.2",
+    "socket.io-client": "^1.7.2"
+  },
+  "devDependencies": {
+    "nodemon": "^1.11.0"
+  }
+}

package/examples/with-sockets/pages/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <ul class="pages">
+      <li class="chat page">
+        <div class="chatArea">
+          <ul ref="messages" class="messages">
+            <li v-for="(msg, index) in messages" :key="index" class="message">
+              <i :title="msg.date">
+                {{ msg.date.split('T')[1].slice(0, -2) }}
+              </i>: {{ msg.text }}
+            </li>
+          </ul>
+        </div>
+        <input v-model="message" class="inputMessage" type="text" placeholder="Type here..." @keyup.enter="sendMessage">
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import socket from '~/plugins/socket.io.js'
+
+export default {
+  asyncData () {
+    return new Promise(resolve =>
+      socket.emit('last-messages', messages => resolve({ messages }))
+    )
+  },
+  data () {
+    return { message: '' }
+  },
+  head: {
+    title: 'Nuxt.js with Socket.io'
+  },
+  watch: {
+    messages: 'scrollToBottom'
+  },
+  beforeMount () {
+    socket.on('new-message', (message) => {
+      this.messages.push(message)
+    })
+  },
+  mounted () {
+    this.scrollToBottom()
+  },
+  methods: {
+    sendMessage () {
+      if (!this.message.trim()) { return }
+      const message = {
+        date: new Date().toJSON(),
+        text: this.message.trim()
+      }
+      this.messages.push(message)
+      this.message = ''
+      socket.emit('send-message', message)
+    },
+    scrollToBottom () {
+      this.$nextTick(() => {
+        this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight
+      })
+    }
+  }
+}
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+}
+
+html, input {
+  font-family:
+    "HelveticaNeue-Light",
+    "Helvetica Neue Light",
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    "Lucida Grande",
+    sans-serif;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+ul {
+  list-style: none;
+  word-wrap: break-word;
+}
+
+/* Pages */
+
+.pages {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.page {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+/* Font */
+
+.messages {
+  font-size: 150%;
+}
+
+.inputMessage {
+  font-size: 100%;
+}
+
+.log {
+  color: gray;
+  font-size: 70%;
+  margin: 5px;
+  text-align: center;
+}
+
+/* Messages */
+
+.chatArea {
+  height: 100%;
+  padding-bottom: 60px;
+}
+
+.messages {
+  height: 100%;
+  margin: 0;
+  overflow-y: scroll;
+  padding: 10px 20px 10px 20px;
+}
+
+/* Input */
+
+.inputMessage {
+  border: 10px solid #3B8070;
+  bottom: 0;
+  height: 60px;
+  left: 0;
+  outline: none;
+  padding-left: 10px;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+</style>

package/examples/with-sockets/plugins/socket.io.js

@@ -0,0 +1,4 @@
+import io from 'socket.io-client'
+const socket = io(process.env.WS_URL)
+
+export default socket

package/examples/with-sockets/server.js

@@ -0,0 +1,36 @@
+const port = process.env.PORT || 3000
+const isProd = process.env.NODE_ENV === 'production'
+
+const http = require('http')
+const app = require('express')()
+const server = http.createServer(app)
+const io = require('socket.io')(server)
+
+const { Nuxt, Builder } = require('nuxt')
+// We instantiate Nuxt with the options
+const config = require('./nuxt.config.js')
+config.dev = !isProd
+
+const nuxt = new Nuxt(config)
+// Start build process in dev mode
+if (config.dev) {
+  const builder = new Builder(nuxt)
+  builder.build()
+}
+app.use(nuxt.render)
+
+// Listen the server
+server.listen(port, '0.0.0.0')
+console.log('Server listening on localhost:' + port) // eslint-disable-line no-console
+
+// Socket.io
+const messages = []
+io.on('connection', (socket) => {
+  socket.on('last-messages', function (fn) {
+    fn(messages.slice(-50))
+  })
+  socket.on('send-message', function (message) {
+    messages.push(message)
+    socket.broadcast.emit('new-message', message)
+  })
+})

package/examples/with-tape/README.md

@@ -0,0 +1,3 @@
+# Nuxt with [Tape](https://github.com/substack/tape) 
+
+> Tape is a tap-producing test harness for node and browsers

package/examples/with-tape/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "example-with-tape",
+	"scripts": {
+		"dev": "nuxt",
+		"build": "nuxt build",
+		"start": "nuxt start",
+		"test": "tape ./test/**/*.js -r ./test/setup.js | tap-spec",
+    "post-update": "yarn upgrade --latest"
+	},
+	"devDependencies": {
+    "@vue/test-utils": "^1.0.0",
+		"browser-env": "^3.2.1",
+		"require-extension-hooks": "^0.3.2",
+		"require-extension-hooks-babel": "^0.1.1",
+		"require-extension-hooks-vue": "^0.4.1",
+		"tap-spec": "^4.1.1",
+		"tape": "^4.8.0"
+	},
+	"dependencies": {
+		"nuxt": "latest"
+	}
+}

package/examples/with-tape/pages/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1 :class="className">
+      Hello {{ name }}!
+    </h1>
+    <button @click="changeColor()">
+      Change h1 Color
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return { name: 'world', className: 'red' }
+  },
+  methods: {
+    changeColor () {
+      this.className = this.className === 'red' ? 'blue' : 'green'
+    }
+  }
+}
+</script>
+
+<style>
+.red {
+  color: red;
+}
+.blue {
+  color: blue;
+}
+.green {
+  color: green;
+}
+</style>

package/examples/with-tape/test/index.test.js

@@ -0,0 +1,43 @@
+import test from 'tape'
+import { shallow } from '@vue/test-utils'
+import Index from '../pages/index.vue'
+
+test('renders Index.vue correctly', (t) => {
+  t.plan(4)
+
+  const wrapper = shallow(Index, {
+    data: {
+      name: 'nuxt'
+    }
+  })
+
+  const button = wrapper.find('button')
+
+  t.equal(
+    wrapper.find('h1').text(),
+    'Hello nuxt!',
+    'renders "Hello nuxt!" text'
+  )
+
+  t.equal(
+    wrapper.find('h1').hasClass('red'),
+    true,
+    'h1 has a red class [default]'
+  )
+
+  button.trigger('click')
+
+  t.equal(
+    wrapper.find('h1').hasClass('blue'),
+    true,
+    'h1 class changes to blue [after 1st click]'
+  )
+
+  button.trigger('click')
+
+  t.equal(
+    wrapper.find('h1').hasClass('green'),
+    true,
+    'h1 class changes to green [after 2nd click]'
+  )
+})

package/examples/with-tape/test/setup.js

@@ -0,0 +1,14 @@
+import hooks from 'require-extension-hooks'
+
+// Setup browser environment
+require('browser-env')()
+
+// Setup vue files to be processed by `require-extension-hooks-vue`
+hooks('vue')
+  .plugin('vue')
+  .push()
+
+// Setup vue and js files to be processed by `require-extension-hooks-babel`
+hooks(['vue', 'js'])
+  .plugin('babel')
+  .push()

package/examples/with-vue-material/README.md

@@ -0,0 +1,9 @@
+# Nuxt With [Vue-Material](https://vuematerial.io/)
+
+> Vue Material is a Vue.js bassed Material Design component library
+
+## Compatibility
+
+Vue-Material >= 1.0.0beta
+
+[View Demo](https://nuxt-vue-material.now.sh)

package/examples/with-vue-material/nuxt.config.js

@@ -0,0 +1,25 @@
+export default {
+  head: {
+    meta: [
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1, minimal-ui'
+      }
+    ],
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons'
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://unpkg.com/vue-material@beta/dist/vue-material.min.css'
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://unpkg.com/vue-material@beta/dist/theme/default.css'
+      }
+    ]
+  },
+  plugins: ['~/plugins/vue-material']
+}

package/examples/with-vue-material/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "example-with-vue-material",
+  "version": "1.0.0",
+  "dependencies": {
+    "nuxt": "latest",
+    "vue": "~2.4.4",
+    "vue-material": "beta"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  }
+}

package/examples/with-vue-material/pages/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="page-container md-layout-column">
+    <md-toolbar class="md-primary">
+      <md-button class="md-icon-button" @click="showNavigation = true">
+        <md-icon>menu</md-icon>
+      </md-button>
+      <span class="md-title">
+        Nuxt + Vue Material
+      </span>
+
+      <div class="md-toolbar-section-end">
+        <md-button @click="showSidepanel = true">
+          Favorites
+        </md-button>
+      </div>
+    </md-toolbar>
+
+    <md-drawer :md-active.sync="showNavigation">
+      <md-toolbar class="md-transparent" md-elevation="0">
+        <span class="md-title">
+          My App name
+        </span>
+      </md-toolbar>
+
+      <md-list>
+        <md-list-item>
+          <md-icon>move_to_inbox</md-icon>
+          <span class="md-list-item-text">
+            Inbox
+          </span>
+        </md-list-item>
+
+        <md-list-item>
+          <md-icon>send</md-icon>
+          <span class="md-list-item-text">
+            Sent Mail
+          </span>
+        </md-list-item>
+
+        <md-list-item>
+          <md-icon>delete</md-icon>
+          <span class="md-list-item-text">
+            Trash
+          </span>
+        </md-list-item>
+
+        <md-list-item>
+          <md-icon>error</md-icon>
+          <span class="md-list-item-text">
+            Spam
+          </span>
+        </md-list-item>
+      </md-list>
+    </md-drawer>
+
+    <md-drawer :md-active.sync="showSidepanel" class="md-right">
+      <md-toolbar class="md-transparent" md-elevation="0">
+        <span class="md-title">
+          Favorites
+        </span>
+      </md-toolbar>
+
+      <md-list>
+        <md-list-item>
+          <span class="md-list-item-text">
+            Abbey Christansen
+          </span>
+
+          <md-button class="md-icon-button md-list-action">
+            <md-icon class="md-primary">
+              chat_bubble
+            </md-icon>
+          </md-button>
+        </md-list-item>
+
+        <md-list-item>
+          <span class="md-list-item-text">
+            Alex Nelson
+          </span>
+
+          <md-button class="md-icon-button md-list-action">
+            <md-icon class="md-primary">
+              chat_bubble
+            </md-icon>
+          </md-button>
+        </md-list-item>
+
+        <md-list-item>
+          <span class="md-list-item-text">
+            Mary Johnson
+          </span>
+
+          <md-button class="md-icon-button md-list-action">
+            <md-icon>chat_bubble</md-icon>
+          </md-button>
+        </md-list-item>
+      </md-list>
+    </md-drawer>
+
+    <md-content>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
+    </md-content>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sidenav',
+  data: () => ({
+    showNavigation: false,
+    showSidepanel: false
+  })
+}
+</script>
+
+<style scoped>
+  .page-container {
+    min-height: 100vh;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid rgba(#000, 0.12);
+  }
+
+  .md-drawer {
+    width: 230px;
+    max-width: calc(100vw - 125px);
+  }
+
+  .md-content {
+    padding: 16px;
+  }
+</style>

package/examples/with-vue-material/plugins/vue-material.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueMaterial from 'vue-material'
+
+Vue.use(VueMaterial)

package/examples/with-vuetify/README.md

@@ -0,0 +1,11 @@
+# Using [Vuetify.js](https://vuetifyjs.com/en/) with Nuxt
+
+> Vuetify is a Vue based Material Design Component Framework
+
+## Demo
+https://nuxt-with-vuetify-example.surge.sh
+
+## Resources
+https://github.com/nuxt-community/vuetify-module
+https://nuxtjs.org/examples/with-vuetify
+https://vuetifyjs.com/

package/examples/with-vuetify/assets/variabales.scss

@@ -0,0 +1 @@
+// https://github.com/nuxt-community/vuetify-module#customvariables