expeditaea 1.0.0

package/examples/storybook/stories/vuetify.story.js

@@ -0,0 +1,110 @@
+import { storiesOf } from '@storybook/vue'
+
+import Centered from '@storybook/addon-centered'
+import VuetifyLogo from '~/components/VuetifyLogo.vue'
+
+storiesOf('Vuetify/Logo', module)
+  .addDecorator(Centered)
+  .add('Logo', () => ({
+    render: h => h(VuetifyLogo)
+  }))
+
+const menuItems = [
+  {
+    action: 'local_activity',
+    title: 'Attractions',
+    items: [{ title: 'List Item' }]
+  },
+  {
+    action: 'restaurant',
+    title: 'Dining',
+    active: true,
+    items: [
+      { title: 'Breakfast & brunch' },
+      { title: 'New American' },
+      { title: 'Sushi' }
+    ]
+  },
+  {
+    action: 'school',
+    title: 'Education',
+    items: [{ title: 'List Item' }]
+  },
+  {
+    action: 'directions_run',
+    title: 'Family',
+    items: [{ title: 'List Item' }]
+  },
+  {
+    action: 'healing',
+    title: 'Health',
+    items: [{ title: 'List Item' }]
+  },
+  {
+    action: 'content_cut',
+    title: 'Office',
+    items: [{ title: 'List Item' }]
+  },
+  {
+    action: 'local_offer',
+    title: 'Promotions',
+    items: [{ title: 'List Item' }]
+  }
+]
+
+const menuItemsAlt = [
+  {
+    action: 'inbox',
+    title: 'Mailbox'
+  },
+  {
+    action: 'note',
+    title: 'My Address'
+  },
+  {
+    action: 'assignment',
+    title: 'In Progress',
+    active: true,
+    items: [
+      { title: 'Consolidation' },
+      { title: 'Repacking' },
+      { title: 'Shipping' }
+    ]
+  },
+  {
+    action: 'playlist_add_check',
+    title: 'Registration'
+  },
+  {
+    action: 'account_circle',
+    title: 'Account'
+  },
+  {
+    action: 'view_headline',
+    title: 'Shipped'
+  }
+]
+
+storiesOf('Vuetify/V-Btn', module)
+  .add('Square Button', () => ({
+    components: {},
+    data () {
+      return {
+        items: menuItems
+      }
+    },
+    template:
+      '<v-btn color="success">Success</v-btn>'
+  }))
+  .add('with rounded button', () => ({
+    components: {},
+    data () {
+      return {
+        items: menuItemsAlt
+      }
+    },
+    template:
+      `<v-btn color="warning" large round  dark>
+Rounded button
+    </v-btn>`
+  }))

package/examples/style-resources/README.md

@@ -0,0 +1,56 @@
+# Using build.styleResources with Nuxt
+
+This is useful when you need to inject some variables and mixins in your pages without having to import them every time.
+
+Nuxt uses https://github.com/yenshih/style-resources-loader to achieve this behaviour.
+
+You need to specify the patterns/path you want to include for the given pre-processors: `css`, `less`, `sass`, `scss` or `stylus`
+
+:warning: You cannot use path aliases here (`~` and `@`), you need to use relative or absolute paths.
+
+`nuxt.config.js`:
+
+```js
+{
+  build: {
+    styleResources: {
+      scss: './assets/variables.scss',
+      less: './assets/*.less',
+      // sass: ...,
+      // scss: ...
+      options: {
+        // See https://github.com/yenshih/style-resources-loader#options
+        // Except `patterns` property
+      }
+    }
+  }
+}
+```
+
+:warning: If you want to use `@import` in these `styleResources` files, you should use path alias (`~@`) like this
+
+```scss
+@import '~@/assets/other.scss';
+```
+
+Then in your pages, you can use directly:
+
+`pages/index.vue`
+
+```vue
+<template>
+  <div class="main">
+    <p>Page with SCSS</p>
+    <p><NuxtLink to="/less">LESS</NuxtLink></p>
+  </div>
+</template>
+
+<style lang="scss">
+/* ~/assets/variables.scss is injected automatically here */
+.main {
+  background: $main;
+}
+</style>
+```
+
+Thanks to [0pt1m1z3r](https://github.com/0pt1m1z3r) for adding this feature and example.

package/examples/style-resources/assets/resources.less

@@ -0,0 +1 @@
+@main: orange;

package/examples/style-resources/assets/variables.scss

@@ -0,0 +1 @@
+$main: #ccc;

package/examples/style-resources/nuxt.config.js

@@ -0,0 +1,9 @@
+export default {
+  build: {
+    // You cannot use ~/ or @/ here since it's a Webpack plugin
+    styleResources: {
+      scss: './assets/variables.scss',
+      less: './assets/*.less'
+    }
+  }
+}

package/examples/style-resources/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-style-resources",
+  "dependencies": {
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  },
+  "devDependencies": {
+    "sass": "^1.29.0",
+    "sass-loader": "^10.1.0"
+  }
+}

package/examples/style-resources/pages/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="main">
+    <p>Page with SCSS</p>
+    <p>
+      <NuxtLink to="/less">
+        LESS
+      </NuxtLink>
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* ~/assets/variables.scss is injected automatically here */
+.main {
+  background: $main;
+  padding: 10px;
+}
+</style>

package/examples/style-resources/pages/less.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="main">
+    <p>Page with LESS</p>
+    <p>
+      <NuxtLink to="/">
+        SCSS
+      </NuxtLink>
+    </p>
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* ~/assets/*.less are injected automatically here */
+.main {
+  background: @main;
+  padding: 10px;
+}
+a {
+  color: white;
+}
+</style>

