├── .editorconfig ├── .gitignore ├── README.md ├── assets ├── README.md └── style.css ├── components ├── Logo.vue ├── README.md └── TheNavbar.vue ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package.json ├── pages ├── README.md ├── index.vue └── posts │ └── _id.vue ├── plugins ├── README.md └── axios.js ├── static ├── README.md └── favicon.ico ├── store ├── README.md ├── index.js └── posts.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE 81 | .idea 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Async Data with Nuxt.js 2 | 3 | [![](https://vueschool.s3.amazonaws.com/d45176c7b195ea2779b8624ba50e78b6/async-data-with-nuxtjs.png)](https://vueschool.io/courses/async-data-with-nuxtjs) 4 | 5 | This repository contains the example code for the [Async Data with Nuxt.js](https://vueschool.io/courses/async-data-with-nuxtjs) course. 6 | 7 | 8 | It can be difficult and cumbersome to set up a custom system to fetch asynchronous data before you serve your application to your users and render everything on the server-side. Since JavaScript was designed to mainly run client-side, it comes with a few unwanted traits. 9 | 10 | Nuxt.js has made it breathtakingly easy to fetch asynchronous data and render our entire application on the server-side before we serve it to our users. In this course, you will learn a few different methods to fetch asynchronous data and what to be careful with. Secondly, you'll learn how to fetch asynchronous data and render your Nuxt applications server-side. 11 | 12 | **Server-side rendering brings invaluable performance and SEO benefits.** 13 | 14 | Even though it is impressively smooth to fetch and render async data server-side with Nuxt.js, you need to know the basics of Nuxt. If you do not, we recommend our [Nuxt.js Fundamanetals](https://vueschool.io/courses/nuxtjs-fundamentals) course. 15 | 16 | After this course, you will be familiar with: 17 | - How to best fetch asynchronous data according to your applications needs 18 | - The caveats of the `fetch` method when it comes to server-side rendering 19 | - The benefits of using Nuxt modules 20 | - How to extend the Nuxt.js framework with plugins 21 | - Fetching async data and render your Vuex store server-side 22 | - Impressed with how easy it is to squeeze out extra performance and SEO of your JavaScript applications with Nuxt.js 23 | 24 | This course is made **together** with Nuxt.js core member **Alexander Lichter**. 25 | 26 | [Click here to watch the course](https://vueschool.io/courses/async-data-with-nuxtjs) 27 | 28 | 29 | --- 30 | 31 | ## Build Setup 32 | 33 | ``` bash 34 | # install dependencies 35 | $ yarn install 36 | 37 | # serve with hot reload at localhost:3000 38 | $ yarn run dev 39 | 40 | # build for production and launch server 41 | $ yarn run build 42 | $ yarn start 43 | 44 | # generate static project 45 | $ yarn run generate 46 | ``` 47 | 48 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 49 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --navy: #112F41; 3 | --teal: #068587; 4 | --teal-light: #4FB99F; 5 | --yellow: #F2B134; 6 | --main-bg-color: coral; 7 | } 8 | 9 | html { 10 | font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 11 | Roboto, 'Helvetica Neue', Arial, sans-serif; 12 | word-spacing: 1px; 13 | -ms-text-size-adjust: 100%; 14 | -webkit-text-size-adjust: 100%; 15 | -moz-osx-font-smoothing: grayscale; 16 | -webkit-font-smoothing: antialiased; 17 | box-sizing: border-box; 18 | } 19 | 20 | *, 21 | *:before, 22 | *:after { 23 | box-sizing: border-box; 24 | margin: 0; 25 | } 26 | 27 | 28 | body { 29 | padding: 1rem; 30 | background: var(--navy); 31 | color: white; 32 | } 33 | 34 | a { 35 | color: var(--teal-light); 36 | text-decoration: none; 37 | transition: all 0.3s ease; 38 | } 39 | 40 | a:hover { 41 | color: var(--teal); 42 | } 43 | 44 | .container { 45 | margin: 0 auto; 46 | max-width: 900px; 47 | } 48 | 49 | .text-xs { 50 | font-size: 1.2rem; 51 | } 52 | .text-sm { 53 | font-size: 1.4rem; 54 | } 55 | 56 | .text-base { 57 | font-size: 1.6rem; 58 | } 59 | 60 | .text-lg { 61 | font-size: 1.8rem; 62 | } 63 | 64 | .text-xl { 65 | font-size: 2rem; 66 | } 67 | 68 | h1,h2,h3,h4 { 69 | color: var(--yellow); 70 | } 71 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/TheNavbar.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 | 50 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | 47 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package') 2 | 3 | module.exports = { 4 | mode: 'universal', 5 | 6 | generate: { 7 | routes: [ 8 | '/posts/balut', 9 | '/posts/whereIsIt', 10 | '/posts/how' 11 | ] 12 | }, 13 | 14 | /* 15 | ** Headers of the page 16 | */ 17 | head: { 18 | title: pkg.name, 19 | meta: [ 20 | { charset: 'utf-8' }, 21 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 22 | { hid: 'description', name: 'description', content: pkg.description } 23 | ], 24 | link: [ 25 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 26 | ] 27 | }, 28 | 29 | /* 30 | ** Customize the progress-bar color 31 | */ 32 | loading: { color: '#fff' }, 33 | 34 | /* 35 | ** Global CSS 36 | */ 37 | css: [ 38 | '~/assets/style.css' 39 | ], 40 | 41 | /* 42 | ** Plugins to load before mounting the App 43 | */ 44 | plugins: [ 45 | '~/plugins/axios' 46 | ], 47 | 48 | /* 49 | ** Nuxt.js modules 50 | */ 51 | modules: [ 52 | '@nuxtjs/axios' 53 | ], 54 | 55 | /* 56 | ** axios configuration 57 | */ 58 | axios: { 59 | baseURL: 'https://jsonplaceholder.typicode.com' 60 | }, 61 | 62 | /* 63 | ** Build configuration 64 | */ 65 | build: { 66 | /* 67 | ** You can extend webpack config here 68 | */ 69 | extend(config, ctx) { 70 | 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-fundamentals", 3 | "version": "1.0.0", 4 | "description": "My gnarly Nuxt.js project", 5 | "author": "Alex Kyriakidis", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "heroku-postbuild": "npm run build" 13 | }, 14 | "dependencies": { 15 | "@nuxtjs/axios": "^5.3.6", 16 | "axios": "^0.18.0", 17 | "cross-env": "^5.2.0", 18 | "nuxt": "^2.0.0" 19 | }, 20 | "devDependencies": { 21 | "nodemon": "^1.11.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /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 create the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 54 | 55 | 83 | -------------------------------------------------------------------------------- /pages/posts/_id.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 38 | 39 | 57 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/axios.js: -------------------------------------------------------------------------------- 1 | export default function ({$axios}) { 2 | $axios.setHeader('AUTHORISATION', 'Bearer ln123ncoimokmsdfoi') 3 | $axios.onRequest(config => { 4 | console.log('Making request to ' + config.url) 5 | }) 6 | } 7 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vueschool/nuxt-async-data/69959f9c64c9f31f193e08b02c4b89f4b72f690f/static/favicon.ico -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory activate the option in the framework automatically. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | 3 | }) 4 | export const getters = {} 5 | -------------------------------------------------------------------------------- /store/posts.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | all: [] 3 | }) 4 | 5 | export const actions = { 6 | async fetchAllPosts ({commit}) { 7 | let posts = await this.$axios.$get('posts') 8 | commit('setPosts', posts) 9 | }, 10 | 11 | async fetchPost ({commit}, id) { 12 | let post = await this.$axios.$get(`posts/${id}`) 13 | commit('setPost', post) 14 | } 15 | } 16 | 17 | export const mutations = { 18 | setPost (state, post) { 19 | state.all.push(post) 20 | }, 21 | setPosts (state, posts) { 22 | state.all = posts 23 | } 24 | } 25 | --------------------------------------------------------------------------------