OnlyKiosk Dev Tech
Oct 17, 2018 · 28 min read
What Nuxt.js is made of
Vue.js Lifecycle
Nuxt.js Schema

AsyncData does NOT have THIS because it is called after the validate method but before Vue rendering.

This means by the time the asyncData method is called, the vue component has not been created yet. As a result, this in asyncData will not get you the component instance. The Nuxt manual has also emphasized this.

The most important about the asyncData method is that the result it returns will be automatically merged with vue data.

This has solved the problem of this not pointing to component instance. Properties returned by the asyncData method can be directly displayed in template.

  1. asyncData is called before Vue rendering, therefore, it has NOT this.
  2. asyncData receives CONTEXT as its argument. Context gives asyncData access to context.params, context.query, and context.error()
  3. The result asyncData returns will be AUTOMATICALLY MERGED with Vue data. This means property defined in asyncData can be displayed in template directly. This is a great feature!
Home Page and Detail Page
Error Page

So what is the command we need?

How to change port?

NPM install axios and iView

How to configure plugins?

What does vendor do?

Preventing the same package from being repeatedly bundled.

How to deal with iView’s config file?

Two steps:
1. create a JS file in the plugins directory. This JS file will store the config codes of iView.

The Header

Summary of the Homepage’s HTML and CSS settings

  1. The homepage is made of three parts: header, footer and main body.
  2. Header and footer are located via fixed position which will take them out of flow. As a result, in-flow elements will be displayed under the header and footer.
  3. To solve this problem, we give the main DIV a top and bottom padding. All page elements should be placed in the main DIV.

What is the best way to reuse header and footer?

Turning them into components. Component files should be stored in the components directory.

  1. declare the component
  2. install the component

Use Layout!!!

We import header and footer into layouts/default.vue.

Try VueX in Nuxt

Nuxt comes with VueX installed. But we need to create the VueX config file.

Three things you should remember about Nuxt VueX config file

  1. Store VueX config file in the store directory.
  2. In Nuxt VueX config file, the vue.use() is optional.
  3. In Nuxt VueX config file, you put new vuex.Store(config) in an anonymous function and return it. Then you export default the anonymous function.

What are the two options?

The fetch method installed in components and the nuxtServerInit method installed in VueX action. They both have context as argument value. gives them access to VueX.

A little summary on context

Middleware functions, fetch() and nuxtServerInit will all receive context as their argument value. Context can give us full access to the entire Nuxt program. It solves problems caused by the absence of THIS.

Work on the detail page

Every time we click a car, we want to to directed to the detail page where details of the clicked car will be displayed.

How to Create Universal CSS?

Transition Effects:

Universal CSS has laid the foundation for creating transition effects.

The head() Method

The head() method allows us to set contents inside the head tag. It is Nuxt’s API for vue meta.


The argument value of the validate is {params, query, store}. It gives validate access to data stored in URL and VueX. Its argument value is very similar to context, but it is NOT context. Validate() has NO access to the error method.

Custom error page and how to trigger it

In the layouts directory, we create a new file: error.vue.

Do you still remember how to define and install middlewares?

In the middleware directory, you define a JS file.

How to install a middleware?

You can install a middleware globally or locally.

(To be edited and improved…)

The End.

If you like this article, please applaud ^_^ and click the link below to check out our Nuxt course.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade