Asked Nov 27th, 2019 9:18 AM 150 0 4
  • 150 0 4
0

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

Share
  • 150 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 ANSWERS


Answered Nov 27th, 2019 9:19 AM
Accepted
+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.

Share
Lê Tuấn Anh @tuananhbfs
Nov 28th, 2019 9:25 AM

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

0
| Reply
Share
Nov 29th, 2019 10:39 AM

@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.

0
| Reply
Share
Answered Nov 27th, 2019 9:22 AM
0

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'
Share
Answered Nov 27th, 2019 9:48 AM
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

Share
cong du @Ghost
Nov 28th, 2019 2:16 AM

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

0
| Reply
Share
Lê Tuấn Anh @tuananhbfs
Nov 28th, 2019 9:29 AM

@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?

0
| Reply
Share
Lê Tuấn Anh @tuananhbfs
Nov 28th, 2019 9:31 AM

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

0
| Reply
Share
cong du @Ghost
Nov 28th, 2019 10:21 AM

@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 đó

0
| Reply
Share
Nov 29th, 2019 1:04 AM

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

0
| Reply
Share
Answered Nov 29th, 2019 6:13 AM
0

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

Share