expeditaea 1.0.0

package/examples/layout-transitions/pages/users.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="container">
+    <NuxtLink v-if="page > 1" :to="'?page=' + (page - 1)">
+      &lt; Prev
+    </NuxtLink>
+    <a v-else class="disabled">
+      &lt; Prev
+    </a>
+    <span>{{ page }}/{{ totalPages }}</span>
+    <NuxtLink v-if="page < totalPages" :to="'?page=' + (page + 1)">
+      Next &gt;
+    </NuxtLink>
+    <a v-else class="disabled">
+      Next &gt;
+    </a>
+    <ul>
+      <li v-for="user in users" :key="user.id">
+        <img :src="user.avatar" class="avatar">
+        <span>{{ user.first_name }} {{ user.last_name }}</span>
+      </li>
+    </ul>
+    <p>
+      <NuxtLink to="/">
+        Back home
+      </NuxtLink>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  // Key for <NuxtChild> (transitions)
+  key: to => to.fullPath,
+  // Called to know which transition to apply
+  transition (to, from) {
+    if (!from) { return 'slide-left' }
+    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
+  },
+  async asyncData ({ query }) {
+    const page = +(query.page || 1)
+    const data = await fetch(`https://reqres.in/api/users?page=${page}`).then(res => res.json())
+    return {
+      page,
+      totalPages: data.total_pages,
+      users: data.data
+    }
+  },
+  head: {
+    title: 'Users'
+  },
+  // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
+  watchQuery: ['page']
+}
+</script>
+
+<style scoped>
+a {
+  display: inline-block;
+  margin: 0 1em;
+  color: #34495e;
+  text-decoration: none;
+}
+a.disabled {
+  color: #ccc;
+}
+ul {
+  margin: auto;
+  padding: 0;
+  width: 100%;
+  max-width: 400px;
+  padding-top: 40px;
+}
+li {
+  list-style-type: none;
+  width: 400px;
+  border: 1px #ddd solid;
+  overflow: hidden;
+}
+li img {
+  float: left;
+  width: 100px;
+  height: 100px;
+}
+li span {
+  display: inline-block;
+  padding-top: 40px;
+  text-transform: uppercase;
+}
+</style>

package/examples/markdownit/README.md

@@ -0,0 +1,5 @@
+# Nuxt with Markdown
+
+> Convert Markdown file to HTML using markdown-it.
+
+**See [Markdownit Module](https://github.com/nuxt-community/modules/tree/master/packages/markdownit) for easy integration with [Nuxt](https://nuxtjs.org).**

package/examples/markdownit/nuxt.config.js

@@ -0,0 +1,8 @@
+export default {
+  modules: [
+    '@nuxtjs/markdownit'
+  ],
+  plugins: [
+    '~/plugins/md-it'
+  ]
+}

package/examples/markdownit/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-markdownit",
+  "version": "1.0.0",
+  "dependencies": {
+    "@nuxtjs/markdownit": "^1.1.2",
+    "nuxt": "latest",
+    "pug": "^2.0.0-rc.4"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  },
+  "devDependencies": {
+    "jstransformer-markdown-it": "^2.0.0"
+  }
+}

package/examples/markdownit/pages/about.vue

@@ -0,0 +1,6 @@
+<template lang="md">
+  # About Page!
+  Current route is: {{ $route.name }}
+
+  <NuxtLink to="/">Back home</NuxtLink>
+</template>

package/examples/markdownit/pages/index.vue

@@ -0,0 +1,19 @@
+<template lang="md">
+  # Hello World!
+
+  Current route is: {{ $route.path }}
+
+  Data model is: {{ model }}
+
+  <NuxtLink to="/about">Goto About</NuxtLink>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: 'I am index'
+    }
+  }
+}
+</script>

package/examples/markdownit/pages/pug.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+  div
+    h1 Pug Page
+    :markdown-it()
+      ## Current route is: {{ $route.name }}
+    div(v-html="$md.render(model)")
+
+    br
+    nuxt-link(to='/') Back Home
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: '## Title h2\n### title h3\n\nLong text Long text Long text Long text Long text Long text Long text Long text Long text \n\n* gimme a list item\n* and one more yeehaw'
+    }
+  }
+}
+</script>

package/examples/markdownit/plugins/md-it.js

@@ -0,0 +1,5 @@
+import MarkdownIt from 'markdown-it'
+
+export default ({ app }, inject) => {
+  inject('md', new MarkdownIt())
+}

package/examples/meta-info/README.md

