This document provides an overview of the key concepts and directory structure in Nuxt. It discusses views and pages, context and helpers, Nuxt's rendering lifecycle, and rendering modes including server-side rendering, static site generation, and client-side rendering. It also outlines the main directories for components, content, layouts, modules, plugins, static files, and the store.

1. Table of contents
Get started - Installation 5
Get started - Routing 9
Get started - Directory structure 11
Get started - Commands 13
Get started - Conclusion 16
Get started - Upgrading 17
Concepts - Views 18
Concepts - Context helpers 22
Concepts - Server side rendering 27
Concepts - Static site generation 29
Concepts - Nuxt lifecycle 30
Features - Rendering modes 35
Features - Transitions 36
Features - Live preview 40
Features - Deployment targets 42
Features - File system routing 44
Features - Data fetching 52
Features - Meta tags seo 58
Features - Configuration 61
Features - Loading 70
Features - Nuxt components 74
Features - Component discovery 81
Directory structure - Nuxt 84
Directory structure - Plugins 86
Directory structure - Static 93
Directory structure - Store 95
Directory structure - Nuxt config 100
Directory structure - Assets 107
Directory structure - Components 112
Directory structure - Content 115
Directory structure - Dist 122
Directory structure - Layouts 124
Directory structure - Middleware 126
Directory structure - Modules 128
nuxt
2

2. Views
The Views section describes all you need to know to configure data and views for a specific route in your
Nuxt Application. Views consist of an app template, a layout, and the actual page.
Composition of a View in Nuxt
Composition of a View in Nuxt
Pages
Every Page component is a Vue component but Nuxt adds special attributes and functions to make the de-
velopment of your application as easy as possible.
Properties of a page component
There are many properties of the page component such as the head property in the example above.
<template>
<h1 class="red">Hello World</h1>
</template>
<script>
export default {
head() {
// Set Meta Tags for this Page
}
// ...
}
</script>
<style>
.red {
color: red;
}
</style>
nuxt
18

3. Context and helpers
The context provides additional and often optional information about the current request to the application.
The context object is available in specific Nuxt functions like asyncData, plugins, middleware and nuxt-
ServerInit. It provides additional and often optional information about the current request to the
application.
First and foremost, the context is used to provide access to other parts of the Nuxt application, e.g. the
Vuex store or the underlying connect instance. Thus, we have the req and res objects in the context
available on the server side and store always available. But with time, the context was extended with
many other helpful variables and shortcuts. Now we have access to HMR (Hot Module Reload / Replace-
ment) functionalities in development mode, the current route , page params and query , as well as the
option to access environment variables through the context. Furthermore, module functions and helpers can
be exposed through the context to be available on both - the client and the server side.
All context keys that are present by default
nuxt
22

4. Nuxt Lifecycle
31

5. Rendering
Server Side Rendered Sites and Static Sites
Server-side rendered sites are rendered on the server each time the user requests a page, therefore a
server is needed to be able to serve the page on each request.
Static sites are very similar to server-side rendered applications with the main difference being that static
sites are rendered at build time, therefore no server is needed. Navigating from one page to another is then
on the client-side.
See deployment targets for more info on static and server hosting.
Info
You do not need to add ssr: true to your nuxt config in order to enable server-side-rendering as it is en-
abled by default.
Client Side Rendering Only
With client side rendering only there is no server-side rendering. Client side rendering means rendering the
content in the browser using JavaScript. Instead of getting all of the content from the HTML we just get a
basic HTML document with a JavaScript file that will then render the rest of the site using the browser. For
client side rendering set ssr to false .
Next
The ssr property
export default {
ssr: true // default value
}
export default {
ssr: false
}
Rendering
35