Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu cách hiển thị màn hình tải khi chuyển trang trong ứng dụng Nuxt3. Việc này giúp cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi trực quan trong khi dữ liệu đang được tải. Chúng ta sẽ sử dụng phương pháp bất đồng bộ với await để đảm bảo rằng màn hình tải được hiển thị đúng cách.

Cài đặt môi trường

Trước khi bắt đầu, hãy chắc chắn rằng bạn đã cài đặt Nuxt3 trong dự án của mình. Nếu chưa, bạn có thể làm theo các bước sau để cài đặt:

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

Cách thực hiện

Tạo Plugin cho Màn Hình Tải

Đầu tiên, chúng ta sẽ tạo một plugin để quản lý màn hình tải. Tạo một tệp có tên loading.js trong thư mục plugins:

export default defineNuxtPlugin((nuxtApp) => {
  const global = useGlobalLoading()

  nuxtApp.hook('page:start', () => {
    global.showLoading()
  });
  nuxtApp.hook('page:loading:end', () => {
    global.hideLoading()
  });
})

Hàm useGlobalLoading

Tiếp theo, chúng ta sẽ tạo một hàm useGlobalLoading để quản lý trạng thái của màn hình tải. Tạo một tệp có tên loading.js trong thư mục composables:

export function useGlobalLoading() {
  const isGlobalLoading = useState('global-loading', () => false)

  function showLoading() {
    isGlobalLoading.value = true
  }

  function hideLoading() {
    isGlobalLoading.value = false
  }

  return {
    isGlobalLoading,
    showLoading,
    hideLoading,
  }
}

Tích hợp vào app.vue

Cuối cùng, chúng ta cần tích hợp màn hình tải vào tệp app.vue. Mở tệp app.vue và thêm mã sau:

<script setup lang="ts">
import Loading from './components/Loading.vue'

const globalLoading = useGlobalLoading()
</script>

<template>
  <div class="h-screen w-full flex justify-center items-center relative">
    <div
      v-show="globalLoading.isGlobalLoading.value"
      class="h-full w-full flex justify-center items-center fixed bg-gray-400/50 z-[9999]"
    >
      <Loading />
    </div>
    <div class="h-full w-full">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </div>
</template>

Component Loading

Để hoàn thành, chúng ta cần tạo component Loading.vue trong thư mục components. Đây là một ví dụ đơn giản:

<template>
  <div class="loader">
    <p>Đang tải...</p>
  </div>
</template>

<style scoped>
.loader {
  font-size: 24px;
  color: white;
}
</style>

Các Thực Hành Tốt Nhất

• Sử dụng hiệu ứng chuyển tiếp: Thêm các hiệu ứng CSS để màn hình tải trông mượt mà hơn.
• Giới hạn thời gian tải: Đặt thời gian tối đa cho màn hình tải để tránh làm người dùng chờ đợi lâu.
• Kiểm tra trên nhiều trình duyệt: Đảm bảo rằng màn hình tải hoạt động tốt trên các trình duyệt khác nhau.

Những Lỗi Thường Gặp

• Màn hình tải không hiển thị: Kiểm tra xem hàm showLoading có được gọi đúng cách hay không.
• Hiệu suất chậm: Tối ưu hóa các truy vấn API để giảm thời gian tải.

Mẹo Hiệu Suất

• Sử dụng Lazy Loading: Tải các thành phần không cần thiết chỉ khi người dùng cần.
• Giảm kích thước hình ảnh: Sử dụng hình ảnh có kích thước nhỏ hơn cho màn hình tải.

Kết luận

Việc hiển thị màn hình tải trong Nuxt3 là một cách hiệu quả để cải thiện trải nghiệm người dùng. Bằng cách sử dụng các kỹ thuật bất đồng bộ kết hợp với các thực hành tốt, bạn có thể tạo ra một ứng dụng mượt mà và thân thiện hơn. Hãy bắt đầu áp dụng ngay hôm nay!

Câu hỏi thường gặp (FAQ)

1. Màn hình tải có thể tùy chỉnh không?

Có, bạn có thể tùy chỉnh nội dung và kiểu dáng của màn hình tải theo ý muốn.

2. Làm thế nào để tích hợp màn hình tải vào các trang cụ thể?

Bạn chỉ cần gọi hàm showLoading trong hook tương ứng của trang đó.

3. Có cần thêm thư viện bên ngoài không?

Không, bạn có thể thực hiện tất cả các thao tác này chỉ với Nuxt3 mà không cần thư viện bên ngoài.