@@ -0,0 +1,13 @@
+# Manage your app's meta information
+
+Nuxt uses [vue-meta](https://github.com/nuxt/vue-meta) to manage page meta info (such as: meta, title, link, style, script) of your application.
+
+## Example
+
+SEO: https://nuxtjs.org/examples/seo-html-head
+
+## Documentation
+
+Nuxt: https://nuxtjs.org/guide/views#html-head
+
+vue-meta: https://github.com/nuxt/vue-meta#table-of-contents

package/examples/meta-info/components/twitter-head-card.vue

@@ -0,0 +1,22 @@
+<template>
+  <span v-if="false" />
+</template>
+
+<script>
+// Test on: https://cards-dev.twitter.com/validator
+export default {
+  data: () => ({
+    href: 'https://twitter.com/intent/tweet?url=' + encodeURIComponent('https://head-elements.now.sh/about')
+  }),
+  head: {
+    meta: [
+      { name: 'twitter:card', content: 'summary' },
+      { name: 'twitter:site', content: '@nuxt_js' },
+      { name: 'twitter:title', content: 'Nuxt Twitter Card' },
+      { name: 'twitter:description', content: 'Nuxt lets you handle custom headers for your app with vue-meta' },
+      { name: 'twitter:image', content: 'https://avatars0.githubusercontent.com/u/23360933?v=3' },
+      { name: 'twitter:image:alt', content: 'Nuxt logo' }
+    ]
+  }
+}
+</script>

package/examples/meta-info/nuxt.config.js

@@ -0,0 +1,13 @@
+export default {
+  head: {
+    titleTemplate: '%s - Nuxt',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Meta description' }
+    ]
+  },
+  render: {
+    ssrLog: 'collapsed'
+  }
+}

package/examples/meta-info/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-meta-info",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  }
+}

package/examples/meta-info/pages/about.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <h1>About page</h1>
+    <p>Check the source code to see the custom meta tags added with our custom component <code>twitter-head-card</code></p>
+    <TwitterHeadCard />
+    <p>
+      <NuxtLink to="/">
+        Home page
+      </NuxtLink>
+    </p>
+  </div>
+</template>
+
+<script>
+import TwitterHeadCard from '~/components/twitter-head-card.vue'
+
+export default {
+  components: {
+    TwitterHeadCard
+  },
+  head: {
+    title: 'About Page',
+    meta: [
+      { hid: 'description', name: 'description', content: 'About page description' }
+    ]
+  }
+}
+</script>
+
+<style>
+.container {
+  text-align: center;
+  margin-top: 150px;
+  font-size: 20px;
+}
+</style>

package/examples/meta-info/pages/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <h1>Home page 🚀</h1>
+    <NuxtLink to="/about">
+      About page
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Home page 🚀',
+    meta: [
+      { hid: 'description', name: 'description', content: 'Home page description' }
+    ],
+    noscript: [
+      { innerHTML: 'Body No Scripts', body: true }
+    ],
+    script: [
+      { src: '/head.js' },
+      // Supported since 1.0
+      { src: '/body.js', body: true },
+      { src: '/defer.js', defer: '' }
+    ]
+  }
+}
+</script>
+
+<style>
+.container {
+  text-align: center;
+  margin-top: 150px;
+  font-size: 20px;
+}
+</style>

package/examples/meta-info/static/about.js

@@ -0,0 +1 @@
+console.log('about.js loaded!') // eslint-disable-line no-console

package/examples/meta-info/static/body.js

@@ -0,0 +1 @@
+console.log('body.js loaded!') // eslint-disable-line no-console

package/examples/meta-info/static/defer.js

@@ -0,0 +1 @@
+console.log('defer.js loaded!') // eslint-disable-line no-console

package/examples/meta-info/static/head.js

@@ -0,0 +1 @@
+console.log('head.js loaded!') // eslint-disable-line no-console

package/examples/middleware/README.md

@@ -0,0 +1,6 @@
+# Middleware with Nuxt
+
+## Demo
+https://nuxtjs.org/examples/middleware
+
+Read more Nuxt on middleware [here](https://nuxtjs.org/guide/routing#middleware)

package/examples/middleware/components/Visits.vue

@@ -0,0 +1,42 @@
+<template>
+  <ul>
+    <li v-for="(visit, index) in visits" :key="index">
+      <i>{{ visit.date | hours }}</i> - {{ visit.path }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  filters: {
+    hours (date) {
+      return date.split('T')[1].split('.')[0]
+    }
+  },
+  computed: {
+    visits () {
+      return this.$store.state.visits.slice().reverse()
+    }
+  }
+}
+</script>
+
+<style scoped>
+ul {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: auto;
+  list-style-type: none;
+}
+ul li {
+  padding: 2px 0;
+}
+ul li i {
+  color: gray;
+  font-style: normal;
+}
+</style>

package/examples/middleware/layouts/default.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <Nuxt />
+    <Visits />
+  </div>
+</template>
+
+<script>
+import Visits from '~/components/Visits'
+
+export default {
+  components: { Visits }
+}
+</script>

package/examples/middleware/middleware/user-agent.js

@@ -0,0 +1,3 @@
+export default function (context) {
+  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
+}

package/examples/middleware/middleware/visits.js

@@ -0,0 +1,3 @@
+export default function ({ store, route, redirect }) {
+  store.commit('ADD_VISIT', route.path)
+}

package/examples/middleware/nuxt.config.js

@@ -0,0 +1,5 @@
+export default {
+  router: {
+    middleware: ['visits', 'user-agent']
+  }
+}

package/examples/middleware/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-middleware",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  }
+}

