Yêu cầu thg 11 27, 2019 9:18 SA 468 0 4
  • 468 0 4
0

Nuxt js, có Cách nào để thêm Plugin only desktop ko mọi người?

Chia sẻ
  • 468 0 4

Mình muốn thêm plugin Chat Messenger vào website. nhưng chỉ hiển thị trên desktop.

có bác nào đã giải quyết chuyện này ko?

import Vue from 'vue' import VueFbCustomerChat from 'vue-fb-customer-chat'

Vue.use(VueFbCustomerChat, { page_id: xxx, theme_color: '#6a9e10', locale: 'vi_VN', })

4 CÂU TRẢ LỜI


Đã trả lời thg 11 27, 2019 9:19 SA
Đã được chấp nhận
+3

Solution 1: Use CSS3

Có rất nhiều giải pháp nhé. Mình suggest bạn một cách rất đơn giản mà hữu ích chỉ với CSS mà không phải thêm plugin nhé.

Khi tích hợp Facebook Messenger, trong đoạn code embed Facebook đưa cho mình sẽ bao gồm một thẻ div#fb-root, được facebook dùng để embed chatbox vào bên trong đó. Bạn chỉ thêm style cho cái div#fb-root là được. Nếu bạn dùng cái lib kia thì chắc nó cũng sẽ render ra #fb-root hoặc nếu khác thì bạn làm tương tự nha.

VD: Muốn ẩn chatbox khi ở màn hình có độ rộng nhỏ hơn hoặc bằng 1023px, thêm đoạn code như sau:

@media screen and (max-width: 1023px) {
  #fb-root {
    display: none !important;
  }
}

Ngoài ra, bạn có thể thêm javascript để lấy chiều rộng hiện tại của màn hình rồi thêm quyết định có render cái component messenger hay không.

Ưu điểm của việc dùng CSS:

  • Dùng CSS3 nên thoải mái tùy biến theo độ phân giải màn hình
  • Khi độ rộng màn hình thay đổi, xoay màn hình, thì CSS vẫn chạy tốt

Solution 2: Handle by JavaScript

@tuananhbfs Nếu bạn không muốn dùng CSS thì bạn có thể viết code JS như sau, cũng đơn giản và dễ hiểu:

  1. Cài thêm package mobile-detect để kiểm tra thiết bị có phải là mobile không
yarn add mobile-detect
  1. Viết plugin cho Nuxt.js
import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'
import MobileDetect from 'mobile-detect'

export default () => {
  const mobileDetect = new MobileDetect(window.navigator.userAgent)

  if (!mobileDetect.mobile()) {
    Vue.use(VueFbCustomerChat, {
      page_id: 'xxx',
      theme_color: '#6a9e10',
      locale: 'vi_VN',
    })
  }
}
  1. Kích hoạt plugin của bạn
export default {
  ...,
  plugins: [
    ...,
    { src: '~/plugins/facebookMessenger', ssr: false },
  ]
}

Nhớ lưu ý là phải khải báo plugin với ssr: false nhé. Vì cái plugin này mình chỉ cần chạy dưới client thôi.

Chia sẻ
Avatar TAMIX @tuananhbfs
thg 11 28, 2019 9:25 SA

thank you. mình ko muốn ẩn bằng css.

thg 11 29, 2019 10:39 SA

@tuananhbfs Nếu bạn không muốn dùng CSS thì bạn có thể viết code JS như sau, cũng đơn giản và dễ hiểu:

  1. Cài thêm package mobile-detect để kiểm tra thiết bị có phải là mobile không
yarn add mobile-detect
  1. Viết plugin cho Nuxt.js
import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'
import MobileDetect from 'mobile-detect'

export default () => {
  const mobileDetect = new MobileDetect(window.navigator.userAgent)

  if (!mobileDetect.mobile()) {
    Vue.use(VueFbCustomerChat, {
      page_id: 'xxx',
      theme_color: '#6a9e10',
      locale: 'vi_VN',
    })
  }
}
  1. Kích hoạt plugin của bạn
export default {
  ...,
  plugins: [
    ...,
    { src: '~/plugins/facebookMessenger', ssr: false },
  ]
}

Nhớ lưu ý là phải khải báo plugin với ssr: false nhé. Vì cái plugin này mình chỉ cần chạy dưới client thôi.

Đã trả lời thg 11 27, 2019 9:48 SA
0

Có thể dùng media query bằng css để ẩn đi, hoặc bạn tạo 1 plugins sử dụng lại plugins VueFbCustomerChat và check nếu là desktop thì mới hiển thị. rồi import vào, sau này bạn có thể dùng lại đc cho các dự án khác nhau

Chia sẻ
Avatar cong du @Ghost
thg 11 28, 2019 2:16 SA

Bạn có thể chia layout cho devices, bạn có thể tham khảo link này: https://github.com/nuxt/nuxt.js/issues/2223#issuecomment-346940543

Avatar TAMIX @tuananhbfs
thg 11 28, 2019 9:29 SA

@thành Tâm, Nuxt có hỗ trợ check device ngay tại Plugin luôn ha bạn? Hay bạn dùng thêm plugin nào?

Avatar TAMIX @tuananhbfs
thg 11 28, 2019 9:31 SA

@Ghost chỉ vì 1 vài trường hợp này mà chia layout thì ko tốt lắm.

Avatar cong du @Ghost
thg 11 28, 2019 10:21 SA

@tuananhbfs tại sao bạn không sử dụng mixin nhỉ? bạn có thể thay đổi nó cho nhiều nơi và nhiều hình thù khác nhau như là viết components global đó

thg 11 29, 2019 1:04 SA

@tuananhbfs bạn có thể check độ rộng của màn hình, hoặc check trong useragent

Đã trả lời thg 11 29, 2019 6:13 SA
0

vote down? Ai cho mình biết lý do ko?

Chia sẻ
Đã trả lời thg 11 27, 2019 9:22 SA
-1

bạn muốn nó hiển thị trên Desktop thì mình nghĩ bạn cần check về phần user-agent. Phần kia bạn cần đăng kí thêm trong options plugins ở nuxt.config.js

plugins: '~/plugins/vue-fb-customer-chat'
Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí