first

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    node: true
+  },
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  rules: {},
+  globals: {}
+}

.gitignore

@@ -0,0 +1,11 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist

README.md

@@ -0,0 +1,22 @@
+# starter
+
+> Nuxt.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm install # Or yarn install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).

assets/css/main.css

@@ -0,0 +1,35 @@
+html, body
+{
+  background-color: #fff;
+  color: #2e2f30;
+  letter-spacing: 0.5px;
+  font-family: "Source Sans Pro", Arial, sans-serif;
+  height: 100vh;
+  margin: 0;
+}
+
+footer
+{
+  padding: 20px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+}
+
+a, a:hover, a:focus, a:visited
+{
+  color: #41B883;
+}
+
+.logo {
+  width: 243px;
+  height: 218px;
+}
+
+.page-enter-active, .page-leave-active
+{
+  transition: opacity .5s
+}
+.page-enter, .page-leave-active
+{
+  opacity: 0
+}

components/Footer.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer>
+    Visit our website for more documentation : <a href="https://nuxtjs.org" target="_blank">nuxtjs.org</a>
+  </footer>
+</template>

layouts/default.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <nuxt/>
+    <my-footer/>
+  </div>
+</template>
+
+<script>
+import MyFooter from '~components/Footer.vue'
+
+export default {
+  components: {
+    MyFooter
+  }
+}
+</script>
+
+<style>
+.container
+{
+  margin: 0;
+  width: 100%;
+  padding: 100px 0;
+  text-align: center;
+}
+
+.button, .button:visited
+{
+  display: inline-block;
+  color: #3B8070;
+  letter-spacing: 1px;
+  background-color: #fff;
+  border: 2px solid #3B8070;
+  text-decoration: none;
+  text-transform: uppercase;
+  padding: 15px 45px;
+}
+
+.button:hover, .button:focus
+{
+  color: #fff;
+  background-color: #3B8070;
+}
+
+.title
+{
+  color: #505153;
+  font-weight: 300;
+  font-size: 2.5em;
+  margin: 0;
+}
+</style>

layouts/error.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="container">
+    <img src="../assets/img/logo.png" alt="Nuxt.js Logo" />
+    <h1 class="title">
+      {{ error.statusCode }}
+    </h1>
+    <h2 class="info">
+      {{ error.message }}
+    </h2>
+    <nuxt-link class="button" to="/" v-if="error.statusCode === 404">
+      Homepage
+    </nuxt-link>
+  </section>
+</template>
+<script>
+export default {
+  props: ['error']
+}
+</script>
+
+<style scoped>
+.title
+{
+  margin-top: 15px;
+  font-size: 5em;
+}
+.info
+{
+  font-weight: 300;
+  color: #9aabb1;
+  margin: 0;
+}
+.button
+{
+  margin-top: 50px;
+}
+</style>

nuxt.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: 'starter',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }
+    ]
+  },
+  /*
+  ** Global CSS
+  */
+  css: ['~assets/css/main.css'],
+  /*
+  ** Customize the progress-bar color
+  */
+  loading: { color: '#3B8070' }
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "starter",
+  "version": "1.0.0",
+  "description": "Nuxt.js project",
+  "author": "Brian 'bdougie' Douglas <[email protected]>",
+  "private": true,
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "precommit": "npm run lint"
+  },
+  "devDependencies": {
+    "babel-eslint": "^7.1.1",
+    "eslint": "^3.15.0",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-promise": "^3.4.1",
+    "eslint-plugin-standard": "^2.0.1"
+  }
+}

pages/about.vue

@@ -0,0 +1,46 @@
+<template>
+  <section class="container">
+    <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
+    <h1 class="title">
+      This page is loaded from the {{ name }}
+    </h1>
+    <h2 class="info" v-if="name === 'client'">
+      Please refresh the page
+    </h2>
+    <nuxt-link class="button" to="/">
+      Home page
+    </nuxt-link>
+  </section>
+</template>
+<script>
+export default {
+  data ({ req }) {
+    return {
+      name: req ? 'server' : 'client'
+    }
+  },
+  head () {
+    return {
+      title: `About Page (${this.name}-side)`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title
+{
+  margin-top: 50px;
+}
+.info
+{
+  font-weight: 300;
+  color: #9aabb1;
+  margin: 0;
+  margin-top: 10px;
+}
+.button
+{
+  margin-top: 50px;
+}
+</style>

pages/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <section class="container">
+    <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
+    <h1 class="title">
+      Universal Vue.js Application Framework
+    </h1>
+    <nuxt-link class="button" to="/about">
+      About page
+    </nuxt-link>
+  </section>
+</template>
+
+<style scoped>
+.title
+{
+  margin: 50px 0;
+}
+</style>