├── .eslintrc.js
├── .gitignore
├── README.md
├── components
    ├── AppLogo.vue
    ├── Posts.vue
    └── README.md
├── layouts
    ├── README.md
    └── default.vue
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    ├── about.vue
    ├── index.vue
    └── post
    │   └── _id
    │       └── index.vue
└── posts.json


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential'
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt.js: A Universal Vue.js Application Framework
 2 | 
 3 | Improve the loading performance and SEO of your Vue.js apps with Server-side rendering (SSR). Learn to build a universal Vue app with the Nuxt.js framework.
 4 | 
 5 | Article on SitePoint: https://www.sitepoint.com/nuxt-js-universal-vue-js/
 6 | 
 7 | You can see the demo app here: https://nuxt-ssr-blog.firebaseapp.com/
 8 | 
 9 | ## Requirements
10 | 
11 | * [Node.js](http://nodejs.org/)
12 | 
13 | ## Installation Steps (if applicable)
14 | 
15 | 1. Clone repo
16 | 2. Run `npm install`
17 | 3. Run `npm run dev` to serve with hot reload at http://localhost:3000
18 | 4. Run `npm run build` then `npm start` to build for production and launch server
19 | 5. Run `npm run generate` to generate the static project
20 | 
21 | ## License
22 | 
23 | SitePoint's code archives and code examples are licensed under the MIT license.
24 | 
25 | Copyright © 2017 SitePoint
26 | 
27 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
28 | 
29 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
30 | 
31 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
32 | 
33 | 


--------------------------------------------------------------------------------
/components/AppLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two"/>
 4 |     <div class="Triangle Triangle--one"/>
 5 |     <div class="Triangle Triangle--three"/>
 6 |     <div class="Triangle Triangle--four"/>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41B883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3B8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495E;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 
81 | 


--------------------------------------------------------------------------------
/components/Posts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="main-content">
 3 |     <div class="container">
 4 |       <h1 class="title has-text-centered">
 5 |         Recent Posts.
 6 |       </h1>
 7 |       <div class="columns is-multiline">
 8 |         <div class="column is-half" v-for="post in posts" :key="post.id">
 9 |           <div class="card">
10 |            <header class="card-header">
11 |             <p class="card-header-title">
12 |               {{ post.title }}
13 |             </p>
14 |           </header>
15 |           <div class="card-content">
16 |             <div class="content">
17 |               {{ post.summary }}
18 |               <br>
19 |               <small>
20 |                 by <strong>{{ post.author}}</strong>
21 |                 \\ {{ post.published }}
22 |               </small>
23 |             </div>
24 |           </div>
25 |           <footer class="card-footer">
26 |             <nuxt-link :to="`/post/${post.id}`"
27 |               class="card-footer-item">
28 |               Read More
29 |             </nuxt-link>
30 |           </footer>
31 |         </div>
32 |       </div>
33 |     </div>
34 |   </div>
35 | </section>
36 | </template>
37 | 
38 | <script>
39 |   import posts from '~/posts.json'
40 | 
41 |   export default {
42 |     name: 'posts',
43 |     data () {
44 |       return { posts }
45 |     }
46 |   }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | The components directory contains your Vue.js Components.
4 | Nuxt.js doesn't supercharge these components.
5 | 
6 | **This directory is not required, you can delete it if you don't want to use it.**
7 | 
8 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
 1 | # LAYOUTS
 2 | 
 3 | This directory contains your Application Layouts.
 4 | 
 5 | More information about the usage of this directory in the documentation:
 6 | https://nuxtjs.org/guide/views#layouts
 7 | 
 8 | **This directory is not required, you can delete it if you don't want to use it.**
 9 | 
10 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- navigation -->
 4 |     <nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
 5 |       <div class="container">
 6 |         <div class="navbar-start">
 7 |           <nuxt-link to="/" class="navbar-item">
 8 |             Awesome JS SSR Blog!
 9 |           </nuxt-link>
10 |           <nuxt-link active-class="is-active" to="/" class="navbar-item is-tab" exact>Home</nuxt-link>
11 |           <nuxt-link active-class="is-active" to="/about" class="navbar-item is-tab" exact>About</nuxt-link>
12 |         </div>
13 |       </div>
14 |     </nav>
15 |     <!-- /navigation -->
16 | 
17 |     <!-- displays the page component -->
18 |     <nuxt/>
19 |   </div>
20 | </template>
21 | 
22 | <style>
23 |   .main-content {
24 |     margin: 30px 0;
25 |   }
26 | </style>
27 | 
28 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'ssr-blog',
 7 |     titleTemplate: '%s | Awesome JS SSR Blog',
 8 |     meta: [
 9 |       { charset: 'utf-8' },
10 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
11 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
12 |     ],
13 |     link: [
14 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
15 |       {
16 |         rel: 'stylesheet',
17 |         href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'
18 |       }
19 |     ]
20 |   },
21 |   /*
22 |   ** Customize the progress bar color
23 |   */
24 |   loading: { color: '#3B8070' },
25 |   /*
26 |   ** Build configuration
27 |   */
28 |   build: {
29 |     /*
30 |     ** Run ESLint on save
31 |     */
32 |     extend (config, { isDev, isClient }) {
33 |       if (isDev && isClient) {
34 |         config.module.rules.push({
35 |           enforce: 'pre',
36 |           test: /\.(js|vue)$/,
37 |           loader: 'eslint-loader',
38 |           exclude: /(node_modules)/
39 |         })
40 |       }
41 |     }
42 |   },
43 |   generate: {
44 |     routes(callback) {
45 |       const posts = require('./posts.json')
46 |       let routes = posts.map(post => `/post/${post.id}`)
47 |       callback(null, routes)
48 |     }
49 |   }
50 | }
51 | 
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ssr-blog",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "James Hibbard <1940994+jameshibbard@users.noreply.github.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint"
14 |   },
15 |   "dependencies": {
16 |     "nuxt": "^2.0.0"
17 |   },
18 |   "devDependencies": {
19 |     "babel-eslint": "^10.0.1",
20 |     "eslint": "^4.19.1",
21 |     "eslint-friendly-formatter": "^4.0.1",
22 |     "eslint-loader": "^2.1.1",
23 |     "eslint-plugin-vue": "^4.0.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the .vue files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 
9 | 


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main-content">
 3 |     <div class="container">
 4 |       <h2 class="title is-2">About this website.</h2>
 5 |       <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
 6 |       <br>
 7 |       <h4 class="title is-4">What we hope to achieve:</h4>
 8 |       <ul>
 9 |         <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
10 |         <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
11 |         <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
12 |         <li>Ut non enim metus.</li>
13 |       </ul>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   head: {
21 |     title: 'About'
22 |   }
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <section class="hero is-medium is-primary is-bold">
 4 |       <div class="hero-body">
 5 |         <div class="container">
 6 |           <h1 class="title">
 7 |             Welcome to the JavaScript SSR Blog.
 8 |           </h1>
 9 |           <h2 class="subtitle">
10 |             Hope you find something you like.
11 |           </h2>
12 |         </div>
13 |       </div>
14 |     </section>
15 | 
16 |     <posts />
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 |   import Posts from '~/components/Posts.vue'
22 | 
23 |   export default {
24 |     components: {
25 |       Posts
26 |     },
27 |     head: {
28 |       title: 'Home'
29 |     }
30 |   }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/pages/post/_id/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main-content">
 3 |     <div class="container">
 4 |       <h2 class="title is-2">{{ post.title }}</h2>
 5 |       <div v-html="post.content"></div>
 6 |       <br>
 7 |       <h4 class="title is-5 is-marginless">by <strong>{{ post.author }}</strong> at <strong>{{ post.published }}</strong></h4>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   // import posts saved JSON data
14 |   import posts from '~/posts.json'
15 | 
16 |   export default {
17 |     validate ({ params }) {
18 |       return /^\d+$/.test(params.id)
19 |     },
20 |     asyncData ({ params }, callback) {
21 |       let post = posts.find(post => post.id === parseInt(params.id))
22 |       if (post) {
23 |         callback(null, { post })
24 |       } else {
25 |         callback({ statusCode: 404, message: 'Post not found' })
26 |       }
27 |     },
28 |     head () {
29 |       return {
30 |         title: this.post.title,
31 |         meta: [
32 |           {
33 |             hid: 'description',
34 |             name: 'description',
35 |             content: this.post.summary
36 |           }
37 |         ]
38 |       }
39 |     }
40 |   }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/posts.json:
--------------------------------------------------------------------------------
 1 | [
 2 | 	{
 3 | 		"id": 4,
 4 | 		"title": "Building universal JS apps with Nuxt.js",
 5 | 		"summary": "Get introduced to Nuxt.js, and build great SSR Apps with Vue.js.",
 6 | 		"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
 7 | 		"author": "Jane Doe",
 8 | 		"published": "08:00 - 07/06/2017"
 9 | 	},
10 | 	{
11 | 		"id": 3,
12 | 		"title": "Great SSR Use cases",
13 | 		"summary": "See simple and rich server rendered JavaScript apps.",
14 | 		"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
15 | 		"author": "Jane Doe",
16 | 		"published": "17:00 - 06/06/2017"
17 | 	},
18 | 	{
19 | 		"id": 2,
20 | 		"title": "SSR in Vue.js",
21 | 		"summary": "Learn about SSR in Vue.js, and where Nuxt.js can make it all faster.",
22 | 		"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
23 | 		"author": "Jane Doe",
24 | 		"published": "13:00 - 06/06/2017"
25 | 	},
26 | 	{
27 | 		"id": 1,
28 | 		"title": "Introduction to SSR",
29 | 		"summary": "Learn about SSR in JavaScript and how it can be super cool.",
30 | 		"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
31 | 		"author": "John Doe",
32 | 		"published": "11:00 - 06/06/2017"
33 | 	}
34 | ]
35 | 


--------------------------------------------------------------------------------