Run npx create-nuxt-app <project-name>
assets - un-compiled assets such as Stylus or Sass files, images, or fontscomponents - Vue.js Components. You can't use either asyncData or fetch in these components.layouts - application layouts that are used to change the look and feel of your page (for example by including a sidebar or having distinct layouts for mobile and desktop). This directory cannot be renamed without extra configuration.middleware - middleware letting you define custom functions that can be run before rendering either a page or a group of pages (layouts). The filename will be the name of the middleware (middleware/auth.js will be the auth middleware).pages - Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router. This directory cannot be renamed without extra configuration.plugins - 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.static - The 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 (i.e. the favicon). This directory cannot be renamed without extra configuration./static/robots.txt is mapped as /robots.txtstore - The store directory 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. This directory cannot be renamed without extra configuration.nuxt.config.js - The nuxt.config.js file contains your Nuxt.js custom configuration. This file cannot be renamed without extra configuration.package.json - The package.json file contains your Application dependencies and scripts. This file can not be renamed.~ or @ is srcDir~~ or @@ is rootDir@nuxtjs/axios ModuleInstead of importing axios everywhere, the module provides you a convenient interface on,
the client-side (this.$axios in Vue components),
in the Nuxt context (ctx.$axios) that is available in functions like asyncData and fetch, and
in the Vuex store (this.$axios again but not in arrow functions!).
The main features include:
set up default headers,
a baseURL depending on your environment,
a shorthand function for all HTTP verbs (eg. $get) which lets you omit the nested data key and delivers the response object on the top level.
If necessary you can tweak your axios instance even more.
The two types of error pages are,
| Client side error pages | Server side error pages | |
|---|---|---|
| How it happens | app is loaded in browser, and the user clicks on a link that can't be rendered | user directly visits a link that can't be rendered |
| Location of rendering | Browser | Server |
Add ~/layout/error.vue
The error page is a page component which is always displayed when an error occurs (that does not happen while server-side rendering). Though this file is placed in the layouts folder, it should be treated as a page. this layout is special, since you should not include
Nuxt.js adds the error(params) method in the context, which you can call to display the error page. i.e.
error({ statusCode: 404, message: 'Post not found' })
~/app/views/error.html to the projectErrors on the server take the most precedence over anything else. Not that they are more important, but they stop the execution of the Nuxt application. If you app encounters an unhandled exception, and you do not handle it, then it is going to stop. As a last resort, Nuxt can throw the Nuxt Server Error page. By this point, your Nuxt app has stopped executing. It has a static page it will return to the browser as part of the Express request. There is no Nuxt magic at this point either so you cannot call for other resources or reference your Store or the error that caused this in the first place.
NuxtJS doesn't handle errors for you, but it allows you to handle known errors either on server side or client side and allows you to redirect to a page error.vue using the error method avaiable on the context object.
The nuxtjs.org website itself is a NuxtJS project and its source code can be found here. Some conventions that I have observed and are following are:
pages foldercomponents folder but use PascalCase for all component names