package/examples/middleware/pages/_slug.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1>{{ $route.params.slug || 'Home' }}</h1>
+    <pre>{{ userAgent }}</pre>
+    <ul>
+      <li>
+        <NuxtLink to="/">
+          Home
+        </NuxtLink>
+      </li>
+      <li v-for="(slug, index) in slugs" :key="index">
+        <NuxtLink :to="{ name: 'slug', params: { slug } }">
+          {{ slug }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ store, route, userAgent }) {
+    return {
+      userAgent,
+      slugs: [
+        'foo',
+        'bar',
+        'baz'
+      ]
+    }
+  }
+}
+</script>

package/examples/middleware/store/index.js

@@ -0,0 +1,12 @@
+export const state = () => ({
+  visits: []
+})
+
+export const mutations = {
+  ADD_VISIT (state, path) {
+    state.visits.push({
+      path,
+      date: new Date().toJSON()
+    })
+  }
+}

package/examples/minimal-features/README.md

@@ -0,0 +1,3 @@
+# A minimal Hello World Nuxt app
+
+https://nuxtjs.org/examples

package/examples/minimal-features/nuxt.config.js

@@ -0,0 +1,28 @@
+export default {
+  loading: false,
+  loadingIndicator: false,
+  fetch: {
+    client: false,
+    server: false
+  },
+  features: {
+    store: false,
+    layouts: false,
+    meta: false,
+    middleware: false,
+    transitions: false,
+    deprecations: false,
+    validate: false,
+    asyncData: false,
+    fetch: false,
+    clientOnline: false,
+    clientPrefetch: false,
+    clientUseUrl: true,
+    componentAliases: false,
+    componentClientOnly: false
+  },
+  build: {
+    indicator: false,
+    terser: true
+  }
+}

package/examples/minimal-features/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-minimal-features",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  }
+}

package/examples/minimal-features/pages/about.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <p>Hi from {{ name }}</p>
+    <nuxt-link to="/">
+      Home page
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      name: process.static ? 'static' : (process.server ? 'server' : 'client')
+    }
+  },
+  head: {
+    title: 'About page'
+  }
+}
+</script>

package/examples/minimal-features/pages/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Welcome!</h1>
+    <nuxt-link to="/about">
+      About Page
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Home page'
+  }
+}
+</script>

package/examples/named-views/README.md

@@ -0,0 +1 @@
+# Nuxt with named views

package/examples/named-views/components/childLeft.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    Child Left content!
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChildLeft'
+}
+</script>
+
+<style scoped>
+
+</style>

package/examples/named-views/components/mainTop.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="top">
+    Main Top content!
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainTop'
+}
+</script>
+
+<style scoped>
+  .top {
+    margin: auto;
+    max-width: 420px;
+    padding: 10px;
+  }
+</style>

package/examples/named-views/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <Nuxt name="top" />
+    <Nuxt />
+  </div>
+</template>

package/examples/named-views/nuxt.config.js

@@ -0,0 +1,30 @@
+export default {
+  router: {
+    extendRoutes (routes, resolve) {
+      const indexIndex = routes.findIndex(route => route.name === 'index')
+      let index = routes[indexIndex].children.findIndex(route => route.name === 'index-child-id')
+      routes[indexIndex].children[index] = {
+        ...routes[indexIndex].children[index],
+        components: {
+          default: routes[indexIndex].children[index].component,
+          left: resolve(__dirname, 'components/childLeft.vue')
+        },
+        chunkNames: {
+          left: 'components/childLeft'
+        }
+      }
+
+      index = routes.findIndex(route => route.name === 'main')
+      routes[index] = {
+        ...routes[index],
+        components: {
+          default: routes[index].component,
+          top: resolve(__dirname, 'components/mainTop.vue')
+        },
+        chunkNames: {
+          top: 'components/mainTop'
+        }
+      }
+    }
+  }
+}

package/examples/named-views/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "my-app",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  }
+}