The document provides an overview of Nuxt.js, a progressive framework for Vue.js that enables server-side rendering and static site generation. It details the creation of a new Nuxt application, directory structure, routing, middleware, and context objects. Additionally, it explains how to define dynamic routes, utilize middleware for page tracking, and access both server-side and client-side context keys.

1. Server Side Rendering with
Nuxt.js

2. Jessie Barnett
Senior Engineer @ Axuall
https://jessie.codes
https://github.com/jessie-codes

3. Intro to Nuxt.js

4. What is Nuxt.js?
Nuxt.js is a progressive Vue.js framework.
Nuxt bundles Vue and Vuex into an opinionated framework
optimized for static site generation or server side rendering.
Nuxt is modular and highly configurable, lending itself to
multiple use cases.

5. Creating a new Nuxt App
npx create-nuxt-app <project name>
The wizard will ask you for:
● Project Name
● Project Description
● Author Name
● Package Manager
● UI Framework
● Server Framework
● Module Support (axios, PWA)
● Linting Tools
● Test Framework
● Rendering Mode (SPA or
Universal[SSR])
● Development Tools

6. Folder Structure
● /assets - contains your un-compiled assets such as Stylus or Sass files, images, or fonts.
● /components - contains your Vue.js Components. You can't use either asyncData or fetch in these components
● /layouts - includes your application layouts. Layouts are used to change the look and feel of your page (for example by
including a sidebar).
● /middleware - contains your Application Middleware. Middleware lets you define custom functions that can be run
before rendering either a page or a group of pages (layouts).
● /pages - contains your Application Views and Routes. The framework reads all the .vue files inside this directory and
creates the application router.
● /plugins - contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. This is the
place to register components globally and to inject functions or constants.
● /server - directory contains server logic. This directory is only generated if you choose a server framework.
● /static - directory is directly mapped to the server root (/static/robots.txt is accessible under
http://localhost:3000/robots.txt) and contains files that likely won't be changed (e.g. the favicon)
● /store - contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default.
Creating an index.js file in this directory enables the store.

7. Routing

8. Automatic Routes
Nuxt automatically generates vue-router configuration based on your file tree of Vue
files inside of the pages folder.
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}

9. Dynamic Routes
To define a dynamic route with a parameter, you need to define a .vue file or a folder
prefixed by an underscore.
pages/
--| user/
-----| _id.vue
--| _book/
-----| review.vue
--| author/
-----| _id.vue
-----| index.vue
/user/:id?
/:book/review
/author
/author/:id

10. Dynamic Routes - Static Generation
Nuxt will not automatically create pages for dynamic routes when generating static
websites. Routes can be configured via the generate property in the nuxt
configuration. In the case that pages are based off of dynamic data, you can use a
function that returns a promise instead.
export default {
generate: {
routes: [
'/users/1',
'/users/2',
'/users/3'
]
}
}

11. Middleware

12. Middleware
Middleware lets you define custom functions that can be run before rendering.
Can be set either for a group of pages, or a single page.
Middleware functions receive the context object as an argument.
Each middleware function should be in its own file in the middleware folder - the
name of the file will be used in the config.
router: {
middleware: 'stats'
}

13. Middleware - Track Page Views
export default function ({ route }) {
return axios.post('http://my-stats-api.com', {
url: route.fullPath
})
}

14. Context

15. Context Object - Universal Keys (Part One)
● app - The root Vue instance options that includes all your plugins. For example, when using i18n, you can get access to
$i18n through context.app.i18n.
● store - Vuex Store instance. Available only if the vuex store is set.
● route - Vue Router route instance.
● params - Alias of route.params.
● query - Alias of route.query.
● env - Environment variables set in nuxt.config.js.
● isDev - Boolean to let you know if you're in dev mode, can be useful for caching some data in production.

16. Context Object - Universal Keys (Part Two)
● isHMR - Boolean to let you know if the method/middleware is called from webpack hot module replacement (true only on
client-side in dev mode).
● redirect - Use this method to redirect the user to another route, the status code is used on the server-side, defaults to 302.
redirect([status,] path [, query]).
● Error - Use this method to show the error page: error(params). The params should have the properties statusCode and
message.

17. Context Object - Server Side Keys
● req - Request from the Node.js server. If Nuxt is used as a middleware, the request object might be different depending on
the framework you're using. Not available via nuxt generate.
● res - Response from the Node.js server. If Nuxt is used as a middleware, the res object might be different depending on the
framework you're using. Not available via nuxt generate.
● beforeNuxtRender - Use this method to update __NUXT__ variable rendered on client-side, the fn (can be
asynchronous) is called with { Components, nuxtState }.

18. Client Side Keys
● from - The route navigated from.
● nuxtState - Nuxt state, useful for plugins which uses beforeNuxtRender to get the nuxt state on client-side before
hydration. Available only in universal mode.

19. Using Client/Server Keys
if (process.server) {
//code here will only run on the server
}
if (process.client) {
//code here will only on in the browser
}

20. Views

21. Nuxt View Hooks
Nuxt has additional hooks on components that have been designated as views (by
being located in the pages folder).
● asyncData - is called every time before loading the page component and is only available for such. It will be called
server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. This method receives
the context object as the first argument, you can use it to fetch some data and return the component data.
● fetch - if set, is called every time before loading the component (only for page components). It will be called server-side
once (on the first request to the Nuxt app) and client-side when navigating to further routes. As opposed to the asyncData, it is
used populate the Vuex store instead of component data.
● head - sets the HTML Head tags for the current page. This method is also available in layout components.