Nuxtjs and basic concepts to know

Tram Ho

1. What is NuxtJs?

  • Nuxt.js is a higher-level framework built on top of Vue.
  • It simplifies the development of Universal or Single Page Vue Apps.

2. Initialize the Nuxtjs . project

To initialize the Nuxtjs project we use create-nuxt-app

When initializing the project we type the above command and wait for a moment, Nuxtjs will ask us about the basic setup of the project such as project name, programming language, package manager… image.png After the initialization is complete, if you want to run your project, use the command

By default your project will be run at http://localhost:3000/

3. Folder structure

Note that in the current version "nuxt": "^2.15.8" , after initializing Nuxtjs there are no folders like layout, middleware, assets… If you want to use it, you have to create it manually.

image.png

components :

  • Directory containing your Vuejs Components.
  • Components make up different parts of your page and can be reused.

pages :

  • This is where your Application Views and routes will be located.
  • Each .vue file will correspond to 1 route.

static : +Contains a resource that is publicly accessible via the path

  • For example, if you want to get the robots.txt file in the /static/robots.txt directory, just go to the address: localhost:3000/robots.txt

store :

  • Contains your Vuex Store files.
  • By default they will be disabled, to use the store you need to create an index.js file in this directory.

File nuxt.config.js : Contains configuration settings for your application

There are also some other folders that Nuxtjs has hidden. If you want to use it, you have to create it manually

assets : Contains your uncompiled files like your css or sass, images or fonts.

middleware : Middleware allows you to define functions to be run before rendering a page or group of pages. (e.g. check if the user is already logged in, if not, redirect to the login page). If you are familiar with the back-end language, you are no longer unfamiliar with middleware, right?

layouts : contains the layouts for your application, there may be many layouts that do not have to be the same (eg: the login layout will be different from the homepage layout).

If nothing is set, by default Nuxtjs will get the layout at default.vue . So to build the layout for your application you need to create the default.vue file in the layouts folder

You can add components like TheHeader, TheFooter to easily build a <Nuxt /> layout that acts as a slot, making Pages passable.

Also, if you want to create a different layout for login, you can add the file at layouts/login.vue

Note: to use this layout you need to add the following line in the Pages you want to use

You can learn more about these directories at the following link https://nuxtjs.org/docs/directory-structure

3. Routing

If in Vue we want to create routing we have to define the path ourselves, import components. Then with Nuxt js creating routing is extremely simple, we just need to create a folder, a file in the Pages folder, then Nuxt will automatically generate it for us. The example has the following file structure:

The corresponding route would be:

3. 1 Dynamic Routes

Sometimes you want to add parameters to your route so we can use dynamic route. The creation is also very simple, just add a ” _ ” sign before the .vue file, which can be a directory or file name. Example directory structure is as follows

Corresponding routes:

You can see the route name ‘users-id’ has the path :id? ie this is optional (may or may not be).

To get that parameter on the url, Nuxtjs also supports us by using $ route.params.id with id as the filename as _id.

In this article, I only briefly introduce about Nuxtjs. In the following articles, I will share more about the concepts in Nuxtjs

 

Share the news now

Source : Viblo