init and implement 09-nuxt-server-side-rendering

Author: daggerok

.editorconfig

@@ -7,3 +7,6 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -10,3 +10,7 @@ dist/
 *.njsproj
 *.sln
 *.lock
+.yarnclean
+
+# Nuxt build
+.nuxt

.travis.yml

@@ -25,7 +25,8 @@ before_script:
 script:
   - export ROOT=$PWD
   - >
-    for path in 08-vuex-map-getters-and-map-actions \
+    for path in 09-nuxt-server-side-rendering \
+                08-vuex-map-getters-and-map-actions \
                 07-vue-material \
                 06-materialize-css \
                 05-vuex-contact-list \

09-nuxt-server-side-rendering/.eslintrc.js

@@ -0,0 +1,21 @@
+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: {
+    'semi': 0,
+    'comma-dangle': 0,
+    'space-before-function-paren': 0,
+    'yoda': 0,
+  },
+  globals: {}
+};

09-nuxt-server-side-rendering/README.md

@@ -0,0 +1,36 @@
+# 09-nuxt-server-side-rendering
+
+## build run and deploy
+
+``` bash
+yarn dev
+yarn lint
+yarn build
+yarn start
+yarn genetrate
+yarn predeploy
+yarn deploy
+```
+
+**auto generated part**:
+
+> Nuxt.js server-side rendenring with Vue.js
+
+## 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).

09-nuxt-server-side-rendering/assets/README.md

@@ -0,0 +1,8 @@
+# ASSETS
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#webpacked
+
+**This directory is not required, you can delete it if you don't want to use it.**

09-nuxt-server-side-rendering/components/Links.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="links">
+    <nuxt-link to="/">
+      <div class="button--grey">Home</div>
+    </nuxt-link>
+    <nuxt-link to="/services">
+      <div class="button--grey">Services</div>
+    </nuxt-link>
+    <nuxt-link to="/about">
+      <div class="button--grey">About</div>
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'links',
+  };
+</script>
+
+<style scoped="">
+  ul {
+    display: inline;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    min-width: 60%;
+  }
+</style>

09-nuxt-server-side-rendering/components/Logo.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="VueToNuxtLogo">
+    <div class="Triangle Triangle--two"></div>
+    <div class="Triangle Triangle--one"></div>
+    <div class="Triangle Triangle--three"></div>
+    <div class="Triangle Triangle--four"></div>
+  </div>
+</template>
+
+<style>
+  .VueToNuxtLogo {
+    display: inline-block;
+    animation: turn 2s linear forwards 1s;
+    transform: rotateX(180deg);
+    position: relative;
+    overflow: hidden;
+    height: 180px;
+    width: 245px;
+  }
+
+  .Triangle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .Triangle--one {
+    border-left: 105px solid transparent;
+    border-right: 105px solid transparent;
+    border-bottom: 180px solid #41B883;
+  }
+
+  .Triangle--two {
+    top: 30px;
+    left: 35px;
+    animation: goright 0.5s linear forwards 3.5s;
+    border-left: 87.5px solid transparent;
+    border-right: 87.5px solid transparent;
+    border-bottom: 150px solid #3B8070;
+  }
+
+  .Triangle--three {
+    top: 60px;
+    left: 35px;
+    animation: goright 0.5s linear forwards 3.5s;
+    border-left: 70px solid transparent;
+    border-right: 70px solid transparent;
+    border-bottom: 120px solid #35495E;
+  }
+
+  .Triangle--four {
+    top: 120px;
+    left: 70px;
+    animation: godown 0.5s linear forwards 3s;
+    border-left: 35px solid transparent;
+    border-right: 35px solid transparent;
+    border-bottom: 60px solid #fff;
+  }
+
+  @keyframes turn {
+    100% {
+      transform: rotateX(0deg);
+    }
+  }
+
+  @keyframes godown {
+    100% {
+      top: 180px;
+    }
+  }
+
+  @keyframes goright {
+    100% {
+      left: 70px;
+    }
+  }
+</style>

09-nuxt-server-side-rendering/components/README.md

@@ -0,0 +1,6 @@
+# COMPONENTS
+
+The components directory contains your Vue.js Components.
+Nuxt.js doesn't supercharge these components.
+
+**This directory is not required, you can delete it if you don't want to use it.**

09-nuxt-server-side-rendering/layouts/README.md

@@ -0,0 +1,8 @@
+# LAYOUTS
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/views#layouts
+
+**This directory is not required, you can delete it if you don't want to use it.**