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

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

2. 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',
    })
  }
}

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

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

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

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'