This is the 19th day of my participation in the Genwen Challenge.

What is Nuxt. Js

Nuxt.js is a general application framework based on vue.js.

By abstracting the organization of the client/server infrastructure, Nuxt.js focuses on the UI rendering of the application.

How does the Nuxt.js framework work?

Nuxt.js integrates the following components/frameworks for developing complete and powerful Web applications:

  • Vue 2
  • Vue-Router
  • Vuex (introduced only when the Vuex state tree configuration item is configured)
  • Vue server-side rendering (excluding mode: ‘spa’)
  • Vue-Meta

When compressed and gzip, the total code size is 57KB (60KB if Vuex is used).

In addition, Nuxt.js uses Webpack along with vue-Loader and Babel-Loader to handle automated build work of code (such as packaging, code layering, compression, and so on).

features

  • Based on the Vue. Js
  • Automatic code layering
  • Server side rendering
  • Powerful routing function, support asynchronous data
  • Static file service
  • Es6 syntax support
  • Support for HTTP /2 push
  • .

The directory structure

- | - static/static file directory, the server startup, the application of the files in the directory will be mapped to the root path / | - assets/resources directory assets used to organize not compile static resources such as LESS, SASS, or JavaScript. | | - layouts/layout - middleware/middleware | - plugins directory / | - components/components, No page components asyncData method features. | | - pages/page directory - nuxt config. Js configuration file | - app. HTML templatesCopy the code

routing

<template>
    <nuxt-link to="/">Home page</nuxt-link>
</template>
Copy the code


home

Based on the routing

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
Copy the code

Automatically generated routes are configured as follows:

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'}}]Copy the code

Dynamic routing

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
Copy the code

Route configuration:

router: {
  routes: [{name: 'index'.path: '/'.component: 'pages/index.vue'
    },
    {
      name: 'users-id'.path: '/users/:id? '.component: 'pages/users/_id.vue'
    },
    {
      name: 'slug'.path: '/:slug'.component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments'.path: '/:slug/comments'.component: 'pages/_slug/comments.vue'}}]Copy the code

view

The template

To customize the default HTML template, simply create an app.html file in the SRC folder (the app root by default)

Default template:

<! DOCTYPEhtml>
<html {{ HTML_ATTRS}} >
  <head {{ HEAD_ATTRS}} >
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS}} >
    {{ APP }}
  </body>
</html>
Copy the code

layout

Nuxt.js allows you to extend the default layout or create custom layouts in the Layout directory.

The default layout

<template>
  <nuxt />
</template>
Copy the code

Custom layout

blog.vue

<template>
  <div>
    <div>My blog navigation bar is here</div>
    <nuxt />
  </div>
</template>
Copy the code

Using custom layouts:

<template> <! -- Your template --> </template><script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>
Copy the code

Asynchronous data

Nuxt.js extends vue.js to add a method called asyncData that allows us to asynchronously fetch or process data before setting the component’s data.

asyncData

The asyncData method is called before each load of the component (page component only). It can be invoked before a server or route is updated.

Note: Since the asyncData method is called before the component is initialized, there is no way to refer to the component instance object through this within the method.

Nuxt.js provides several different methods to use asyncData methods. You can choose one that you are familiar with:

  • returnPromise
  • useasync/await
  • Use the callback function

Vuex state tree

Using state trees

Nuxt.js will try to find the store directory under the SRC directory (the app root by default), and if that directory exists, it will do the following:

  • Reference the VUEX module
  • Add the VUex module to the Vendors build configuration
  • Sets the store configuration item of the Vue root instance

Nuxt.js recommends using module mode to use store: each.js file in the store directory is converted to a submodule named in the state tree (index is the root module, of course).