package/examples/styled-vue/README.md

@@ -0,0 +1,5 @@
+# Nuxt with [styled-vue](https://github.com/egoist/styled-vue)
+
+> *styled-vue* allows to use dynamic styles in Vue single-file components.
+
+See https://github.com/egoist/styled-vue

package/examples/styled-vue/nuxt.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  modules: [
+    'styled-vue/nuxt'
+  ]
+}

package/examples/styled-vue/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "example-styled-vue",
+  "version": "1.0.0",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  },
+  "devDependencies": {
+    "styled-vue": "^0.1.3"
+  }
+}

package/examples/styled-vue/pages/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>styled-vue</h1>
+    <a href="https://github.com/egoist/styled-vue" class="github">
+      Check it out on GitHub.
+    </a>
+  </div>
+</template>
+
+<script>
+import { css } from 'styled-vue'
+
+export default {
+  style: css`
+    h1 {
+      color: red;
+      font-size: ${vm => vm.fontSize}px;
+    }
+    .github {
+      color: blue;
+      animation: blink 1s linear infinite;
+    }
+    @keyframes blink {
+      50% {
+        opacity: 0;
+      }
+    }
+  `,
+  data () {
+    return {
+      fontSize: 60
+    }
+  }
+}
+</script>

package/examples/tailwindcss/README.md

@@ -0,0 +1,5 @@
+# Nuxt with Tailwind CSS
+
+See https://tailwindcss.com/docs/what-is-tailwind/
+
+Demo: https://tailwindcss.nuxtjs.org

package/examples/tailwindcss/assets/css/tailwind.css

@@ -0,0 +1,57 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, you should import this line from it's own file:
+ *
+ * @import "./tailwind-preflight.css";
+ *
+ * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+ */
+ @tailwind preflight;
+
+ /**
+  * Here you would add any of your custom component classes; stuff that you'd
+  * want loaded *before* the utilities so that the utilities could still
+  * override them.
+  *
+  * Example:
+  *
+  * .btn { ... }
+  * .form-input { ... }
+  *
+  * Or if using a preprocessor or `postcss-import`:
+  *
+  * @import "components/buttons";
+  * @import "components/forms";
+  */
+
+ /**
+  * This injects all of Tailwind's utility classes, generated based on your
+  * config file.
+  *
+  * If using `postcss-import`, you should import this line from it's own file:
+  *
+  * @import "./tailwind-utilities.css";
+  *
+  * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+  */
+ @tailwind utilities;
+
+ /**
+  * Here you would add any custom utilities you need that don't come out of the
+  * box with Tailwind.
+  *
+  * Example :
+  *
+  * .bg-pattern-graph-paper { ... }
+  * .skew-45 { ... }
+  *
+  * Or if using a preprocessor or `postcss-import`:
+  *
+  * @import "utilities/background-patterns";
+  * @import "utilities/skew-transforms";
+  */

package/examples/tailwindcss/layouts/default.vue

@@ -0,0 +1,14 @@
+<template>
+  <!-- See https://tailwindcss.com/docs/container -->
+  <div class="container mx-auto">
+    <Nuxt />
+    <a href="https://github.com/nuxt/nuxt.js/tree/dev/examples/tailwindcss" class="inline-flex items-center no-underline mt-4 rounded-full border border-grey-light bg-grey-lightest text-xs text-grey-darkest font-semibold p-2">
+      <span class="inline-flex rounded-full mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.73.084-.73 1.205.085 1.838 1.237 1.838 1.237 1.07 1.835 2.81 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.136-.303-.54-1.523.104-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.644 1.653.24 2.873.12 3.176.764.84 1.23 1.91 1.23 3.22 0 4.61-2.806 5.625-5.476 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.824.57 4.8-1.574 8.236-6.074 8.236-11.37 0-6.626-5.373-12-12-12" />
+        </svg>
+      </span>
+      <span>Source code</span>
+    </a>
+  </div>
+</template>

package/examples/tailwindcss/nuxt.config.js

@@ -0,0 +1,3 @@
+export default {
+  css: ['~/assets/css/tailwind.css']
+}

package/examples/tailwindcss/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "example-tailwindcss",
+  "description": "Nuxt with Tailwind CSS",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  },
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.6",
+    "tailwindcss": "^0.1.3"
+  }
+}

package/examples/tailwindcss/pages/about.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="mt-4 bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
+      <p class="font-bold">
+        Be Warned!
+      </p>
+      <p>This page has been {{ mode }}-side rendered!</p>
+    </div>
+    <button class="mt-4 bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue rounded" @click="$router.push('/')">
+      Back to home
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData: () => ({
+    mode: (process.server ? 'server' : 'client')
+  })
+}
+</script>

package/examples/tailwindcss/pages/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div class="max-w-sm mt-4 rounded overflow-hidden shadow-lg">
+      <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg">
+      <div class="px-6 py-4">
+        <div class="font-bold text-xl mb-2">
+          The Coldest Sunset
+        </div>
+        <p class="text-slate text-base">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
+        </p>
+      </div>
+      <div class="px-6 py-4">
+        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">
+          #photography
+        </span>
+        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">
+          #travel
+        </span>
+        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate">
+          #winter
+        </span>
+      </div>
+    </div>
+    <button class="bg-blue mt-4 hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" @click="$router.push('/about')">
+      About
+    </button>
+  </div>
+</template>

package/examples/tailwindcss/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss')('./tailwind.js'),
+    require('autoprefixer')
+  ]
+}