Giới thiệu về NuxtJs

Nuxtjs là gì?

Đây là một framework của Vuejs được sử dụng để xây dựng những ứng dụng từ Vuejs. Nó có thể dùng để xây dựng một static landing pages hay thậm chí là những ứng dựng phức tạp. Vì vậy trước khi học nuxt.js các bạn nhớ phải tìm hiểu về vuejs trước.

Một vài tính năng nổi bật trong nuxt.js

• Viết dưới dạng file vue (.vue)
• Tự động split code để load javascript nhanh hơn
• Được áp dụng server side rendering
• Hỗ trợ routing khá dễ dàng
• Hỗ trợ ES6/ES7
• Đóng gói và nén javascript, css
• Quản lý các thẻ ở phần head

Nuxtjs hoạt động thế nào

Chúng hỗ trợ các thư viện như:

• Vue 2
• Vue-Router
• Vuex (được include chỉ khi bạn sử dụng store)
• Vue Server Renderer
• Vue-meta

Sơ đồ hoạt động

Khi có request đến server hoặc khi user bấm vào link thông qua <nuxt-link> thì nuxt.js sẽ hoạt động theo sơ đồ sau:

Cài đặt ứng dụng nuxtjs

Các bạn có thể cài đặt qua npx

npx create-nuxt-app <project-name>

hoặc qua yarn

yarn create nuxt-app <project-name>

Trong quá trình cài đặt nó sẽ hỏi các bạn một vài câu hỏi để chọn, bạn hãy chọn các thứ bạn cần là được. Cài xong bạn sẽ nhận được một cấu trúc thư mục dạng như thế này

Sau khi cài xong các bạn chạy npm run dev và mở localhost:3000 lên để chạy ứng dụng nuxtjs

Tìm hiểu về cấu trúc thư mục

• Assets: Chứa các tài nguyên chưa được biên dịch như Stylus, Sass, image, font.

• Components: Chứa các components của bạn
  Nếu một ứng dụng vuejs bình thường thì cấu trúc thư mục của component của bạn sẽ như thế này
  Chúng ta sẽ đặt hết các components trong này chứ ? Nhưng đôi khi sẽ gây chút kiểm soát nhầm lẫn, ví dụ người dùng tạo 1 file để dành cho view, hay layouts, thì điều này trong nuxtjs đã phân chia khá rõ ràng
  Đó như các bạn thấy thì mỗi folder sẽ chứa những file component riêng, mỗi bản thân chúng chứa những tác dụng khác nhau. Layouts: Chứa các giao diện cho ứng dụng
  Page: Chứa các view ứng dụng và đồng thời đầy cũng là cấu trúc routes của chúng ta được sinh ra
  Component: Chức các component có thể tái sử dụng.
  Ba thư mục trên cấu hình tạo nên một trang để chúng ta nhìn thấy. Ví dụ như thế này.

• Middleware: Chứa Middleware của ứng dụng, middleware cho phép bạn định nghĩa các function được chạy trước khi render 1 page hoặc nhóm page

• Plugins: Chứa các javascript plugin

• Static: Chứa các file tĩnh như các file ảnh chẳng hạn, được map tự động, ví dụ file /static/logo.png sẽ là yoursite/logo.png

• Store: Chứa các file vuex store

• File nuxt.config.js: Chứa các cấu hình được thiết đặt cho ứng dụng của bạn

• File package.json: Chứa các dependencies và scripts

Đôi điều về routing

Nuxtjs sẽ tự động sinh ra route theo định nghĩa cấu trúc file trong thư mục pages.

Basic route

Ví dụ chúng ta có một cấu trúc thư mục như sau:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

Chúng sẽ tự động generate ra một cấu trúc route như sau

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'
    }
  ]
}

Quá nhanh đúng không nào, thay vì tự định nghĩa viết ra route thì thay vào đó chúng ta có thể tự sinh ra route bằng các tạo ra các folder vào các file. Đây là hình ảnh minh họa Rất hay phải không nào, bắt đầu thấy nuxtjs thú vị hơn rồi đấy nhỉ.

Dynamic Routes

Để thêm tham số cho route, bạn chỉ cần định nghĩa 1 file mới với cách viết ví dụ như _id, với _ là tiền tố đứng trước nhé. Ví dụ có cấu trúc file như sau:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Route tương ứng sẽ là

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'
    }
  ]
}

Để lấy được tham số đó trên url, nuxtjs cũng hỗ trợ chúng ta luôn bằng cách sử dụng $route.params.id với id là tên file dưới dạng _id.
Ngoài ra chúng ta cũng có thể validate tham số trên routes, hay có nested route. Các bạn có thể tìm hiểu thêm tại trang chủ của nó. Ở bài viết lần này mình chỉ giới thiệu sơ qua về route để cho các bạn hiểu hơn về nuxtjs. Ở bài viết khác mình sẽ nói rõ hơn về các khái niệm trong nuxtjs